From ae9175dbbb7480e2a2bdb7a3f2ff7cda20958390 Mon Sep 17 00:00:00 2001 From: Nitin Soni Date: Tue, 22 Oct 2024 15:28:21 +0530 Subject: [PATCH] redesigned nav-menu overlay links --- blog.html | 20 +++++++++++--------- blog/blog-template.html | 20 +++++++++++--------- css/style.css | 16 ++++++++++++++-- css/style.min.css | 2 +- index.html | 10 ++++++---- js/main.js | 2 +- 6 files changed, 44 insertions(+), 26 deletions(-) diff --git a/blog.html b/blog.html index d33c68f..f8005be 100644 --- a/blog.html +++ b/blog.html @@ -31,20 +31,22 @@
  • Contact
  • Blog
    • -
    - - - -
    + + + + +
    E-mail me
    - Home - Portfolio - Contact - Blog +
    + Home + Portfolio + Contact + Blog +
    diff --git a/blog/blog-template.html b/blog/blog-template.html index 2a17459..b945652 100644 --- a/blog/blog-template.html +++ b/blog/blog-template.html @@ -31,20 +31,22 @@
  • Contact
  • Blog
    • -
    - - - -
    + + + + +
    E-mail me
    - Home - Portfolio - Contact - Blog +
    + Home + Portfolio + Contact + Blog +
    diff --git a/css/style.css b/css/style.css index 93ecdb6..e4cb3da 100644 --- a/css/style.css +++ b/css/style.css @@ -337,11 +337,23 @@ nav .nav-overlay.active { pointer-events: all; } -nav .nav-overlay .nav-link { +nav .nav-overlay .container { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +nav .nav-overlay .container .nav-link { color: var(--text-primary); font-size: 1.2rem; text-decoration: none; - margin: 1rem 0; + margin: 1.2rem 0; +} + +nav .nav-overlay .container .nav-link i { + font-size: 1.3rem; + padding-right: .75rem; } .scroll-to-top { diff --git a/css/style.min.css b/css/style.min.css index 7c306ea..1a71e87 100644 --- a/css/style.min.css +++ b/css/style.min.css @@ -1 +1 @@ -.preloader,nav{align-items:center}.button,nav .nav-l ul .nav-link a{font-size:1rem;text-decoration:none}#contact .table .table-r .container .card.one .content .block-bottom .social-block a i,*{padding:0}:root{--text-primary:white;--text-secondary:rgba(255, 255, 255, .8);--gold:#fae575;--background:black}@font-face{font-family:Arizonia;src:url('/assets/fonts/Arizonia/Arizonia-Regular.woff2') format('woff2'),url('/assets/fonts/Arizonia/Arizonia-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Thin.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Thin.ttf') format('truetype');font-weight:100;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-ExtraLight.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Light.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Light.ttf') format('truetype');font-weight:300;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Regular.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Medium.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Bold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-ExtraBold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Black.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Black.ttf') format('truetype');font-weight:900;font-display:swap}*{margin:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--background);color:var(--text-primary);cursor:url('/assets/images/pointer.png'),auto;line-height:1.375}#home .contact-box .contact-bar form .submit,a:active,a:hover,button,nav .nav-l .hamburger{cursor:url('/assets/images/link.png'),pointer}.no-scroll-touch{pointer-events:none;overflow:hidden}input,textarea{cursor:url('/assets/images/text.png'),text}::selection{color:var(--background);background-color:var(--gold)}.button,.gold-text,.scroll-to-top,nav .nav-l ul .nav-link a.active{color:var(--gold)}#portfolio .table .table-r i,.gold-gradient-text{background:-webkit-linear-gradient(0deg,#b18a52,#f1e8a4);-webkit-text-fill-color:transparent}.gold-gradient-text{-webkit-background-clip:text}.button{font-weight:500;background:0 0;padding:.75rem 1.5rem;border:1px solid rgba(255,255,255,.24);border-radius:12px;transition:font-size .4s,padding .4s,margin .4s;backdrop-filter:blur(24px)}.preloader,nav .nav-overlay{height:100vh;backdrop-filter:blur(48px);top:0;left:0;display:flex}.paragraph a,.paragraph h3,.paragraph i,.paragraph p{opacity:0;filter:blur(3px);transform:translateX(-1rem);transition:.7s,font-size .4s,padding .4s}.paragraph.active a,.paragraph.active h3,.paragraph.active i,.paragraph.active p{opacity:1;filter:blur(0);transform:translateX(0)}.paragraph.active p{transition-delay:.2s}.paragraph.active a{transition:.7s .4s,font-size .4s,padding .4s}.preloader{width:100vw;background:0 0;justify-content:center;position:fixed;z-index:9999;opacity:1;transition:opacity .25s}.scroll-to-top,nav{z-index:99;position:fixed;backdrop-filter:blur(24px)}.preloader .dot{background-color:var(--gold);height:12px;width:12px;border-radius:50%;display:inline-block;margin:0 3px;box-shadow:#060606 1px 1px 5px -1px;animation:.8s ease-in-out infinite jump}.preloader .dot.a{animation-delay:-.6s}.preloader .dot.b{animation-delay:-.5s}.preloader .dot.c{animation-delay:-.4s}.preloader .dot.d{animation-delay:-.3s}@keyframes jump{0%,100%,40%{transform:translateY(-12px)}20%{transform:translateY(-24px)}}.preloader-hide{opacity:0}nav{width:100%;height:4.5rem;padding:0 5%;top:0;left:0;display:flex;justify-content:space-between;flex-wrap:wrap}nav .nav-l .logo{color:var(--text-primary);font-size:1.5rem;font-weight:500;letter-spacing:2px;margin-right:2rem;text-decoration:none}nav .nav-l,nav .nav-l ul{display:flex;align-items:center}nav .nav-l ul li{list-style:none}nav .nav-l ul .nav-link a{color:var(--text-primary);padding:.5rem 1rem;transition:color .3s}nav .nav-l .hamburger{display:none;position:absolute;top:14px;right:5%;transition:transform .4s;z-index:999}nav .nav-l .hamburger.active{position:fixed;transform:rotate(45deg);pointer-events:all}nav .nav-l .hamburger .line{fill:none;transition:stroke-dasharray .4s,stroke-dashoffset .4s;stroke:var(--text-primary);stroke-width:5.5;stroke-linecap:round}nav .nav-l .hamburger:first-child,nav .nav-l .hamburger:nth-child(3){stroke-dasharray:40 121}nav .nav-l .hamburger.active:first-child,nav .nav-l .hamburger.active:nth-child(3){stroke-dashoffset:-68px}nav .nav-r{display:flex;justify-content:center;width:9rem}nav .nav-overlay{width:100%;position:fixed;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.3);clip-path:circle(50px at 100% -20%);transition:clip-path 1s ease-out;pointer-events:none}nav .nav-overlay.active{clip-path:circle(1000px at 80% -10%);pointer-events:all}nav .nav-overlay .nav-link{color:var(--text-primary);font-size:1.2rem;text-decoration:none;margin:1rem 0}.scroll-to-top{bottom:2rem;right:2.5rem;font-size:1.25rem;background:0 0;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.24);border-radius:12px;opacity:0;visibility:hidden;transition:.3s}.scroll-to-top-show{opacity:1;visibility:visible}#home{width:100%;text-align:center;background-image:linear-gradient(transparent 74%,var(--background)),radial-gradient(circle,#282828,var(--background))}#home .light-wrapper{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}#home .light-wrapper .lights-holder{width:100%;height:100%;opacity:.4;display:flex;justify-content:center;align-items:flex-start;column-gap:70px;position:relative;top:-222px;transform:rotate(-30deg)}#home .light-wrapper .lights-holder .light{width:180px;height:1000px;background-image:linear-gradient(to bottom,var(--gold) 5%,transparent 68%);opacity:.4;filter:blur(18px)}#home .light-wrapper .lights-holder .light.left{width:110px;opacity:.1;filter:blur(9px)}#home .light-wrapper .lights-holder .light.middle{opacity:.56}#home .light-wrapper .lights-holder .light.right{width:110px;opacity:.3;filter:blur(16px)}#home .title{padding-top:8rem}#home .title h1{font-family:Arizonia,cursive;font-size:8rem;font-weight:400}#home .title svg{width:530px;position:absolute;top:10.4rem;left:0;right:0;margin:auto}#home .title svg path{stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:632;stroke-dashoffset:632}.stroke-draw{animation:1.5s .25s forwards draw}@keyframes draw{to{stroke-dashoffset:0}}#home .title h2{font-size:4.8rem;font-weight:600;line-height:1.2;word-spacing:-4px}#home .title p{font-size:1.25rem;font-weight:200;margin-top:32px}#contact .title h2,#portfolio .title h2{font-size:4rem;line-height:1.2;letter-spacing:.025rem}#home .contact-box{display:flex;align-items:center;justify-content:center;height:4rem;padding:8rem 0}#contact .blur-circle,#portfolio .blur-circle{height:240px;background-image:linear-gradient(111deg,#b18a52,#f1e8a4);position:absolute;filter:blur(160px);z-index:-1}#home .contact-box .contact-bar form{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;width:30rem}#home .contact-box .contact-bar form .text-field{font-family:Inter,sans-serif;font-size:15px;width:100%;background-color:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.9rem 8rem .9rem .9rem;margin-right:3px;transition:border-color .2s}#home .contact-box .contact-bar form .text-field:focus{outline:0;border-color:var(--gold)!important}#home .contact-box .contact-bar form .submit{color:var(--background);background-color:var(--gold);padding:.9rem 1.5rem;margin-right:3px;border:none;position:absolute}#contact,#portfolio{width:100%;text-align:center;position:relative}#portfolio .blur-circle{width:240px;border-radius:1000px;top:30%;left:auto;right:0}#contact .title,#portfolio .title{padding-top:4rem;padding-bottom:2rem}#portfolio .title h2{font-weight:400;padding-top:2px}#portfolio .t-container{display:flex;justify-content:center}#contact .table,#portfolio .table{width:90%;display:flex;column-gap:6rem}#contact .table .table-r,#portfolio .table .table-l{width:55%}#contact .table .table-l,#portfolio .table .table-r{width:45%;padding-top:1.5rem;text-align:left}#portfolio .table .table-l .nav-button-container{display:flex;align-items:center;justify-content:center;column-gap:4rem;margin-bottom:2rem}#portfolio .table .table-l .nav-button-container .nav-button{font-size:1.1rem;font-weight:500;color:var(--text-primary);background:0 0;border:none;border-bottom:1.5px solid transparent;padding:.25rem;letter-spacing:.025rem}#portfolio .table .table-l .nav-button-container .nav-button-focus{border-bottom:1.5px solid var(--gold);transition:border .2s}#portfolio .table .table-l .scroll-container{position:relative}#portfolio .table .table-l .scroll-container .fade-overlay{position:absolute;top:0;bottom:0;width:10%}#portfolio .table .table-l .scroll-container .left-fade{left:0;background:linear-gradient(to left,transparent,var(--background))}#portfolio .table .table-l .scroll-container .right-fade{right:0;background:linear-gradient(to right,transparent,var(--background))}#portfolio .table .table-l .scroll-container .card-container{display:grid;grid-auto-flow:column;scroll-behavior:smooth;gap:2.5rem;overflow-y:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;line-height:1.2}#portfolio .table .table-l .scroll-container .card-container::-webkit-scrollbar{display:none}#portfolio .table .table-l .scroll-container .card-container .card{width:24rem;height:32rem;padding-left:2rem;padding-right:1rem;text-align:left;position:relative;background:#1f1f1f;border:1px solid rgba(255,255,255,.12);border-radius:25px;box-shadow:#181a1b 3px -3px 10px 0 inset;z-index:-1;scroll-snap-align:center}#portfolio .table .table-l .scroll-container .card-container .card.a{margin-left:15vw}#portfolio .table .table-l .scroll-container .card-container .card.c{margin-right:15vw}#portfolio .table .table-l .scroll-container .card-container .card>img{position:absolute;top:-1.25px;right:0;left:95px;bottom:0;pointer-events:none}#portfolio .table .table-l .scroll-container .card-container .card .content .heading{font-size:1.2rem;font-weight:500;letter-spacing:.025rem;margin-top:2rem;color:rgba(255,255,255,.9)}#portfolio .table .table-l .scroll-container .card-container .card .content .sub-heading{font-size:1.1rem;margin-top:.9rem;margin-bottom:.5rem;margin-left:2rem;color:var(--text-secondary)}#portfolio .table .table-l .scroll-container .card-container .card .content .text{font-size:.9rem;font-weight:300;margin-top:.35rem;margin-left:3.5rem;color:var(--text-secondary)}#portfolio .table .table-r i{font-size:3rem;padding-bottom:1.5rem;padding-left:.5rem;-webkit-background-clip:text}#contact .table .table-l h3,#portfolio .table .table-r h3{font-size:2.5rem;font-weight:400;line-height:1.2;letter-spacing:.025rem}#contact .table .table-l p,#portfolio .table .table-r p{color:var(--text-secondary);font-size:1.25rem;font-weight:300;margin:1.2rem 0}#contact .table .table-l .button-container,#portfolio .table .table-r .button-container{display:flex;justify-content:center;align-items:center;width:12rem;height:4rem}#contact .blur-circle{width:240px;border-radius:1000px;top:45%;left:-5%}#contact .title h2{font-weight:400}#contact .t-container{display:flex;justify-content:center;padding-top:2rem;padding-bottom:2rem}#contact .table .table-l{padding-left:2rem}#contact .table .table-l i{font-size:2.7rem;padding-bottom:1.5rem;padding-left:.5rem;background:-webkit-linear-gradient(0deg,#b18a52,#f1e8a4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}#contact .table .table-r .container{display:flex;justify-content:center;padding:1.5rem 0}#contact .table .table-r .container .card{width:24rem;height:32rem;color:var(--text-secondary);background:#1f1f1f;border:1px solid rgba(255,255,255,.12);border-radius:25px;box-shadow:#181a1b 3px -3px 10px 0 inset;transition:.5s}#contact .table .table-r .container .card a{color:var(--text-secondary);transition:color .3s;text-decoration:none}#contact .table .table-r .container .card>img{position:absolute;top:-1.4px;right:0;left:95px;bottom:0;pointer-events:none}#contact .table .table-r .container .card.one .content i{padding-right:.5rem}#contact .table .table-r .container .card.one .content .block-top{display:flex;align-items:center;justify-content:space-between;padding:2.25rem 1.8rem}#contact .table .table-r .container .card.one .content .block-top img{width:100px;border:2px solid #b18a52;border-radius:100%;filter:grayscale(10%)}#contact .table .table-r .container .card.one .content .block-top .text{text-align:right}#contact .table .table-r .container .card.one .content .block-top .text h3{font-size:1.1rem;font-weight:500;line-height:1.8}#contact .table .table-r .container .card.one .content .block-top .text a,#contact .table .table-r .container .card.one .content .block-top .text p{font-size:1rem;line-height:1.5}#contact .table .table-r .container .card.one .content .block-bottom{text-align:left;padding:0 2rem}#contact .table .table-r .container .card.one .content .block-bottom a{font-size:1rem;font-weight:300;line-height:2}#contact .table .table-r .container .card.one .content .block-bottom p{font-size:1rem;font-weight:300;padding-top:2rem}#contact .table .table-r .container .card.one .content .block-bottom .social-block{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding-top:2rem;grid-row-gap:1.5rem}#contact .table .table-r .container .card.one .content .block-bottom .social-block a{font-size:1.25rem;padding:.75rem;margin:auto;line-height:0}#contact .table .table-r .container .card.two .content{height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:25px}#contact .table .table-r .container .card.two .content img{height:100%;filter:grayscale(25%)}#contact .table .table-r .container .card.front{z-index:2;position:relative;box-shadow:#0c0c0c -6px -6px 20px 0,#181a1b 3px -3px 10px 0 inset}#contact .table .table-r .container .card:not(.front){transform:rotate(-4deg) translateX(-4px) translateY(-8px);transform-origin:bottom left;opacity:.6;z-index:1;position:absolute;will-change:transform}#contact .table .table-r .container .card.active{animation:2s forwards rotateCard}@keyframes rotateCard{0%,100%,20%,50%,80%{transform:rotate(-4deg) translateX(-4px) translateY(-8px)}40%{transform:rotate(-7deg) translateX(-4px) translateY(-8px)}60%{transform:rotate(-5.5deg) translateX(-4px) translateY(-8px)}}#contact .gradient-ruler{width:100%;height:1px;background:linear-gradient(270deg,#ffffff12,#ffffff42 31%,#fae57566 68%,#ffffff12)}#blog,footer .container .wrapper-r .column{width:100%}#blog .title{text-align:center;padding-top:11rem;padding-bottom:9rem;background-image:linear-gradient(transparent 74%,var(--background)),radial-gradient(circle,#282828,var(--background))}#blog .title h1{font-size:6rem;font-weight:500;letter-spacing:.025rem;line-height:1.2}#blog .blog-table{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:2rem;width:100%;max-width:80rem;margin:auto;padding:0 1rem 6rem}#blog .blog-table .container{width:100%;height:100%;padding:.75rem;background-color:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:1rem;text-decoration:none}#blog .blog-table .container .image-container,#blog-data .blog-head .image-container .block{width:100%;padding-top:66.66%;position:relative}#blog .blog-table .container .image-container img,#blog-data .blog-head .image-container .block img{width:100%;height:100%;border:1px solid rgba(255,255,255,.24);border-radius:.75rem;position:absolute;box-shadow:0 3px 12px 2px rgba(0,0,0,.4);inset:0%;object-fit:cover}#blog .blog-table .container .text-info{display:flex;align-items:center;justify-content:space-between;margin:.75rem 0 0}#blog-data .blog-head,footer .container{margin:auto;flex-direction:row;display:flex}#blog .blog-table .container .text-info .date,#blog-data .blog-head .info-container .detail-block .dot{color:rgba(231,237,239,.6);font-size:.875rem}#blog .blog-table .container .text-info .category,#blog-data .blog-head .info-container .detail-block .category{color:var(--gold);background-color:rgba(250,229,117,.24);font-size:.875rem;border-radius:.5rem;padding:.25rem .5rem}#blog .blog-table .container .text-title{color:var(--text-primary);font-size:1.25rem;font-weight:300;padding-top:.5rem}#blog-data{width:100%;padding:7rem 2.5rem}#blog-data .blur-circle{width:240px;height:240px;filter:blur(160px);background-image:linear-gradient(111deg,#b18a52,#f1e8a4);border-radius:1000px;position:absolute;top:4%;left:-1%;z-index:-1}#blog-data .blog-head{width:100%;max-width:64rem;align-items:center;justify-content:center;gap:4rem}#blog-data .blog-head .info-container{width:50%;padding:3rem 0}#blog-data .blog-head .info-container a{transition:color .3s}#blog-data .blog-head .info-container>a{font-size:.875rem;color:rgba(255,255,255,.7);text-decoration:none}#blog-data .blog-head .info-container>a i{padding-right:.5rem;opacity:.6}#blog-data .blog-head .info-container h1{font-size:2.5rem;font-weight:400;line-height:1.2;letter-spacing:.025rem;padding:.5rem 0}#blog-data .blog-head .info-container .detail-block{display:flex;align-items:center;gap:.5rem;padding:.6rem 0}#blog-data .blog-head .info-container .detail-block a,#blog-data .blog-head .info-container .detail-block p{color:var(--text-secondary);font-size:1rem;text-decoration:none}#blog-data .blog-head .info-container>p{font-size:1.25rem;font-weight:300;padding-top:.5rem}#blog-data .blog-head .image-container{width:50%}footer{padding-top:2.5rem;padding-bottom:4rem}footer .container{width:94%;max-width:80rem;column-gap:8vw}footer .container .wrapper-l{width:40%}footer .container .wrapper-l h2{font-size:1.5rem;font-weight:500;letter-spacing:2px;padding-bottom:1.5rem}footer .container .wrapper-l p{font-size:.875rem}footer .container .wrapper-r{width:60%;display:flex;flex-direction:row;column-gap:2rem}footer .container .wrapper-r h3{font-size:1.25rem;font-weight:300;padding-bottom:1rem}footer .container .wrapper-r p{padding:.5rem 0}footer .container .wrapper-r p a{color:rgba(255,255,255,.7);font-size:.875rem;transition:color .3s;text-decoration:none} +.preloader,nav{align-items:center;display:flex}.button,nav .nav-l ul .nav-link a{font-size:1rem;text-decoration:none}#contact .table .table-r .container .card.one .content .block-bottom .social-block a i,*{padding:0}:root{--text-primary:white;--text-secondary:rgba(255, 255, 255, .8);--gold:#fae575;--background:black}@font-face{font-family:Arizonia;src:url('/assets/fonts/Arizonia/Arizonia-Regular.woff2') format('woff2'),url('/assets/fonts/Arizonia/Arizonia-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Thin.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Thin.ttf') format('truetype');font-weight:100;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-ExtraLight.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');font-weight:200;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Light.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Light.ttf') format('truetype');font-weight:300;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Regular.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Medium.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Bold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-ExtraBold.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/Inter/Inter-Black.woff2') format('woff2'),url('/assets/fonts/Inter/Inter-Black.ttf') format('truetype');font-weight:900;font-display:swap}*{margin:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:var(--background);color:var(--text-primary);cursor:url('/assets/images/pointer.png'),auto;line-height:1.375}#home .contact-box .contact-bar form .submit,a:active,a:hover,button,nav .nav-l .hamburger{cursor:url('/assets/images/link.png'),pointer}.no-scroll-touch{pointer-events:none;overflow:hidden}input,textarea{cursor:url('/assets/images/text.png'),text}::selection{color:var(--background);background-color:var(--gold)}.button,.gold-text,.scroll-to-top,nav .nav-l ul .nav-link a.active{color:var(--gold)}#portfolio .table .table-r i,.gold-gradient-text{background:-webkit-linear-gradient(0deg,#b18a52,#f1e8a4);-webkit-text-fill-color:transparent}.gold-gradient-text{-webkit-background-clip:text}.button{font-weight:500;background:0 0;padding:.75rem 1.5rem;border:1px solid rgba(255,255,255,.24);border-radius:12px;transition:font-size .4s,padding .4s,margin .4s;backdrop-filter:blur(24px)}.preloader,nav .nav-overlay{height:100vh;backdrop-filter:blur(48px);top:0;left:0}.paragraph a,.paragraph h3,.paragraph i,.paragraph p{opacity:0;filter:blur(3px);transform:translateX(-1rem);transition:.7s,font-size .4s,padding .4s}.paragraph.active a,.paragraph.active h3,.paragraph.active i,.paragraph.active p{opacity:1;filter:blur(0);transform:translateX(0)}.paragraph.active p{transition-delay:.2s}.paragraph.active a{transition:.7s .4s,font-size .4s,padding .4s}.preloader{width:100vw;background:0 0;justify-content:center;position:fixed;z-index:9999;opacity:1;transition:opacity .25s}.scroll-to-top,nav{z-index:99;position:fixed;backdrop-filter:blur(24px)}.preloader .dot{background-color:var(--gold);height:12px;width:12px;border-radius:50%;display:inline-block;margin:0 3px;box-shadow:#060606 1px 1px 5px -1px;animation:.8s ease-in-out infinite jump}.preloader .dot.a{animation-delay:-.6s}.preloader .dot.b{animation-delay:-.5s}.preloader .dot.c{animation-delay:-.4s}.preloader .dot.d{animation-delay:-.3s}@keyframes jump{0%,100%,40%{transform:translateY(-12px)}20%{transform:translateY(-24px)}}.preloader-hide{opacity:0}nav{width:100%;height:4.5rem;padding:0 5%;top:0;left:0;justify-content:space-between;flex-wrap:wrap}nav .nav-l .logo{color:var(--text-primary);font-size:1.5rem;font-weight:500;letter-spacing:2px;margin-right:2rem;text-decoration:none}nav .nav-l,nav .nav-l ul{display:flex;align-items:center}nav .nav-l ul li{list-style:none}nav .nav-l ul .nav-link a{color:var(--text-primary);padding:.5rem 1rem;transition:color .3s}nav .nav-l .hamburger{display:none;position:absolute;top:14px;right:5%;transition:transform .4s;z-index:999}nav .nav-l .hamburger.active{position:fixed;transform:rotate(45deg);pointer-events:all}nav .nav-l .hamburger .line{fill:none;transition:stroke-dasharray .4s,stroke-dashoffset .4s;stroke:var(--text-primary);stroke-width:5.5;stroke-linecap:round}nav .nav-l .hamburger:first-child,nav .nav-l .hamburger:nth-child(3){stroke-dasharray:40 121}nav .nav-l .hamburger.active:first-child,nav .nav-l .hamburger.active:nth-child(3){stroke-dashoffset:-68px}nav .nav-r{display:flex;justify-content:center;width:9rem}nav .nav-overlay{width:100%;position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.3);clip-path:circle(50px at 100% -20%);transition:clip-path 1s ease-out;pointer-events:none}nav .nav-overlay.active{clip-path:circle(1000px at 80% -10%);pointer-events:all}nav .nav-overlay .container{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}nav .nav-overlay .container .nav-link{color:var(--text-primary);font-size:1.2rem;text-decoration:none;margin:1.2rem 0}nav .nav-overlay .container .nav-link i{font-size:1.3rem;padding-right:.75rem}.scroll-to-top{bottom:2rem;right:2.5rem;font-size:1.25rem;background:0 0;padding:.7rem .85rem;border:1px solid rgba(255,255,255,.24);border-radius:12px;opacity:0;visibility:hidden;transition:.3s}.scroll-to-top-show{opacity:1;visibility:visible}#home{width:100%;text-align:center;background-image:linear-gradient(transparent 74%,var(--background)),radial-gradient(circle,#282828,var(--background))}#home .light-wrapper{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;pointer-events:none}#home .light-wrapper .lights-holder{width:100%;height:100%;opacity:.4;display:flex;justify-content:center;align-items:flex-start;column-gap:70px;position:relative;top:-222px;transform:rotate(-30deg)}#home .light-wrapper .lights-holder .light{width:180px;height:1000px;background-image:linear-gradient(to bottom,var(--gold) 5%,transparent 68%);opacity:.4;filter:blur(18px)}#home .light-wrapper .lights-holder .light.left{width:110px;opacity:.1;filter:blur(9px)}#home .light-wrapper .lights-holder .light.middle{opacity:.56}#home .light-wrapper .lights-holder .light.right{width:110px;opacity:.3;filter:blur(16px)}#home .title{padding-top:8rem}#home .title h1{font-family:Arizonia,cursive;font-size:8rem;font-weight:400}#home .title svg{width:530px;position:absolute;top:10.4rem;left:0;right:0;margin:auto}#home .title svg path{stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:632;stroke-dashoffset:632}.stroke-draw{animation:1.5s .25s forwards draw}@keyframes draw{to{stroke-dashoffset:0}}#home .title h2{font-size:4.8rem;font-weight:600;line-height:1.2;word-spacing:-4px}#home .title p{font-size:1.25rem;font-weight:200;margin-top:32px}#contact .title h2,#portfolio .title h2{font-size:4rem;line-height:1.2;letter-spacing:.025rem}#home .contact-box{display:flex;align-items:center;justify-content:center;height:4rem;padding:8rem 0}#contact .blur-circle,#portfolio .blur-circle{height:240px;background-image:linear-gradient(111deg,#b18a52,#f1e8a4);position:absolute;filter:blur(160px);z-index:-1}#home .contact-box .contact-bar form{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;width:30rem}#home .contact-box .contact-bar form .text-field{font-family:Inter,sans-serif;font-size:15px;width:100%;background-color:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:.9rem 8rem .9rem .9rem;margin-right:3px;transition:border-color .2s}#home .contact-box .contact-bar form .text-field:focus{outline:0;border-color:var(--gold)!important}#home .contact-box .contact-bar form .submit{color:var(--background);background-color:var(--gold);padding:.9rem 1.5rem;margin-right:3px;border:none;position:absolute}#contact,#portfolio{width:100%;text-align:center;position:relative}#portfolio .blur-circle{width:240px;border-radius:1000px;top:30%;left:auto;right:0}#contact .title,#portfolio .title{padding-top:4rem;padding-bottom:2rem}#portfolio .title h2{font-weight:400;padding-top:2px}#portfolio .t-container{display:flex;justify-content:center}#contact .table,#portfolio .table{width:90%;display:flex;column-gap:6rem}#contact .table .table-r,#portfolio .table .table-l{width:55%}#contact .table .table-l,#portfolio .table .table-r{width:45%;padding-top:1.5rem;text-align:left}#portfolio .table .table-l .nav-button-container{display:flex;align-items:center;justify-content:center;column-gap:4rem;margin-bottom:2rem}#portfolio .table .table-l .nav-button-container .nav-button{font-size:1.1rem;font-weight:500;color:var(--text-primary);background:0 0;border:none;border-bottom:1.5px solid transparent;padding:.25rem;letter-spacing:.025rem}#portfolio .table .table-l .nav-button-container .nav-button-focus{border-bottom:1.5px solid var(--gold);transition:border .2s}#portfolio .table .table-l .scroll-container{position:relative}#portfolio .table .table-l .scroll-container .fade-overlay{position:absolute;top:0;bottom:0;width:10%}#portfolio .table .table-l .scroll-container .left-fade{left:0;background:linear-gradient(to left,transparent,var(--background))}#portfolio .table .table-l .scroll-container .right-fade{right:0;background:linear-gradient(to right,transparent,var(--background))}#portfolio .table .table-l .scroll-container .card-container{display:grid;grid-auto-flow:column;scroll-behavior:smooth;gap:2.5rem;overflow-y:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;line-height:1.2}#portfolio .table .table-l .scroll-container .card-container::-webkit-scrollbar{display:none}#portfolio .table .table-l .scroll-container .card-container .card{width:24rem;height:32rem;padding-left:2rem;padding-right:1rem;text-align:left;position:relative;background:#1f1f1f;border:1px solid rgba(255,255,255,.12);border-radius:25px;box-shadow:#181a1b 3px -3px 10px 0 inset;z-index:-1;scroll-snap-align:center}#portfolio .table .table-l .scroll-container .card-container .card.a{margin-left:15vw}#portfolio .table .table-l .scroll-container .card-container .card.c{margin-right:15vw}#portfolio .table .table-l .scroll-container .card-container .card>img{position:absolute;top:-1.25px;right:0;left:95px;bottom:0;pointer-events:none}#portfolio .table .table-l .scroll-container .card-container .card .content .heading{font-size:1.2rem;font-weight:500;letter-spacing:.025rem;margin-top:2rem;color:rgba(255,255,255,.9)}#portfolio .table .table-l .scroll-container .card-container .card .content .sub-heading{font-size:1.1rem;margin-top:.9rem;margin-bottom:.5rem;margin-left:2rem;color:var(--text-secondary)}#portfolio .table .table-l .scroll-container .card-container .card .content .text{font-size:.9rem;font-weight:300;margin-top:.35rem;margin-left:3.5rem;color:var(--text-secondary)}#portfolio .table .table-r i{font-size:3rem;padding-bottom:1.5rem;padding-left:.5rem;-webkit-background-clip:text}#contact .table .table-l h3,#portfolio .table .table-r h3{font-size:2.5rem;font-weight:400;line-height:1.2;letter-spacing:.025rem}#contact .table .table-l p,#portfolio .table .table-r p{color:var(--text-secondary);font-size:1.25rem;font-weight:300;margin:1.2rem 0}#contact .table .table-l .button-container,#portfolio .table .table-r .button-container{display:flex;justify-content:center;align-items:center;width:12rem;height:4rem}#contact .blur-circle{width:240px;border-radius:1000px;top:45%;left:-5%}#contact .title h2{font-weight:400}#contact .t-container{display:flex;justify-content:center;padding-top:2rem;padding-bottom:2rem}#contact .table .table-l{padding-left:2rem}#contact .table .table-l i{font-size:2.7rem;padding-bottom:1.5rem;padding-left:.5rem;background:-webkit-linear-gradient(0deg,#b18a52,#f1e8a4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}#contact .table .table-r .container{display:flex;justify-content:center;padding:1.5rem 0}#contact .table .table-r .container .card{width:24rem;height:32rem;color:var(--text-secondary);background:#1f1f1f;border:1px solid rgba(255,255,255,.12);border-radius:25px;box-shadow:#181a1b 3px -3px 10px 0 inset;transition:.5s}#contact .table .table-r .container .card a{color:var(--text-secondary);transition:color .3s;text-decoration:none}#contact .table .table-r .container .card>img{position:absolute;top:-1.4px;right:0;left:95px;bottom:0;pointer-events:none}#contact .table .table-r .container .card.one .content i{padding-right:.5rem}#contact .table .table-r .container .card.one .content .block-top{display:flex;align-items:center;justify-content:space-between;padding:2.25rem 1.8rem}#contact .table .table-r .container .card.one .content .block-top img{width:100px;border:2px solid #b18a52;border-radius:100%;filter:grayscale(10%)}#contact .table .table-r .container .card.one .content .block-top .text{text-align:right}#contact .table .table-r .container .card.one .content .block-top .text h3{font-size:1.1rem;font-weight:500;line-height:1.8}#contact .table .table-r .container .card.one .content .block-top .text a,#contact .table .table-r .container .card.one .content .block-top .text p{font-size:1rem;line-height:1.5}#contact .table .table-r .container .card.one .content .block-bottom{text-align:left;padding:0 2rem}#contact .table .table-r .container .card.one .content .block-bottom a{font-size:1rem;font-weight:300;line-height:2}#contact .table .table-r .container .card.one .content .block-bottom p{font-size:1rem;font-weight:300;padding-top:2rem}#contact .table .table-r .container .card.one .content .block-bottom .social-block{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding-top:2rem;grid-row-gap:1.5rem}#contact .table .table-r .container .card.one .content .block-bottom .social-block a{font-size:1.25rem;padding:.75rem;margin:auto;line-height:0}#contact .table .table-r .container .card.two .content{height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:25px}#contact .table .table-r .container .card.two .content img{height:100%;filter:grayscale(25%)}#contact .table .table-r .container .card.front{z-index:2;position:relative;box-shadow:#0c0c0c -6px -6px 20px 0,#181a1b 3px -3px 10px 0 inset}#contact .table .table-r .container .card:not(.front){transform:rotate(-4deg) translateX(-4px) translateY(-8px);transform-origin:bottom left;opacity:.6;z-index:1;position:absolute;will-change:transform}#contact .table .table-r .container .card.active{animation:2s forwards rotateCard}@keyframes rotateCard{0%,100%,20%,50%,80%{transform:rotate(-4deg) translateX(-4px) translateY(-8px)}40%{transform:rotate(-7deg) translateX(-4px) translateY(-8px)}60%{transform:rotate(-5.5deg) translateX(-4px) translateY(-8px)}}#contact .gradient-ruler{width:100%;height:1px;background:linear-gradient(270deg,#ffffff12,#ffffff42 31%,#fae57566 68%,#ffffff12)}#blog,footer .container .wrapper-r .column{width:100%}#blog .title{text-align:center;padding-top:11rem;padding-bottom:9rem;background-image:linear-gradient(transparent 74%,var(--background)),radial-gradient(circle,#282828,var(--background))}#blog .title h1{font-size:6rem;font-weight:500;letter-spacing:.025rem;line-height:1.2}#blog .blog-table{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:2rem;width:100%;max-width:80rem;margin:auto;padding:0 1rem 6rem}#blog .blog-table .container{width:100%;height:100%;padding:.75rem;background-color:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:1rem;text-decoration:none}#blog .blog-table .container .image-container,#blog-data .blog-head .image-container .block{width:100%;padding-top:66.66%;position:relative}#blog .blog-table .container .image-container img,#blog-data .blog-head .image-container .block img{width:100%;height:100%;border:1px solid rgba(255,255,255,.24);border-radius:.75rem;position:absolute;box-shadow:0 3px 12px 2px rgba(0,0,0,.4);inset:0%;object-fit:cover}#blog .blog-table .container .text-info{display:flex;align-items:center;justify-content:space-between;margin:.75rem 0 0}#blog-data .blog-head,footer .container{margin:auto;flex-direction:row;display:flex}#blog .blog-table .container .text-info .date,#blog-data .blog-head .info-container .detail-block .dot{color:rgba(231,237,239,.6);font-size:.875rem}#blog .blog-table .container .text-info .category,#blog-data .blog-head .info-container .detail-block .category{color:var(--gold);background-color:rgba(250,229,117,.24);font-size:.875rem;border-radius:.5rem;padding:.25rem .5rem}#blog .blog-table .container .text-title{color:var(--text-primary);font-size:1.25rem;font-weight:300;padding-top:.5rem}#blog-data{width:100%;padding:7rem 2.5rem}#blog-data .blur-circle{width:240px;height:240px;filter:blur(160px);background-image:linear-gradient(111deg,#b18a52,#f1e8a4);border-radius:1000px;position:absolute;top:4%;left:-1%;z-index:-1}#blog-data .blog-head{width:100%;max-width:64rem;align-items:center;justify-content:center;gap:4rem}#blog-data .blog-head .info-container{width:50%;padding:3rem 0}#blog-data .blog-head .info-container a{transition:color .3s}#blog-data .blog-head .info-container>a{font-size:.875rem;color:rgba(255,255,255,.7);text-decoration:none}#blog-data .blog-head .info-container>a i{padding-right:.5rem;opacity:.6}#blog-data .blog-head .info-container h1{font-size:2.5rem;font-weight:400;line-height:1.2;letter-spacing:.025rem;padding:.5rem 0}#blog-data .blog-head .info-container .detail-block{display:flex;align-items:center;gap:.5rem;padding:.6rem 0}#blog-data .blog-head .info-container .detail-block a,#blog-data .blog-head .info-container .detail-block p{color:var(--text-secondary);font-size:1rem;text-decoration:none}#blog-data .blog-head .info-container>p{font-size:1.25rem;font-weight:300;padding-top:.5rem}#blog-data .blog-head .image-container{width:50%}footer{padding-top:2.5rem;padding-bottom:4rem}footer .container{width:94%;max-width:80rem;column-gap:8vw}footer .container .wrapper-l{width:40%}footer .container .wrapper-l h2{font-size:1.5rem;font-weight:500;letter-spacing:2px;padding-bottom:1.5rem}footer .container .wrapper-l p{font-size:.875rem}footer .container .wrapper-r{width:60%;display:flex;flex-direction:row;column-gap:2rem}footer .container .wrapper-r h3{font-size:1.25rem;font-weight:300;padding-bottom:1rem}footer .container .wrapper-r p{padding:.5rem 0}footer .container .wrapper-r p a{color:rgba(255,255,255,.7);font-size:.875rem;transition:color .3s;text-decoration:none} diff --git a/index.html b/index.html index 4307e41..3c30d78 100644 --- a/index.html +++ b/index.html @@ -41,10 +41,12 @@ E-mail me
    - Home - Portfolio - Contact - Blog +
    + Home + Portfolio + Contact + Blog +
    diff --git a/js/main.js b/js/main.js index 91bc740..c4627f1 100644 --- a/js/main.js +++ b/js/main.js @@ -27,7 +27,7 @@ function mobileMenu() { } // Disable hamburger and nav menu when user click nav menu's link -const navLink = document.querySelectorAll('nav .nav-overlay .nav-link'); +const navLink = document.querySelectorAll('nav .nav-overlay .container .nav-link'); navLink.forEach(n => n.addEventListener('click', closeMenu));