Web · Design Personal Project

Portfolio Website

This site — designed and built from scratch to tell a story, not just list credentials. Custom HTML, CSS, and vanilla JavaScript with scroll animations and individual project pages.

HTML CSS JavaScript Web Design Typography

The Goal

Build a personal site that feels like a person — warm, clear, and story-driven — not a corporate résumé or a generic template.

The Approach

Designed from scratch with no frameworks. Focused on typography, color, and a narrative structure that takes visitors through a three-chapter story ending at StudyWiser.

What's Here

Typewriter animation, scroll-reveal effects, a bento-style project grid, and individual project pages — all in plain HTML, CSS, and JavaScript.

Design decisions

Warm, not corporate. Most developer portfolios use the same cool grays and blues. The cream background and terracotta accent were deliberate choices to make this feel personal and human — matching the story being told.

Serif headings. DM Serif Display was chosen because it communicates warmth and intelligence — a combination that fits someone who came from psychology before data science.

Story over list. The structure isn't "here are my credentials" — it's three chapters that lead to a destination. Visitors should understand who Jaden is, not just what he's done.

No frameworks. Vanilla HTML, CSS, and JavaScript only. Keeping it simple means it's fast, maintainable, and there's no black-box build step to debug.


Technical details

Typewriter effect — Custom JS that cycles through phrases with natural typing and deletion timing.

Scroll reveal — IntersectionObserver API for smooth fade-in animations without a library.

Bento grid — Pure CSS Grid with custom column spans per card, responsive to a single column on mobile.

Project pages — Shared CSS file for consistency across 8 individual project pages.