CodePen – Resume_Skills_listing<\/title>\n \n <link rel=\"canonical\" href=\"https:\/\/codepen.io\/coderganesh\/pen\/RmYdpZ\">\n \n \n \n \n <style>\n .skills {\n animation-name: skills;\n }\n \n html {\n font-size: 100%;\n font-family: sans-serif;\n }\n \n body {\n background: #5aa8e8;\n }\n \n html,\n body,\n main {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n \n main {\n overflow: hidden;\n position: relative;\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n section {\n background: #5aa8e8;\n }\n \n section article.skills {\n width: 500px;\n height: auto;\n }\n \n section article.skills p {\n z-index: 2;\n color: #fff;\n padding: 10px;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n section article.skills div span:nth-child(1) {\n z-index: -2;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n background: #fff;\n height: 100%;\n width: 100%;\n }\n \n section article.skills div span:nth-child(2) {\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: #5E95E8;\n height: 100%;\n }\n \n section article.skills div:nth-child(1) span:nth-child(2) {\n width: 80%;\n animation-delay: 0;\n }\n \n section article.skills div:nth-child(2) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.05s;\n }\n \n section article.skills div:nth-child(3) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.1s;\n }\n \n section article.skills div:nth-child(4) span:nth-child(2) {\n width: 60%;\n animation-delay: 0.15s;\n }\n \n section article.skills div:nth-child(5) span:nth-child(2) {\n width: 55%;\n animation-delay: 0.2s;\n }\n \n section article.skills div:nth-child(6) span:nth-child(2) {\n width: 50%;\n animation-delay: 0.25s;\n }\n \n section article.skills div:nth-child(7) span:nth-child(2) {\n width: 60%;\n animation-delay: 0.3s;\n }\n \n section article.skills div:nth-child(8) span:nth-child(2) {\n width: 90%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(9) span:nth-child(2) {\n width: 80%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(10) span:nth-child(2) {\n width: 80%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(11) span:nth-child(2) {\n width: 75%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(12) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(13) span:nth-child(2) {\n width: 50%;\n animation-delay: 0.35s;\n }\n \n section:before {\n position: absolute;\n top: -250px;\n left: -350px;\n width: 500px;\n height: 500px;\n content: \"\";\n background: rgba(108, 90, 232, 0.25);\n transform: rotate(30deg);\n }\n \n section:after {\n position: absolute;\n bottom: -250px;\n right: -350px;\n width: 500px;\n height: 500px;\n content: \"\";\n background: rgba(108, 90, 232, 0.25);\n transform: rotate(30deg);\n }\n \n .skills {\n animation: skills 1.25s cubic-bezier(0.17, 0.67, 0, 1);\n }\n \n @keyframes skills {\n 0% {\n left: -500px;\n opacity: 0;\n }\n 100% {\n left: 0;\n opacity: 1;\n }\n }\n <\/style>\n \n <script>\n window.console = window.console || function(t) {};\n <\/script>\n \n \n \n <\/head>\n \n <body translate=\"no\">\n <main>\n <section id=\"skills\" class=\"toad-fullscreen\">\n <article class=\"skills\">\n <div class=\"t-6\">\n <p>Revit<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n\n <div class=\"t-6\">\n <p>LUMION<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>AUTOCAD<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>ARCHICAD<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>3D MAX<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>BLENDER<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>SKETCHUP<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>AGISOFT METASHAPE<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Ps<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Ai<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Id<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Lr<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Pr<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <\/article>\n <\/section>\n <\/main>\n \n \n \n \n \n \n <\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>CodePen – Resume_Skills_listing Revit LUMION AUTOCAD ARCHICAD 3D MAX BLENDER SKETCHUP AGISOFT METASHAPE Ps Ai Id Lr Pr<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":2,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":29,"date":"2023-10-30T23:26:39","date_gmt":"2023-10-30T20:26:39","guid":{"rendered":"https:\/\/shop.hayat-tech.fr\/?p=29"},"modified":"2023-10-30T23:27:34","modified_gmt":"2023-10-30T20:27:34","slug":"29","status":"publish","type":"post","link":"https:\/\/shop.hayat-tech.fr\/?p=29","title":{"rendered":""},"content":{"rendered":"\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n CodePen – Resume_Skills_listing<\/title>\n \n <link rel=\"canonical\" href=\"https:\/\/codepen.io\/coderganesh\/pen\/RmYdpZ\">\n \n \n \n \n <style>\n .skills {\n animation-name: skills;\n }\n \n html {\n font-size: 100%;\n font-family: sans-serif;\n }\n \n body {\n background: #5aa8e8;\n }\n \n html,\n body,\n main {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n \n main {\n overflow: hidden;\n position: relative;\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n section {\n background: #5aa8e8;\n }\n \n section article.skills {\n width: 500px;\n height: auto;\n }\n \n section article.skills p {\n z-index: 2;\n color: #fff;\n padding: 10px;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n section article.skills div span:nth-child(1) {\n z-index: -2;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n background: #fff;\n height: 100%;\n width: 100%;\n }\n \n section article.skills div span:nth-child(2) {\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: #5E95E8;\n height: 100%;\n }\n \n section article.skills div:nth-child(1) span:nth-child(2) {\n width: 80%;\n animation-delay: 0;\n }\n \n section article.skills div:nth-child(2) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.05s;\n }\n \n section article.skills div:nth-child(3) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.1s;\n }\n \n section article.skills div:nth-child(4) span:nth-child(2) {\n width: 60%;\n animation-delay: 0.15s;\n }\n \n section article.skills div:nth-child(5) span:nth-child(2) {\n width: 55%;\n animation-delay: 0.2s;\n }\n \n section article.skills div:nth-child(6) span:nth-child(2) {\n width: 50%;\n animation-delay: 0.25s;\n }\n \n section article.skills div:nth-child(7) span:nth-child(2) {\n width: 60%;\n animation-delay: 0.3s;\n }\n \n section article.skills div:nth-child(8) span:nth-child(2) {\n width: 90%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(9) span:nth-child(2) {\n width: 80%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(10) span:nth-child(2) {\n width: 80%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(11) span:nth-child(2) {\n width: 75%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(12) span:nth-child(2) {\n width: 100%;\n animation-delay: 0.35s;\n }\n section article.skills div:nth-child(13) span:nth-child(2) {\n width: 50%;\n animation-delay: 0.35s;\n }\n \n section:before {\n position: absolute;\n top: -250px;\n left: -350px;\n width: 500px;\n height: 500px;\n content: \"\";\n background: rgba(108, 90, 232, 0.25);\n transform: rotate(30deg);\n }\n \n section:after {\n position: absolute;\n bottom: -250px;\n right: -350px;\n width: 500px;\n height: 500px;\n content: \"\";\n background: rgba(108, 90, 232, 0.25);\n transform: rotate(30deg);\n }\n \n .skills {\n animation: skills 1.25s cubic-bezier(0.17, 0.67, 0, 1);\n }\n \n @keyframes skills {\n 0% {\n left: -500px;\n opacity: 0;\n }\n 100% {\n left: 0;\n opacity: 1;\n }\n }\n <\/style>\n \n <script>\n window.console = window.console || function(t) {};\n <\/script>\n \n \n \n <\/head>\n \n <body translate=\"no\">\n <main>\n <section id=\"skills\" class=\"toad-fullscreen\">\n <article class=\"skills\">\n <div class=\"t-6\">\n <p>Revit<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n\n <div class=\"t-6\">\n <p>LUMION<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>AUTOCAD<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>ARCHICAD<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>3D MAX<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>BLENDER<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <div class=\"t-6\">\n <p>SKETCHUP<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>AGISOFT METASHAPE<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Ps<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Ai<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Id<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Lr<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n <div class=\"t-6\">\n <p>Pr<span><\/span><span class=\"skills\"><\/span><\/p>\n <\/div>\n \n <\/article>\n <\/section>\n <\/main>\n \n \n \n \n \n \n <\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>CodePen – Resume_Skills_listing Revit LUMION AUTOCAD ARCHICAD 3D MAX BLENDER SKETCHUP AGISOFT METASHAPE Ps Ai Id Lr Pr<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":2,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=\/wp\/v2\/posts\/29\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shop.hayat-tech.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}