From c965168ef24eddfe124936a362fafb25794d704a Mon Sep 17 00:00:00 2001 From: Plexi09 Date: Mon, 23 Feb 2026 00:36:21 +0100 Subject: [PATCH] Updated visual look --- css/style.css | 367 +++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 84 ++++++++---- js/main.js | 71 ++++++++-- 3 files changed, 471 insertions(+), 51 deletions(-) diff --git a/css/style.css b/css/style.css index 352bba3..17c1abd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,34 +1,55 @@ /* Custom Styles for Plexi09 Portfolio */ +/* ═══════════════════════════ + CSS CUSTOM PROPERTIES +═══════════════════════════ */ +:root { + --accent-1: #6366f1; + --accent-2: #8b5cf6; + --accent-3: #a78bfa; + --gradient: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3)); + --glass-bg: rgba(255, 255, 255, 0.03); + --glass-border: rgba(255, 255, 255, 0.06); + --radius: 1.25rem; + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1); +} + /* Hide default scrollbar for a cleaner look */ ::-webkit-scrollbar { display: none; } html { scrollbar-width: none; - } /* Lenis Smooth Scroll */ html.lenis { - height: auto; + height: auto; } .lenis.lenis-smooth { - scroll-behavior: auto; + scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { - overscroll-behavior: contain; + overscroll-behavior: contain; } .lenis.lenis-stopped { - overflow: hidden; + overflow: hidden; } .lenis.lenis-scrolling iframe { - pointer-events: none; + pointer-events: none; } /* Typography & Utilities */ .stroke-text { - -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8); + -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6); +} + +.gradient-text { + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } /* Custom Cursor */ @@ -40,13 +61,14 @@ html.lenis { /* Selection color */ ::selection { - background-color: #ffffff; - color: #000000; + background: var(--accent-2); + color: #ffffff; } /* Preloader */ #preloader { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + background: #050505; } /* Hero entrance elements — hidden before preloader reveals them */ @@ -74,10 +96,11 @@ html.lenis { inset: 0; z-index: 500; pointer-events: none; - opacity: 0.045; + opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; + mix-blend-mode: overlay; } /* ═══════════════════════════ @@ -89,10 +112,11 @@ html.lenis { left: 0; height: 2px; width: 0%; - background: linear-gradient(90deg, #3b82f6, #93c5fd); + background: var(--gradient); z-index: 600; pointer-events: none; transition: width 0.05s linear; + box-shadow: 0 0 20px var(--accent-1), 0 0 60px rgba(99, 102, 241, 0.3); } /* ═══════════════════════════ @@ -110,8 +134,8 @@ html.lenis { left: 0; width: 0; height: 1px; - background-color: #ffffff; - transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1); + background: var(--gradient); + transition: width 0.4s var(--ease-smooth); } .nav-link.active { color: #ffffff; @@ -140,7 +164,7 @@ html.lenis { #mobile-overlay .mobile-nav-link { transform: translateX(-20px); opacity: 0; - transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease; + transition: transform 0.6s var(--ease-smooth), opacity 0.6s ease; } #mobile-overlay.open .mobile-nav-link { transform: translateX(0); opacity: 1; } #mobile-overlay.open .mobile-nav-link:nth-child(1) { transition-delay: 0.15s; } @@ -155,12 +179,294 @@ html.lenis { .section-num { font-size: 0.68rem; letter-spacing: 0.3em; - color: #3b82f6; text-transform: uppercase; display: block; margin-bottom: 1.25rem; font-family: 'Inter', sans-serif; font-weight: 500; + background: var(--gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* ═══════════════════════════ + MARQUEE / TICKER +═══════════════════════════ */ +.marquee { + overflow: hidden; + white-space: nowrap; + border-top: 1px solid var(--glass-border); + border-bottom: 1px solid var(--glass-border); +} +.marquee-inner { + display: inline-flex; + animation: marquee-scroll 30s linear infinite; +} +.marquee:hover .marquee-inner { + animation-play-state: paused; +} +.marquee-item { + display: inline-flex; + align-items: center; + gap: 2rem; + padding: 0 2rem; + font-family: 'Clash Display', sans-serif; + font-size: clamp(1.5rem, 3vw, 3rem); + font-weight: 600; + text-transform: uppercase; + letter-spacing: -0.02em; + color: rgba(255, 255, 255, 0.08); + transition: color 0.4s ease; +} +.marquee-item .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--gradient); + flex-shrink: 0; + opacity: 0.5; +} +@keyframes marquee-scroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } +} + +/* ═══════════════════════════ + GLASSMORPHISM CARDS +═══════════════════════════ */ +.glass-card { + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + transition: all 0.5s var(--ease-out-expo); +} +.glass-card:hover { + border-color: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.05); + transform: translateY(-4px); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.06); +} + +/* ═══════════════════════════ + PROJECT CARDS — GRADIENT BORDER +═══════════════════════════ */ +.project-card { + position: relative; + background: #0a0a0a; + border: 1px solid transparent; + transition: all 0.6s var(--ease-out-expo); +} +.project-card::before { + content: ''; + position: absolute; + inset: -1px; + border-radius: inherit; + padding: 1px; + background: linear-gradient(135deg, transparent, transparent); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.6s ease, background 0.6s ease; + pointer-events: none; +} +.project-card:hover::before { + background: var(--gradient); + opacity: 1; +} +.project-card:hover { + transform: translateY(-6px); + box-shadow: 0 25px 80px rgba(99, 102, 241, 0.08); +} + +/* ═══════════════════════════ + TECH BADGE STYLING +═══════════════════════════ */ +.tech-badge { + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.02); + transition: all 0.4s ease; +} +.tech-badge:hover { + border-color: var(--accent-2); + background: rgba(139, 92, 246, 0.08); + transform: translateY(-2px); +} + +/* ═══════════════════════════ + MAGNETIC BUTTONS +═══════════════════════════ */ +.magnetic-btn { + position: relative; + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 2rem; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 999px; + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.2em; + color: rgba(255, 255, 255, 0.7); + background: transparent; + overflow: hidden; + transition: all 0.5s var(--ease-out-expo); +} +.magnetic-btn::before { + content: ''; + position: absolute; + inset: 0; + background: var(--gradient); + opacity: 0; + transition: opacity 0.5s ease; + border-radius: inherit; +} +.magnetic-btn:hover { + border-color: transparent; + color: #fff; + transform: scale(1.05); +} +.magnetic-btn:hover::before { + opacity: 1; +} +.magnetic-btn span, +.magnetic-btn i { + position: relative; + z-index: 1; +} + +/* ═══════════════════════════ + FLOATING SHAPES (BG DECORATION) +═══════════════════════════ */ +.floating-shape { + position: absolute; + border-radius: 50%; + filter: blur(100px); + pointer-events: none; + opacity: 0.15; +} +.floating-shape-1 { + width: 400px; + height: 400px; + background: var(--accent-1); + top: -100px; + right: -100px; + animation: float-1 15s ease-in-out infinite; +} +.floating-shape-2 { + width: 300px; + height: 300px; + background: var(--accent-2); + bottom: -50px; + left: -80px; + animation: float-2 18s ease-in-out infinite; +} +.floating-shape-3 { + width: 250px; + height: 250px; + background: var(--accent-3); + top: 50%; + left: 50%; + animation: float-3 20s ease-in-out infinite; +} +@keyframes float-1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(-30px, 40px) scale(1.1); } + 66% { transform: translate(20px, -20px) scale(0.9); } +} +@keyframes float-2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(40px, -30px) scale(1.15); } + 66% { transform: translate(-25px, 25px) scale(0.95); } +} +@keyframes float-3 { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-50%, -50%) scale(1.2); } +} + +/* ═══════════════════════════ + SKILLS GRID +═══════════════════════════ */ +.skill-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding: 1.5rem 1rem; + border: 1px solid var(--glass-border); + border-radius: var(--radius); + background: var(--glass-bg); + transition: all 0.5s var(--ease-out-expo); +} +.skill-item:hover { + border-color: rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.04); + transform: translateY(-6px); +} +.skill-item i { + font-size: 2rem; + transition: transform 0.5s var(--ease-out-expo); +} +.skill-item:hover i { + transform: scale(1.2); +} +.skill-item span { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.15em; + color: rgba(255, 255, 255, 0.5); +} + +/* ═══════════════════════════ + SECTION DIVIDER +═══════════════════════════ */ +.section-divider { + height: 1px; + background: linear-gradient(90deg, transparent, var(--glass-border), transparent); + border: none; +} + +/* ═══════════════════════════ + CONTACT SECTION GLOW +═══════════════════════════ */ +.contact-glow { + position: absolute; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + animation: pulse-glow 6s ease-in-out infinite; +} +@keyframes pulse-glow { + 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } + 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } +} + +/* ═══════════════════════════ + SOCIAL LINKS +═══════════════════════════ */ +.social-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 50%; + transition: all 0.4s var(--ease-out-expo); +} +.social-link:hover { + border-color: var(--accent-2); + background: rgba(139, 92, 246, 0.1); + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15); } /* ═══════════════════════════ @@ -175,4 +481,35 @@ html.lenis { } .cv-lang-btn:hover { background: rgba(255, 255, 255, 0.03); + border-color: var(--accent-2) !important; +} + +/* ═══════════════════════════ + GALLERY ENHANCEMENTS +═══════════════════════════ */ +.gallery-item { + transition: transform 0.6s var(--ease-out-expo); +} +.gallery-item:hover { + transform: scale(1.02); +} + +/* ═══════════════════════════ + CV GROUP CARD GLOW +═══════════════════════════ */ +.cv-column .group { + border: 1px solid transparent; + transition: all 0.5s var(--ease-out-expo); +} +.cv-column .group:hover { + background: rgba(255, 255, 255, 0.02); + border-color: var(--glass-border); +} + +/* ═══════════════════════════ + FOOTER ACCENT LINE +═══════════════════════════ */ +footer { + border-image: var(--gradient) 1; + border-top-width: 1px; } diff --git a/index.html b/index.html index 3bb5f3b..2534b4c 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,8 @@ colors: { primary: '#ffffff', dark: '#0a0a0a', - accent: '#3b82f6' + accent: '#6366f1', + 'accent-2': '#8b5cf6' }, fontFamily: { sans: ['Inter', 'sans-serif'], @@ -83,11 +84,28 @@ Crafting digital experiences & capturing light.

-
- Scroll to explore +
+ Scroll to explore +
+ +
+
+ Developer + Photographer + Open Source + Self-Hosted + Creative + Developer + Photographer + Open Source + Self-Hosted + Creative +
+
+
01 — About @@ -102,17 +120,17 @@
01 / About -

The Mind
Behind Plexi09

+

The Mind
Behind Plexi09

Hey 🖐️!
I am self-taught developer and passionate photographer. I believe in the power of open-source, self-hosting, and writing code that feels like poetry.

When I'm not architecting systems or deploying containers, I'm out in the world, freezing moments in time through my lens.

-
+

Software stack

-

TS, React, Tailwin, Python, Java, Docker

+

TS, React, Tailwind, Python, Java, Docker

Photography gear

@@ -128,9 +146,9 @@
02 / Experience -

Experience
& Journey

- - Download CV +

Experience
& Journey

+ + Download CV
@@ -200,20 +218,21 @@ 03 / Creations

Creations

- +
- -
- + +
+
-

Movie Match

-

An application that helps couples and friends discover compatible movies to watch together.

+ Featured Project +

Movie Match

+

An application that helps couples and friends discover compatible movies to watch together.

- Typescript - Docker + Typescript + Docker
@@ -269,22 +288,31 @@
+ +
+
+
+
05 / Contact -

- Let's Talk +

+ Let's Talk

-
- - - +

Have a project in mind or just want to say hello? I'd love to hear from you.

+
+ + +
+ + hello@plexi09.me +

© 2026 Plexi09. All rights reserved.

-
+
PLEXI09
@@ -310,10 +338,10 @@
-