Personal Portfolio Website (Frontend & UI)

A custom-built personal portfolio website designed and developed from scratch to showcase my full-stack work and provide a single destination for potential clients. Built with vanilla HTML, Tailwind CSS, and vanilla JavaScript, with no frameworks and no build step for the end user.

When selling freelance development services, the portfolio is the first thing a potential client sees. It needs to load fast, look professional, and communicate capability in seconds.

Off-the-shelf portfolio templates all look the same. They are generic, often cluttered with animations that serve no purpose, and they signal "I used a template" to anyone technical reviewing the work.

A custom portfolio solves two problems at once: it becomes a piece of work in itself, and it demonstrates frontend skill directly through its own existence.

Three principles guided the build:

1. No Frameworks The entire site runs on a single HTML file, a compiled Tailwind CSS stylesheet, and a small block of vanilla JavaScript. No React, no Vue, no runtime dependencies. This keeps the page lightweight, fast, and trivial to deploy anywhere.

2. Visual Consistency The dark slate and cyan color palette, the Inter typeface, and the card styling were chosen to match the visual identity of StockPilot and the rest of the portfolio. A visitor who clicks from the portfolio into the live demo experiences one continuous design language.

3. Motion with Restraint Every animation serves a purpose. Scroll reveals guide the eye down the page, the mobile menu slides smoothly instead of snapping, and the hero fades in on load. Nothing animates just to animate.

The site is a single-page layout with five sections.

The hero leads with the name as the primary brand element, followed by the role and a short description of the work. Each element fades up in a staggered sequence on page load.

A detailed feature card for StockPilot, including the key features, the tech stack, and links to the live demo and source code. The card lifts slightly on hover with a subtle cyan glow.

Four cards summarizing the technologies used across frontend, backend, database, and DevOps work, each with a proficiency badge.

A short section describing the approach to development and current availability for freelance work.

Copyright information and links to the GitHub and Contra profiles.

Tailwind CSS compiled to a static stylesheet with a custom configuration that extends the default palette with the specific slate and cyan shades used across the portfolio. The compiled output is roughly 4.4 KiB, containing only the classes actually used in the markup.

Hero: Staggered fade-up on page load using CSS keyframes.

Scroll reveals: Each section fades and slides up as it enters the viewport, triggered by the Intersection Observer API.

Mobile menu: A grid-template-rows transition from 0fr to 1fr produces a perfectly smooth expand and collapse, without the timing issues that max-height transitions cause.

Hamburger icon: The hamburger and close icons are stacked absolutely and crossfade via opacity toggling.

Card hover: A subtle translateY lift combined with a cyan box-shadow.

The layout collapses gracefully across breakpoints. Navigation collapses into a hamburger menu below the medium breakpoint, the project card stacks vertically, and the tech stack grid shifts from four columns to two.

The first version of the site loaded Tailwind and the Inter font from external CDNs. PageSpeed Insights, run under slow 4G throttling, reported a First Contentful Paint of 2.6 seconds. Two blocking network requests were identified as the cause:

The Tailwind CDN script (~400 KB) was executing at runtime to generate CSS, blocking render.

Google Fonts required an extra DNS lookup and TLS handshake to a third-party domain, blocking render for ~750ms.

Both were eliminated:

Tailwind CDN → compiled CSS. Migrated to a build step that compiles Tailwind locally and ships a 4.4 KiB static stylesheet. The browser no longer downloads a large JavaScript file or executes runtime styling.

Google Fonts CDN → self-hosted Inter. Switched to @fontsource-variable/inter, which bundles the font files inside the project. The browser now fetches the font from the same origin as the site, eliminating the external request entirely.

Deferred JavaScript. The interactivity script was moved into the <head> with a defer attribute, so it downloads in parallel with HTML parsing instead of blocking render.

First Contentful Paint (slow 4G): 2.6s → 1.5s

First Contentful Paint (desktop, normal conditions): 0.2s

Both numbers land inside Google's "good" threshold for FCP (under 1.8s).

Why no React? The site is static. There is no state to manage, no data to fetch, and no user interactions beyond navigation. Adding React would have increased the bundle size and required a runtime for no functional benefit.

Why a compiled stylesheet instead of the Tailwind CDN? The CDN is convenient for prototyping but ships a large runtime script that blocks rendering. Compiling Tailwind locally produces a stylesheet containing only the classes actually used, which is roughly 4.4 KiB and loads instantly.

Why self-host the font? Third-party font CDNs add DNS lookups, TLS handshakes, and an extra round trip on the critical path. Self-hosting removes all of that and gives full control over caching headers.

The portfolio is deployed and publicly accessible. It serves as the primary landing destination for anyone looking at my profile on Contra, and it links directly to the live StockPilot demo.

The page loads in under half a second on normal network conditions and stays under two seconds on emulated slow 4G. It requires no maintenance and no hosting costs.