*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--primary:#00ff88;
--secondary:#0099ff;
--dark:#0a0a0a;
--darker:#050505;
--text:#fff;
--text-dim:#888;
--accent:#ff0066;
}
body{
font-family:'Courier New',monospace;
background:linear-gradient(135deg,var(--dark)0%,var(--darker)100%);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
}
header{
position:fixed;
top:0;
width:100%;
background:rgba(10,10,10,0.95);
backdrop-filter:blur(10px);
z-index:1000;
border-bottom:1px solid var(--primary);
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 0;
}
.logo{
font-size:1.5rem;
font-weight:bold;
color: var(--primary);
text-shadow:0 0 10px var(--primary);
}
.nav-links{
display:flex;
list-style:none;
gap:2rem;
}
.nav-links a{
color:var(--text);
text-decoration:none;
transition:color 0.3s ease;
position:relative;
}
.nav-links a:hover{color: var(--primary);}
.nav-links a::after{
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:var(--primary);
transition:width 0.3s ease;
}
.nav-links a:hover::after{width: 100%;}
.hero{
height:100vh;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at 20% 80%,var(--primary)0%, transparent 50%),radial-gradient(circle at 80% 20%,var(--secondary)0%, transparent 50%);
opacity:0.1;
animation:pulse 4s ease-in-out infinite alternate;
}
@keyframes pulse{
from{opacity: 0.1;}
to{opacity: 0.3;}
}
.hero-content{
z-index:2;
position:relative;
}
.hero h1{
font-size:clamp(2.5rem,5vw,4rem);
margin-bottom:1rem;
background:linear-gradient(45deg,var(--primary),var(--secondary));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero .subtitle{
font-size:clamp(1.2rem,3vw,2rem);
color:var(--text-dim);
margin-bottom:2rem;
}
.typing-text{
font-size:1.2rem;
min-height:1.2rem;
color:var(--primary);
border-right:2px solid var(--primary);
animation:blink 1s infinite;
}
.typing-text::after{
content:attr(data-placeholder);
visibility:hidden;
display:inline-block;
height:0;
}
@keyframes blink {
0%,50%{border-color: var(--primary);}
51%,100%{ border-color: transparent;}
}
section{
padding:5rem 0;
position:relative;
}
.section-title{
font-size:2.5rem;
text-align:center;
margin-bottom:3rem;
color:var(--primary);
text-shadow:0 0 10px var(--primary);
}
.about-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center;
}
.about-text{
font-size:1.1rem;
line-height:1.8;
}
.stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1rem;
}
.stat{
background:rgba(255,255,255,0.05);
padding:1.5rem;
border-radius:10px;
text-align:center;
border:1px solid var(--primary);
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.stat:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0, 255, 136, 0.3);
}
.stat-number {
font-size:2rem;
font-weight:bold;
color:var(--primary);
}
.projects{background:rgba(255, 255, 255, 0.02);}
.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
gap:2rem;
}
.project-card {
background:rgba(255,255,255,0.05);
border-radius:15px;
padding:2rem;
border:1px solid var(--primary);
transition:transform 0.3s ease,box-shadow 0.3s ease;
position:relative;
overflow:hidden;
}
.project-card::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(0,255,136,0.1),transparent);
transition:left 0.5s ease;
}
.project-card:hover::before{left: 100%;}
.project-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,255,136,0.2);
}
.project-title{
font-size:1.5rem;
color:var(--primary);
margin-bottom:1rem;
}
.project-tech{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
margin:1rem 0;
}
.project-link{color: #fff;}
.tech-tag{
background:var(--primary);
color:var(--dark);
padding:0.3rem 0.8rem;
border-radius:20px;
font-size:0.8rem;
font-weight:bold;
}
.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}
.skill-category{
background:rgba(255,255,255,0.05);
padding:2rem;
border-radius:15px;
border:1px solid var(--secondary);
}
.skill-category h3{
color:var(--secondary);
margin-bottom:1rem;
font-size:1.3rem;
}
.skill-list{list-style: none;}
.skill-list li{
padding:0.5rem 0;
border-bottom:1px solid rgba(255,255,255,0.1);
transition:color 0.3s ease;
}
.skill-list li:hover{color:var(--primary);}
.contact {background:rgba(255,255,255,0.02);}
.contact-content{
text-align:center;
max-width:600px;
margin:0 auto;
}
.contact-links{
display: flex;
justify-content:center;
gap:2rem;
margin-top:2rem;
}
.contact-link{
display:inline-block;
padding:1rem 2rem;
background:linear-gradient(45deg,var(--primary),var(--secondary));
color:var(--dark);
text-decoration:none;
border-radius:10px;
font-weight:bold;
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.contact-link:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(0,255,136,0.4);
}
@media (max-width:768px){
.nav-links{display:none;}
.about-content{grid-template-columns:1fr;}
.stats{grid-template-columns:1fr;}
.projects-grid{grid-template-columns:1fr;}
.contact-links{
flex-direction:column;
align-items:center;
}
}
::-webkit-scrollbar{width: 8px;}
::-webkit-scrollbar-track{background: var(--dark);}
::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{background: var(--secondary);}