Portfolio Website

Overview

Background &
Objective

This portfolio is a ground-up custom build with no templates, no component libraries, no CSS frameworks. The goal was to design a site that communicated technical depth and aesthetic sensibility simultaneously, using the design itself as proof of the claim.

The visual identity draws from editorial print design: a cream-and-dark palette, condensed display typography (Barlow Condensed), and a typographic hierarchy that feels considered rather than generated. The hero uses a custom Shrimp typeface for the name, set at large scale to fill the viewport as a single bold statement.

Interactivity is handled entirely with GSAP and Lenis Smooth Scroll with no React, no Vue. Every scroll animation, page transition, and cursor behavior is hand-written. The SPA router on the home/about pages uses history.pushState to give clean URLs without a full page reload, with GSAP dark-overlay transitions bridging between views.

The project stacking section was inspired by many many professional websites from awwwwards.com. The cards pin sequentially via ScrollTrigger and scale/blur out as the next card arrives. The skills section uses a horizontal scroll panel pinned to the viewport and many more. Both required careful ScrollTrigger.refresh() orchestration when switching between SPA views.

Year2025–2026
RoleSolo · Design, Code, Deploy
StackHTML · CSS · JS · GSAP · Lenis
FontsShrimp · Barlow Condensed · Inter
AnimationsGSAP 3.12 · ScrollTrigger
RoutingCustom SPA · history.pushState
StatusLive · Ongoing

0kb

JS Frameworks

Pages Built

SPA routing

Home + About

14+

GSAP Animations

Structure

Pages
built

index.html (Home + About)

SPA with dark overlay transitions, GSAP ScrollTrigger stack cards, horizontal skills panel, marquee, contact form

SPA Router

cert.html (Certificates)

Filter bar, 14-card grid, lightbox with keyboard navigation, scroll reveal animations

Lightbox

project-fruit-robot.html

Full project detail · Architecture diagram · Tech stack · Metrics strip · Result blocks

Project Page

project-carm.html

3-DOF C-Arm Medical Scanning Simulation detail page

Project Page

project-plate-cleaner.html

ABB IRB 120 · Spiral trajectory design · Formula callouts · Animated hero SVG

Project Page

project-ros2-4wd.html

ROS2 4WD Mobile Robot simulation detail page with architecture walkthrough

Project Page

medical-insurance.html

ML studies · MLP / RBF / CNN comparison table · Three-column architecture cards

Project Page

Design System

Key design
decisions

Typography

Shrimp + Barlow Condensed

The hero name uses a custom Shrimp typeface at 290px that is not for decoration but to make identity the loudest element on arrival. Barlow Condensed at 900 weight carries all section headings, letting numeric scale do the visual work. Body copy stays in Barlow Regular to keep reading comfortable without competing.

Color System

Cream ↔ Dark · Red Accent

The palette alternates between cream (#e8e6e0) and near-black (#111111) at the section level, creating natural rhythm without decorative dividers. The single red accent (#8b1a1a) appears only on the scroll progress bar and nav hover underlines — used sparingly so it always reads as signal.

Animation Architecture

GSAP + Lenis No Framework

Lenis provides the smooth scroll RAF loop, which feeds into ScrollTrigger's update cycle. All animations are timeline-based and killed on page swap to avoid scroll position conflicts. The stacking cards use a scrubbed ScrollTrigger per card, scaling and blurring as the next one enters. Performance target: 60fps throughout.

Navigation

Liquid Glass Floating Nav

The navbar starts as a full-width cream bar. After 60px of scroll, GSAP animates it to a floating pill with backdrop blur and a reduced footprint — no CSS transitions involved, so the morph is fully GSAP-controlled and interruptible. The same logic runs independently on every page via a shared pattern.

Routing

SPA Without a Framework

Home and About share one HTML file. Clicking "Learn More" or nav links triggers a GSAP dark overlay fade, swaps the visible div, pushes a URL via history.pushState, then kills and re-initializes all ScrollTrigger instances. This eliminates the loader re-trigger bug that occurs with full page reloads while keeping clean browser history.

Cursor System

Invert on Dark Sections

A custom cursor uses two elements: a 6px dot that follows instantly and a 26px ring that lerps at 13% per frame. On dark sections, both elements invert to cream via a CSS class toggle on mousemove — checked with elementFromPoint() so the inversion tracks the exact element under the pointer, not a scroll threshold.

Process

How it
was built

Design

Referenced dvdrod.com, chkstepan.com, and olhalazarieva.com and many more as aesthetic benchmarks. Established the cream/dark palette, condensed type scale, and stacking card layout before writing a line of code. Each project page follows the same visual grammar: hero, overview grid, metrics strip, architecture, tech stack, results, CTA.

Build

Pure HTML, CSS, and vanilla JS. No build step, no bundler. Each project page is self-contained with its own inline styles and script block so it can be opened directly without a server. Shared patterns — glass nav, page overlay transition, cursor logic — are copied per-file to avoid a dependency on a shared JS module.

Iterate

Major iterations included: consolidating index + about into a single SPA file, fixing the ScrollTrigger re-init bug on page swap, adding cursor inversion logic for dark sections, implementing the horizontal scroll skills panel with correct pin math, and refining the contact section to an editorial grid layout.

Tech Stack

Built with

portfolio.config.js

$const stack = {

core: ['HTML5', 'CSS3', 'Vanilla JS'],// zero frameworks

animation: 'GSAP 3.12' + 'ScrollTrigger',// timelines, scrub, pin

scroll: 'Lenis 1.0.42',// smooth RAF loop

fonts: ['Shrimp', 'Barlow Condensed', 'Inter'],

routing: 'history.pushState',// SPA without React

cursor: 'custom lerp',// dot + ring, inverts on dark

pages: 7,

buildTool: 'none',// raw files, no bundler

}

$// Key techniques

// - Stacking cards: position:sticky + ScrollTrigger scrub scale/blur

// - Glass nav: GSAP morphs borderRadius + padding on scroll threshold

// - Horizontal skills: ScrollTrigger pin + x-translate by scrollWidth

// - Page swap: overlay fade → display swap → ScrollTrigger.refresh()

// - Cursor invert: elementFromPoint() → .closest('.dark-zone')

Performance

No framework overhead. GSAP's RAF loop runs at native 60fps. Lenis eliminates scroll jank by decoupling the scroll position from the browser's native event loop. ScrollTrigger instances are killed on page swap to prevent memory accumulation and ghost triggers.

Responsive Design

Every layout uses CSS Grid with auto-collapsing columns at 900px breakpoints. The hero typeface scales with clamp() from 160px to 290px. The horizontal skills panel, stacking cards, and contact grid all reflow cleanly to single-column mobile layouts.

Accessibility

Respects prefers-reduced-motion by disabling all transitions and animations via a global media query. Custom cursor elements use pointer-events:none so they never interfere with click targets. All interactive elements remain keyboard-navigable.

Extensibility

Each project detail page is fully self-contained with its own styles, script, and markup. Adding a new project means duplicating one template file and filling in content, with no shared state to manage. The certificates page uses data-category attributes for filter logic that runs without any JS library.

PortfolioWebsite

Background &Objective

Pagesbuilt

Key designdecisions

How itwas built

Built with

Portfolio
Website

Background &
Objective

Pages
built

Key design
decisions

How it
was built