* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: #edf4ff;
background: #020612;
font-family:
Arial,
Helvetica,
sans-serif;
overflow-x: hidden;
}
/* ================= BACKGROUND ================= */
.space {
position: fixed;
inset: 0;
z-index: -2;
background-color: #020612;
background-image:
radial-gradient(
#2575d9 1px,
transparent 1px
),
radial-gradient(
#9c49ff 1px,
transparent 1px
);
background-size:
137px 137px,
193px 193px;
background-position:
20px 35px,
75px 110px;
opacity: .35;
}
.space::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 55% 45%,
rgba(21,84,190,.18),
transparent 36%
),
linear-gradient(
180deg,
transparent,
#020612 90%
);
}
/* ================= NAVBAR ================= */
.navbar {
height: 70px;
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 30px;
padding: 0 5vw;
background:
rgba(2,6,18,.8);
backdrop-filter:
blur(18px);
border-bottom:
1px solid #172746;
}
.logo {
width: 50px;
height: 50px;
position: relative;
display: grid;
place-items: center;
border:
1px solid #477dff;
border-radius: 14px;
background:
linear-gradient(
145deg,
#101b35,
#050a18
);
box-shadow:
0 0 30px
rgba(24,87,255,.3);
}
.logo span {
font-size: 21px;
font-weight: 900;
background:
linear-gradient(
135deg,
#49c7ff,
#8d55ff
);
background-clip: text;
color: transparent;
}
.logo small {
position: absolute;
bottom: -7px;
font-size: 7px;
letter-spacing: 2px;
color: #79a4ff;
background: #050a18;
padding: 2px 5px;
border-radius: 4px;
}
nav {
display: flex;
gap: 25px;
flex: 1;
}
nav a {
color: #a5b1c9;
font-size: 13px;
transition: .25s;
}
nav a:hover {
color: white;
}
.linkedin-button {
padding: 10px 15px;
border:
1px solid #546cff;
border-radius: 10px;
color: #dbe3ff;
background:
rgba(83,108,255,.12);
font-size: 13px;
}
/* ================= HERO ================= */
.hero {
min-height:
calc(100vh - 70px);
max-width: 1400px;
margin: auto;
padding:
60px 5vw 25px;
display: grid;
grid-template-columns:
1fr 1.05fr;
align-items: center;
gap: 20px;
}
.eyebrow {
margin: 0 0 14px;
color: #56bfff;
font-size: 11px;
letter-spacing: 3px;
font-weight: 900;
}
.hero h1 {
font-size:
clamp(45px,5.6vw,78px);
line-height: .98;
margin: 0 0 13px;
}
.hero h1 span {
background:
linear-gradient(
90deg,
#2bc5ff,
#8061ff,
white
);
background-clip: text;
color: transparent;
}
.hero h2 {
margin: 0 0 18px;
color: #7186ff;
font-size:
clamp(23px,3vw,39px);
}
.hero-content > p {
max-width: 620px;
color: #a9b6cb;
line-height: 1.75;
font-size: 17px;
}
.company {
font-size: 14px !important;
}
.company a {
color: #69bdff;
border-bottom:
1px dashed #69bdff;
}
.buttons {
display: flex;
gap: 12px;
margin-top: 27px;
}
.button {
padding:
13px 20px;
border-radius: 11px;
border:
1px solid #30405f;
background:
rgba(255,255,255,.04);
transition: .25s;
}
.button:hover {
transform:
translateY(-3px);
border-color:
#7187ff;
}
.button.primary {
border: 0;
background:
linear-gradient(
100deg,
#0c73ff,
#894cff
);
box-shadow:
0 12px 35px
rgba(70,93,255,.25);
}
/* ================= 3D SCENE ================= */
.hero-scene {
height: 580px;
position: relative;
perspective: 1200px;
transform-style:
preserve-3d;
transition:
transform .15s ease-out;
}
.orbit {
position: absolute;
left: 50%;
top: 53%;
transform:
translate(-50%,-50%)
rotateX(72deg);
border:
1.5px solid #208cff;
border-radius: 50%;
box-shadow:
0 0 26px
rgba(32,140,255,.35);
}
.orbit-one {
width: 510px;
height: 250px;
}
.orbit-two {
width: 390px;
height: 190px;
border-color: #934fff;
}
/* ================= DATABASE ================= */
.sql-server {
position: absolute;
left: 50%;
top: 50%;
width: 205px;
height: 190px;
transform:
translate(-50%,-50%)
translateZ(80px);
transform-style:
preserve-3d;
text-align: center;
}
.database-layer {
position: absolute;
width: 205px;
height: 62px;
border:
2px solid #338fff;
border-radius: 50%;
background:
linear-gradient(
#1e3765,
#071228
);
box-shadow:
0 0 24px
rgba(37,140,255,.4);
}
.layer-one {
top: 0;
}
.layer-two {
top: 52px;
}
.layer-three {
top: 104px;
}
.sql-server span {
position: absolute;
top: 128px;
left: 0;
width: 100%;
font-size: 16px;
font-weight: 900;
color: #62c5ff;
text-shadow:
0 0 14px #168cff;
}
/* ================= FLOATING OBJECTS ================= */
.floating-object {
position: absolute;
padding: 15px;
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(15,28,54,.95),
rgba(5,11,25,.95)
);
border:
1px solid
rgba(82,115,170,.55);
box-shadow:
0 20px 55px
rgba(0,0,0,.6);
transform-style:
preserve-3d;
transition:
.35s;
cursor: pointer;
}
.floating-object:hover {
transform:
translateZ(180px)
scale(1.08)
rotateY(0deg);
border-color:
#6ea5ff;
box-shadow:
0 25px 70px
rgba(38,111,255,.35);
z-index: 20;
}
.object-label {
font-size: 10px;
letter-spacing: 1px;
color: #8ca3c7;
margin-bottom: 10px;
}
/* RDLC */
.rdlc-object {
left: 2%;
top: 25%;
width: 170px;
transform:
translateZ(100px)
rotateY(8deg);
}
.rdlc-object strong {
display: block;
text-align: center;
background: white;
color: #171717;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
}
.barcode {
height: 32px;
background:
repeating-linear-gradient(
90deg,
white 0 2px,
#111 2px 4px,
white 4px 7px
);
margin-bottom: 8px;
}
.rdlc-object small {
font-size: 9px;
color: #90a6c7;
}
/* SQL */
.sql-object {
right: 0;
top: 8%;
width: 220px;
transform:
translateZ(120px)
rotateY(-7deg);
}
.sql-object code {
font-size: 14px;
color: #d994ff;
line-height: 1.7;
}
/* HTML */
.web-object {
right: 5%;
bottom: 18%;
width: 250px;
transform:
translateZ(110px)
rotateY(-5deg);
}
.browser {
height: 105px;
background:
#0c1730;
border-radius: 8px;
padding: 9px;
}
.browser-dots {
color: #6f7e9a;
font-size: 9px;
}
.html-symbol {
text-align: center;
font-size: 42px;
color: #38c7ff;
margin-top: 18px;
}
.kv {
position: absolute;
left: 50%;
top: 72%;
transform:
translate(-50%,-50%)
translateZ(140px);
font-size: 80px;
font-weight: 1000;
letter-spacing: -10px;
background:
linear-gradient(
135deg,
#5acbff,
#8c51ff
);
background-clip: text;
color: transparent;
filter:
drop-shadow(
0 14px 14px #000
);
}
.mouse-message {
position: absolute;
bottom: 5px;
left: 50%;
transform:
translateX(-50%);
color: #647897;
font-size: 10px;
white-space: nowrap;
}
/* ================= SECTIONS ================= */
.section {
max-width: 1250px;
margin: auto;
padding:
100px 5vw 20px;
}
.section-title {
display: flex;
gap: 22px;
margin-bottom: 32px;
}
.section-title > span {
color: #41648f;
font-size: 13px;
font-weight: 900;
}
.section-title h2 {
margin: 0;
font-size: 42px;
}
.section-description {
color: #8290a9;
line-height: 1.7;
margin-bottom: 30px;
}
/* ================= SKILLS ================= */
.skills-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 22px;
}
.skill-card {
min-height: 270px;
padding: 27px;
border-radius: 22px;
background:
linear-gradient(
145deg,
#0d1931,
#050a17
);
border:
1px solid #253858;
transform-style:
preserve-3d;
transition: .3s;
box-shadow:
0 20px 60px
rgba(0,0,0,.3);
}
.skill-card:hover {
transform:
translateY(-10px)
rotateX(3deg)
rotateY(-3deg);
border-color:
#547eff;
}
.skill-icon {
font-size: 40px;
margin-bottom: 22px;
}
.skill-card h3 {
font-size: 22px;
margin-bottom: 15px;
}
.skill-card ul {
list-style: none;
padding: 0;
color: #a6b3c8;
line-height: 2;
}
.skill-card li::before {
content: "▸";
color: #5bc2ff;
margin-right: 8px;
}
/* ================= WORK ================= */
.work-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 22px;
}
.work-card {
position: relative;
min-height: 360px;
padding: 27px;
border-radius: 22px;
background:
linear-gradient(
145deg,
#0d1931,
#050a17
);
border:
1px solid #253858;
overflow: hidden;
transition: .35s;
}
.work-card:hover {
transform:
translateY(-10px)
rotateX(3deg)
rotateY(-3deg);
border-color:
#547eff;
}
.work-card h3 {
font-size: 22px;
}
.tech {
color: #5ebeff;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 15px;
}
.work-card > p {
color: #9daac0;
line-height: 1.7;
}
/* ================= PREVIEWS ================= */
.demo-preview {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
height: 160px;
padding: 14px;
border-radius: 13px;
background: #071126;
border:
1px solid #2a4169;
transform:
translateY(190px);
opacity: .1;
transition: .4s;
}
.work-card:hover .demo-preview {
transform:
translateY(0);
opacity: 1;
}
.preview-title {
color: #6b9ed5;
font-size: 9px;
letter-spacing: 2px;
margin-bottom: 10px;
}
/* MRP */
.tag-preview {
display: flex;
gap: 14px;
align-items: center;
}
.shirt {
width: 70px;
height: 82px;
background: #e9edf5;
clip-path:
polygon(
27% 0,
42% 10%,
58% 10%,
73% 0,
100% 25%,
82% 45%,
75% 33%,
75% 100%,
25% 100%,
25% 33%,
18% 45%,
0 25%
);
}
.tag {
background: white;
color: #111;
width: 110px;
padding: 10px;
font-size: 8px;
}
.tag b {
font-size: 13px;
}
.tag .barcode {
height: 25px;
margin: 6px 0;
}
/* SQL */
.sql-preview {
font-family:
Consolas,
monospace;
font-size: 11px;
color: #a9b9d5;
}
.sql-green {
color: #64e7a1;
}
.table {
margin-top: 8px;
border:
1px solid #2d456c;
}
.table div {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
padding: 4px;
border-bottom:
1px solid #233653;
}
/* WEB */
.web-preview {
height: 115px;
border:
1px solid #38527d;
border-radius: 8px;
background: #101d37;
padding: 9px;
}
.web-header {
height: 13px;
background: #233b65;
border-radius: 4px;
margin-bottom: 10px;
}
.web-hero {
height: 55px;
border-radius: 5px;
background:
linear-gradient(
120deg,
#173f78,
#6a3ec4
);
display: grid;
place-items: center;
font-weight: 900;
}
.code-mini {
margin-top: 8px;
font:
9px Consolas;
color: #68caff;
}
/* ================= EDUCATION ================= */
.education-grid {
display: grid;
gap: 15px;
}
.education {
display: flex;
align-items: center;
gap: 18px;
padding: 24px 28px;
border-radius: 18px;
background: #0a1428cc;
border:
1px solid #263b5d;
}
.education-icon {
font-size: 30px;
}
.education h3 {
margin: 0 0 5px;
}
.education p {
margin: 0;
color: #8491a9;
}
.badge {
margin-left: auto;
padding: 7px 11px;
border-radius: 20px;
font-size: 10px;
font-weight: 900;
color: #61ffad;
background: #0d3826;
}
/* ================= CONTACT ================= */
.contact {
max-width: 1250px;
margin:
100px auto 55px;
padding:
38px 5vw;
border:
1px solid #2d4770;
border-radius: 24px;
background:
linear-gradient(
100deg,
#0d1930,
#080e20
);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.contact h2 {
font-size: 30px;
margin: 0;
}
footer {
text-align: center;
color: #58677f;
padding: 30px;
border-top:
1px solid #142039;
font-size: 12px;
}
/* ================= RESPONSIVE ================= */
@media(max-width:950px) {
.hero {
grid-template-columns: 1fr;
}
.hero-scene {
height: 500px;
}
.skills-grid,
.work-grid {
grid-template-columns:
1fr 1fr;
}
}
@media(max-width:620px) {
nav {
display: none;
}
.linkedin-button {
margin-left: auto;
}
.hero {
padding-top: 45px;
}
.hero-scene {
transform: scale(.68);
transform-origin:
top center;
height: 400px;
}
.skills-grid,
.work-grid {
grid-template-columns: 1fr;
}
.section-title h2 {
font-size: 32px;
}
.contact {
flex-direction: column;
align-items: flex-start;
}
}