:root {
--accent: #0B0635;
--accent-dark: #05031f;
--bg: #1C1C1C;
--bg-2: #222222;
--bg-3: #2a2a2a;
--text: #f1f1f1;
--muted: #a9a9a9;
}
html, body {
cursor: none;
height: 100%;
margin: 0;
overflow: hidden;
}
html.native-scroll,
body.native-scroll {
overflow-y: auto;
height: auto;
min-height: 100%;
cursor: auto;
}
body {
background: var(--bg);
color: var(--text);
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(3px 3px at 12% 18%, rgba(255,255,255,0.8), transparent 55%),
radial-gradient(3px 3px at 28% 42%, rgba(255,255,255,0.7), transparent 55%),
radial-gradient(3px 3px at 46% 16%, rgba(255,255,255,0.75), transparent 55%),
radial-gradient(3px 3px at 68% 28%, rgba(255,255,255,0.7), transparent 55%),
radial-gradient(3px 3px at 82% 12%, rgba(255,255,255,0.85), transparent 55%),
radial-gradient(3px 3px at 74% 58%, rgba(255,255,255,0.72), transparent 55%),
radial-gradient(3px 3px at 18% 72%, rgba(255,255,255,0.8), transparent 55%),
radial-gradient(3px 3px at 42% 86%, rgba(255,255,255,0.7), transparent 55%),
radial-gradient(3px 3px at 60% 74%, rgba(255,255,255,0.8), transparent 55%),
radial-gradient(3px 3px at 90% 82%, rgba(255,255,255,0.85), transparent 55%),
radial-gradient(3px 3px at 10% 52%, rgba(255,255,255,0.75), transparent 55%),
radial-gradient(3px 3px at 32% 8%, rgba(255,255,255,0.7), transparent 55%),
radial-gradient(3px 3px at 58% 50%, rgba(255,255,255,0.75), transparent 55%),
radial-gradient(3px 3px at 76% 72%, rgba(255,255,255,0.7), transparent 55%),
radial-gradient(3px 3px at 22% 92%, rgba(255,255,255,0.8), transparent 55%);
opacity: 0.95;
mix-blend-mode: screen;
animation: starDrift 20s linear infinite;
z-index: 6;
}
@keyframes starDrift {
0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
50% { background-position: 100px 150px, -140px 130px, 160px -120px, -120px -140px, 130px -150px, -130px 210px, 150px -130px, -125px 415px, 410px 130px, -120px -125px, 135px -135px, -145px 115px, 215px 515px, -135px -115px, 115px 215px; }
100% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}
a,
a:focus,
a:hover {
color: var(--accent);
}
header {
background: linear-gradient(160deg, rgba(11, 6, 53, 0.6), rgba(28, 28, 28, 0.95));
background-size: 200% 200%;
animation: gradientShift 14s ease infinite;
padding: 10px 0 140px;
min-height: 100vh;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.avatar-initial, .avatar-inital {
width: 120px;
height: 120px;
margin: 0 auto 18px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 67px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, rgba(11, 6, 53, 0.8), rgba(28, 28, 28, 0.7));
transition: filter 0.1s ease, transform 0.55s ease;
}
.avatar-initial.blur, .avatar-inital.blur {
transform: scale(1.1);
}
header .name {
font-size: 42px;
letter-spacing: 1px;
}
header .skills {
font-size: 18px;
}
.hero-cta .btn-outline {
border-color: #fff;
color: #fff;
}
.hero-cta .btn-outline:hover,
.hero-cta .btn-outline:focus {
background: #fff;
color: var(--bg);
}
.hero-links .btn-social.btn-outline {
border-color: rgba(255, 255, 255, 0.8);
color: #fff;
}
.hero-links .btn-social.btn-outline:hover {
background: #fff;
color: var(--bg);
}
header .container {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
header .intro-text {
text-align: center;
margin-top: 0;
}
section {
padding: 80px 0;
min-height: 100vh;
display: flex;
align-items: center;
}
.work-section {
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
}
.work-section .container {
padding-top: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.work-section .work-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 20px;
margin-bottom: 0;
align-items: stretch;
justify-content: center;
}
.work-section .work-grid > div {
flex: 0 1 360px;
max-width: 420px;
width: 100%;
}
.work-card-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.work-card-link:hover,
.work-card-link:focus,
.work-card-link:active,
.work-card-link:visited {
color: inherit;
text-decoration: none;
outline: none;
}
.logo-link,
.logo-link:hover,
.logo-link:focus,
.logo-link:active,
.logo-link:visited {
color: inherit;
text-decoration: none;
outline: none;
}
.section-lede {
max-width: 720px;
margin: 0 auto 30px auto;
color: var(--muted);
}
.work-card {
background: var(--bg-2);
border: 2px solid var(--bg-3);
border-radius: 10px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
text-align: center;
display: flex;
flex-direction: column;
height: 460px;
width: 360px;
}
.work-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 10px rgba(68, 68, 68, 0.5);
}
.work-top {
flex: 1 0 55%;
min-height: 210px;
width: 100%;
background-color: var(--bg-3);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.work-1 { background-image: url('../img/portfolio/ChibiOS-Multithreading.jpg'); }
.work-2 { background-image: url('../img/portfolio/crypt.jpg'); }
.work-3 { background-image: url('../img/portfolio/html.jpg'); }
.work-4 { background-image: url('../img/portfolio/fl.jpg'); }
.work-5 { background-image: url('../img/portfolio/nohesi.jpg'); }
.work-6 { background-image: url('../img/portfolio/batman.jpg'); }
.work-card .content {
padding: 18px 18px 22px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.work-card h4 {
margin-top: 0;
margin-bottom: 8px;
}
.pill {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #eaeaea;
font-size: 12px;
margin-right: 6px;
margin-bottom: 6px;
}
#about {
background: var(--bg-2);
color: #f1f1f1;
position: relative;
overflow: hidden;
}
#about p {
color: var(--muted);
}
#about .container {
position: relative;
z-index: 2;
}
#about .about-rails {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.55;
}
#about .rail-horizontal {
position: absolute;
left: -10%;
width: 120%;
display: flex;
gap: 30px;
text-transform: uppercase;
letter-spacing: 0.52em;
font-weight: 700;
color: var(--text);
opacity: 0.55;
font-size: 14px;
white-space: nowrap;
text-shadow: 0 0 14px rgba(0,0,0,0.55);
pointer-events: auto;
}
#about .rail-horizontal span {
display: inline-block;
transition: color 0.25s ease;
}
#about .rail-bottom {
bottom: 14px;
animation: railRight 25s linear infinite;
pointer-events: auto;
}
#about .rail-horizontal span:hover {
color: #ff8c42;
}
@keyframes railRight {
0% { transform: translateX(-52%); }
100% { transform: translateX(110%); }
}

