html,
body{
width:100%;
overflow-x:hidden;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--bg:#050505;
--surface:#0d0d0d;
--surface2:#151515;
--white:#ffffff;
--text:#e7e7e7;
--muted:#8a8a8a;
--border:rgba(255,255,255,.08);
--shadow:12px 12px 0 #fff;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:"Space Grotesk",sans-serif;
overflow-x:hidden;
cursor:none;
line-height:1.6;
padding-top:25px;
}
a{
color:inherit;
text-decoration:none;
}
img{
display:block;
max-width:100%;
}
ul{
list-style:none;
}
::selection{
background:white;
color:black;
}
.container{
width:min(100%,900px);
margin:auto;
padding:0 28px;
}
.grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:60px 60px;
z-index:-5;
}
.blob{
position:fixed;
border-radius:50%;
filter:blur(130px);
opacity:.06;
z-index:-4;
animation:blobFloat 18s ease-in-out infinite;
}
.blob1{
width:380px;
height:380px;
background:white;
top:-140px;
left:-120px;
}
.blob2{
width:280px;
height:280px;
background:#777;
right:-80px;
bottom:-80px;
}
.blob3{
width:220px;
height:220px;
background:#555;
left:60%;
top:40%;
}
@keyframes blobFloat{
0%,100%{
transform:translate(0,0);
}
50%{
transform:translate(40px,-50px);
}
}
/* ==========================================================
CURSOR
========================================================== */
.cursor{
position:fixed;
width:18px;
height:18px;
border:1px solid white;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:9999;
transition:
width .2s,
height .2s,
transform .08s linear;
}
nav{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
width:min(95%,980px);
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 26px;
background:rgba(8,8,8,.75);
backdrop-filter:blur(18px);
border:1px solid var(--border);
z-index:1000;
}
.logo{
font-family:"Syne",sans-serif;
font-size:1.9rem;
font-weight:800;
}
nav ul{
display:flex;
gap:28px;
}
nav a{
color:#8a8a8a;
text-transform:uppercase;
font-size:.8rem;
letter-spacing:2px;
position:relative;
transition:.3s;
}
nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:2px;
background:white;
transform:scaleX(0);
transition:.3s;
}
nav a:hover{
color:white;
}
nav a:hover::after{
transform:scaleX(1);
}
.hero{
min-height:85vh;
display:flex;
align-items:center;
position:relative;
padding:110px 0 70px;
}
.hero .container{
position:relative;
}
.hero-tag{
display:inline-block;
padding:8px 18px;
background:var(--surface);
border:1px solid var(--border);
letter-spacing:3px;
font-size:.75rem;
color:var(--muted);
text-transform:uppercase;
transform:rotate(-2deg);
margin-bottom:35px;
}
.hero-title{
position:relative;
width:fit-content;
}
.hero-title h1{
font-family:"Syne",sans-serif;
font-size:clamp(4.5rem,11vw,8rem);
line-height:.88;
text-transform:uppercase;
letter-spacing:-5px;
font-weight:800;
}
.hero-title h1:first-child{
margin-left:60px;
}
.outline{
color:transparent;
-webkit-text-stroke:2px white;
margin-top:-12px;
}
.hero-description{
max-width:560px;
margin-top:35px;
color:var(--muted);
font-size:1rem;
line-height:1.9;
}
.hero-buttons{
display:flex;
gap:18px;
margin-top:45px;
flex-wrap:wrap;
}
.btn{
padding:16px 32px;
border:1px solid var(--border);
background:var(--surface);
color:white;
text-transform:uppercase;
letter-spacing:2px;
font-size:.82rem;
transition:.35s;
position:relative;
}
.btn:hover{
transform:translate(-8px,-8px);
box-shadow:var(--shadow);
background:white;
color:black;
}
.outline-btn{
background:transparent;
}
.scroll{
margin-top:50px;
color:#666;
letter-spacing:5px;
font-size:.75rem;
}
.bg-word{
position:absolute;
right:-90px;
top:45%;
transform:rotate(-90deg);
font-size:12rem;
font-family:"Syne",sans-serif;
font-weight:800;
opacity:.03;
pointer-events:none;
}
.hero::before{
content:"";
position:absolute;
width:150px;
height:2px;
background:white;
top:160px;
right:40px;
}
.hero::after{
content:"";
position:absolute;
width:2px;
height:110px;
background:white;
right:90px;
bottom:80px;
}
.hero-title::before{
content:"✦";
position:absolute;
left:-40px;
top:10px;
font-size:2rem;
animation:spinStar 10s linear infinite;
}
.hero-title::after{
content:"";
position:absolute;
width:24px;
height:24px;
border:2px solid white;
right:-45px;
bottom:25px;
animation:rotateSquare 8s linear infinite;
}
@keyframes rotateSquare{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@keyframes spinStar{
from{
transform:rotate(0deg);
}
to{
transform:rotate(-360deg);
}
}
.about{
padding:90px 0;
position:relative;
}
.section-tag{
display:inline-block;
padding:8px 18px;
border:1px solid var(--border);
background:var(--surface);
color:var(--muted);
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
transform:rotate(-2deg);
margin-bottom:25px;
}
.about h2{
font-family:"Syne",sans-serif;
font-size:clamp(2.8rem,6vw,5rem);
line-height:.95;
text-transform:uppercase;
max-width:700px;
margin-bottom:45px;
}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}
.about-grid div{
background:var(--surface);
border:1px solid var(--border);
padding:28px;
transition:.35s;
position:relative;
}
.about-grid div:nth-child(1){
transform:translateY(20px);
}
.about-grid div:nth-child(2){
transform:translateY(-20px);
}
.about-grid div::after{
content:"";
position:absolute;
width:14px;
height:14px;
background:white;
top:18px;
right:18px;
}
.about-grid div:hover{
transform:translate(-10px,-10px);
box-shadow:12px 12px white;
}
.about-grid p{
color:var(--muted);
line-height:1.9;
}
.projects{
padding:90px 0;
position:relative;
}
.projects h2{
font-family:"Syne",sans-serif;
font-size:clamp(3rem,6vw,5rem);
text-transform:uppercase;
margin:20px 0 45px;
}
.project{
position:relative;
display:grid;
grid-template-columns:90px 1fr 60px;
align-items:center;
gap:25px;
padding:30px;
margin-bottom:20px;
background:var(--surface);
border:1px solid var(--border);
overflow:hidden;
transition:.35s;
}
.project:nth-child(even){
margin-left:35px;
}
.project:nth-child(odd){
margin-right:35px;
}
.project::before{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:100%;
background:white;
opacity:.05;
transition:.4s;
}
.project:hover::before{
width:100%;
}
.project:hover{
transform:translate(10px,-10px);
box-shadow:-12px 12px white;
}
.project-no{
font-family:"Syne",sans-serif;
font-size:3.5rem;
color:#2d2d2d;
transition:.3s;
}
.project:hover .project-no{
color:white;
transform:scale(1.1);
}
.project-content h3{
font-family:"Syne",sans-serif;
font-size:1.9rem;
margin-bottom:10px;
text-transform:uppercase;
}
.project-content p{
color:var(--muted);
line-height:1.8;
}
.arrow{
font-size:2rem;
transition:.35s;
}
.project:hover .arrow{
transform:translateX(8px) rotate(45deg);
}
.project::after{
content:"";
position:absolute;
width:18px;
height:18px;
border:2px solid white;
top:20px;
right:20px;
transition:.3s;
}
.project:hover::after{
transform:rotate(45deg) scale(1.2);
}
.projects::before{
content:"WORK";
position:absolute;
left:-120px;
top:45%;
transform:rotate(-90deg);
font-family:"Syne",sans-serif;
font-size:11rem;
font-weight:800;
opacity:.02;
pointer-events:none;
}
.skills{
padding:90px 0;
position:relative;
}
.skills h2{
font-family:"Syne",sans-serif;
font-size:clamp(3rem,6vw,5rem);
text-transform:uppercase;
margin:20px 0 45px;
}
.skills-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;
max-width:780px;
margin:auto;
}
.skills-grid span{
padding:16px 26px;
background:var(--surface);
border:1px solid var(--border);
transition:.35s;
font-weight:600;
cursor:default;
}
.skills-grid span:nth-child(4n+1){
transform:rotate(-3deg);
}
.skills-grid span:nth-child(4n+2){
transform:rotate(2deg);
}
.skills-grid span:nth-child(4n+3){
transform:rotate(-2deg);
}
.skills-grid span:nth-child(4n){
transform:rotate(3deg);
}
.skills-grid span:hover{
transform:translateY(-8px) rotate(0);
background:white;
color:black;
box-shadow:10px 10px white;
}
.skills::before{
content:"TOOLS";
position:absolute;
right:-90px;
top:35%;
transform:rotate(90deg);
font-family:"Syne",sans-serif;
font-size:10rem;
font-weight:800;
opacity:.02;
}
.certificates{
padding:90px 0;
position:relative;
}
.certificates h2{
font-family:"Syne",sans-serif;
font-size:clamp(3rem,6vw,5rem);
text-transform:uppercase;
margin:20px 0 45px;
}
.certificate{
display:grid;
grid-template-columns:90px 1fr;
gap:25px;
padding:30px;
margin-bottom:20px;
background:var(--surface);
border:1px solid var(--border);
transition:.35s;
position:relative;
}
.certificate span{
font-size:2rem;
font-family:"Syne",sans-serif;
color:#333;
font-weight:800;
}
.certificate h3{
font-family:"Syne",sans-serif;
margin-bottom:8px;
font-size:1.4rem;
text-transform:uppercase;
}
.certificate p{
color:var(--muted);
line-height:1.8;
}
.certificate::before{
content:"";
position:absolute;
width:14px;
height:14px;
background:white;
left:18px;
top:18px;
}
.certificate:hover{
transform:translate(10px,-10px);
box-shadow:12px 12px white;
}
.certificate:nth-child(even){
margin-left:35px;
}
.certificate:nth-child(odd){
margin-right:35px;
}
.certificates::after{
content:"LEARN";
position:absolute;
left:-110px;
top:45%;
transform:rotate(-90deg);
font-family:"Syne",sans-serif;
font-size:10rem;
font-weight:800;
opacity:.02;
}
.about-grid div,
.project,
.certificate,
.skills-grid span,
.btn{
will-change:transform;
}
.about-grid div:hover,
.project:hover,
.certificate:hover{
border-color:white;
}
.contact{
padding:90px 0 70px;
position:relative;
}
.contact h2{
font-family:"Syne",sans-serif;
font-size:clamp(3rem,8vw,6rem);
line-height:.9;
text-transform:uppercase;
max-width:700px;
}
.contact-text{
max-width:520px;
margin:30px 0;
color:var(--muted);
line-height:1.8;
}
.contact-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.contact::after{
content:"CONNECT";
position:absolute;
right:-120px;
top:40%;
transform:rotate(90deg);
font-family:"Syne",sans-serif;
font-size:10rem;
font-weight:800;
opacity:.02;
pointer-events:none;
}
footer{
border-top:1px solid var(--border);
margin-top:40px;
padding:35px 0;
}
.footer-content{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
color:var(--muted);
}
.footer-links{
display:flex;
gap:20px;
}
.footer-links a{
transition:.3s;
}
.footer-links a:hover{
color:white;
}
.hidden{
opacity:0;
transform:translateY(50px);
transition:all .8s ease;
}
.show{
opacity:1;
transform:translateY(0);
}
@media(max-width:992px){
.container{
width:min(100%,820px);
}
.hero-title h1{
font-size:clamp(4rem,11vw,6.5rem);
}
}
@media(max-width:768px){
body{
cursor:auto;
}
.cursor{
display:none;
}
nav{
width:94%;
padding:16px 20px;
}
nav ul{
display:none;
}
.logo{
font-size:1.5rem;
}
section{
padding:70px 0 !important;
}
.hero{
min-height:70vh;
padding-top:120px;
}
.hero-title h1{
font-size:clamp(3.2rem,14vw,5rem);
letter-spacing:-2px;
}
.hero-title h1:first-child{
margin-left:0;
}
.hero::before,
.hero::after,
.bg-word{
display:none;
}
.hero-buttons{
flex-direction:column;
width:100%;
}
.btn{
width:100%;
text-align:center;
}
.about-grid{
grid-template-columns:1fr;
}
.about-grid div{
transform:none !important;
}
.project{
grid-template-columns:1fr;
gap:18px;
margin:0 0 18px !important;
}
.certificate{
grid-template-columns:1fr;
margin:0 0 18px !important;
}
.skills-grid{
justify-content:flex-start;
}
.skills-grid span{
transform:none !important;
}
.contact{
text-align:left;
}
.contact-buttons{
flex-direction:column;
}
.footer-content{
flex-direction:column;
text-align:center;
}
.projects::before,
.skills::before,
.certificates::after,
.contact::after{
display:none;
}
}
@media(max-width:480px){
.container{
padding:0 18px;
}
nav{
top:12px;
padding:14px 16px;
}
.hero{
min-height:65vh;
}
.hero-tag,
.section-tag{
font-size:.65rem;
padding:6px 12px;
}
.hero-title h1{
font-size:2.9rem;
}
h2{
font-size:2.2rem !important;
}
.project-content h3{
font-size:1.4rem;
}
.skills-grid{
gap:12px;
}
.skills-grid span{
width:calc(50% - 6px);
justify-content:center;
padding:14px 10px;
font-size:.85rem;
}
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}
.hero-title{
animation:float 6s ease-in-out infinite;
}
html{
scroll-padding-top:90px;
}
@media (max-width:768px){
body{
padding-top:35px;
}
}