.fade-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s ease, transform 1.9s ease;
will-change: opacity, transform;
}
.fade-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.slide-panel {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease;
z-index: 2;
}
.slide-panel.active {
opacity: 1;
pointer-events: auto;
z-index: 3;
}
.slide-panel:not(.active) {
z-index: 1;
}
.scroll-top {
display: none !important;
}
.skills-list span {
display: inline-block;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
margin: 6px;
font-size: 13px;
}
.about-cta .btn {
margin: 8px 10px;
}
#contact .panel {
border-radius: 10px;
border: 1px solid var(--bg-3);
background: var(--bg-2);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
footer {
background: linear-gradient(160deg, rgba(11, 6, 53, 0.6), rgba(28, 28, 28, 0.95));
background-size: 200% 200%;
animation: gradientShift 14s ease infinite;
color: #d4dcec;
}
footer.slide-panel {
min-height: 100vh;
display: flex;
align-items: center;
}
footer a {
color: #d4dcec;
}
.btn {
border-width: 2px;
}
.btn-success {
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
background-size: 100% 100%;
border-color: #ffffff;
color: #ffffff;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-success:hover,
.btn-success:focus {
background: linear-gradient(90deg, var(--accent-dark), var(--accent));
border-color: #ffffff;
color: #ffffff;
transform: translateY(-1px);
}
/* Ensure outline buttons stay legible */
.btn.btn-outline {
color: #ffffff !important;
border-color: #aaaaaa;
background: transparent;
position: relative;
overflow: hidden;
}
.btn.btn-outline:hover,
.btn.btn-outline:focus {
color: #ffffff !important;
border-color: rgb(25, 38, 56);
background: rgb(25, 38, 56);
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Custom cursor inspired by reference */
#cursor.Cursor {
pointer-events: none;
position: fixed;
display: block;
transform-origin: center center;
mix-blend-mode: difference;
top: 0;
left: 0;
z-index: 1000;
filter: url("#goo");
}
#cursor.Cursor span {
position: absolute;
display: block;
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #ff8c42;
transform-origin: center center;
transform: translate(-50%, -50%);
}
.leisure-active #cursor.Cursor span {
animation: cursorHue 6s linear infinite;
}
@keyframes cursorHue {
0% { background-color: #ff8c42; }
25% { background-color: #ff62d1; }
50% { background-color: #5bd3ff; }
75% { background-color: #a7ff6b; }
100% { background-color: #ff8c42; }
}
@media (max-width: 768px) {
html, body {
cursor: auto;
overflow-y: auto;
height: auto;
}
#cursor.Cursor {
display: none;
}
.slide-panel {
position: static;
opacity: 1;
pointer-events: auto;
transition: none;
}
.slide-panel:not(.active) {
z-index: 2;
}
header,
section,
footer {
scroll-margin-top: 80px;
}
}
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
gap: 18px;
background: linear-gradient(180deg, rgba(10, 10, 18, 0.9), rgba(10, 10, 18, 0.3));
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
}
.top-nav a {
color: #f3f4f6;
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 12px;
text-decoration: none;
padding: 6px 10px;
border-radius: 999px;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.top-nav a:hover,
.top-nav a:focus {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transform: translateY(-1px);
}
.top-nav a.is-active {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
@media (max-width: 768px) {
.top-nav {
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
}
.top-nav a {
letter-spacing: 0.12em;
font-size: 11px;
}
}
.native-scroll .slide-panel {
position: static;
opacity: 1;
pointer-events: auto;
transition: none;
width: auto;
}
.native-scroll .slide-panel:not(.active) {
z-index: 2;
}
.native-scroll header,
.native-scroll section,
.native-scroll footer {
scroll-margin-top: 80px;
}
/* Hover button overlay */
.hover-btn {
position: relative;
overflow: hidden;
z-index: 1;
}
.hover-btn .bg {
display: none; /* simplify gradient overlay */
}
.hover-btn > *:not(.bg) {
position: relative;
z-index: 1;
}
.audio-rail {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
display: flex;
justify-content: flex-start;
z-index: 3;
pointer-events: none;
}
.audio-rail .audio-cta {
display: inline-flex;
align-items: center;
gap: 10px;
pointer-events: auto;
margin-left: 18px;
}
.audio-rail .audio-cta .btn {
border-radius: 999px;
background: rgba(0, 0, 0, 0.18);
border-color: rgba(255, 255, 255, 0.35);
color: #f7fbff;
padding: 15px 15px;
font-size: 18px;
}
.audio-rail .audio-cta .btn i {
margin-right: 10px;
}
.audio-rail .audio-cta .btn:hover,
.audio-rail .audio-cta .btn:focus {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
header {
animation: none;
background-size: cover;
}
.work-top {
animation: none;
}
.btn,
.hover-btn,
.work-card {
transition: none;
}
#cursor.Cursor {
display: none !important;
}
html, body {
cursor: auto;
}
.about-marquee .marquee-track {
animation: none;
}
}