AUG 2026 - OCT 2026 • WEB DEVELOPMENT • FRONTEND

Personal Portfolio Website Project

HTML5 CSS3 JavaScript Git GitHub Vercel UI/UX Responsive Design

Project Overview

This personal portfolio website is engineered from scratch to serve as a high-performance, interactive digital CV and developer showcase. It highlights my core competencies as a Computer Science student and aspiring software engineer, featuring a custom terminal-inspired splash screen, dynamic role rotation, dual dark/light cyberpunk color themes, and a modular architecture optimized for seamless cross-platform accessibility.

Key Features Implemented

Responsive Design: Fluid layouts that adapt seamlessly across mobile devices, tablets, and desktop viewports.
Dark Mode Theming: Built-in persistent Dark and Light mode engine utilizing CSS custom variables and automatic localStorage synchronization.
Interactive Elements: Custom glowing cursor trackers, smooth mouse-tracking tilt effects, and real-time script-driven text rotators.
Performance Optimized: Lightweight DOM manipulation, deferred script loading, and rapid Vercel edge deployment assets.
Cinematic Splash Screen: Custom terminal boot loader simulation with dynamic progress bar feedback on initial load.

Project Info

Category Web Development / Portfolio

Role Creator & Frontend Developer

Timeline August 2026 - October 2026

Status Active / Deployed

Technical Architecture

The project is built with a modern, modular technology structure:

1. Frontend Component Structure

Modular, vanilla web stack separating structure, styling, and interactive behavior. Below is the core initialization and theme control structure:

script.js JavaScript

// Theme Synchronization & Toggle Architecture
const savedTheme = localStorage.getItem("portfolio_theme");
if (savedTheme === "light") {
  document.body.classList.add("light-mode");
}
const themeToggleBtn = document.getElementById("themeToggleBtn");
themeToggleBtn?.addEventListener("click", () => {
  document.body.classList.toggle("light-mode");
  const isLight = document.body.classList.contains("light-mode");
  localStorage.setItem("portfolio_theme", isLight ? "light" : "dark");
});

mainUTF-8JavaScriptLn 12, Col 3

2. CSS Custom Properties Design System

Centralized variable tokens for styling tokens, states, and smooth theme transitions:

styles.css CSS

body.light-mode {
  --bg: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --text-soft: #334155;
  --cyan: #0284c7;
}

mainUTF-8CSSLn 7, Col 1

Implementation Challenges

The development process involved several technical hurdles and solutions:

State Persistence Across Refreshes: Handling instant theme application prior to DOM full-load to prevent a flash of unstyled dark content in light mode.
Cross-Browser Layout Shifts: Ensuring complex CSS grid alignments and custom SVG custom animations remained performant and visually consistent on mobile viewports.
Smooth Animation Balancing: Managing multiple concurrent loops (such as the canvas DNA animation, typewriters, and scroll trackers) without affecting frame rates.

Performance Optimizations

To ensure an optimal user experience and fast loading speeds, several strategies were applied:

Hardware-Accelerated Transitions: Utilized CSS transform and opacity layers combined with will-change properties to offload rendering to the GPU.
Asset Minimization & Zero-Framework Bloat: Compressing assets and leveraging vanilla web code for rapid loading.
Edge Caching & Deployment: Hosted via Vercel's global content delivery network for minimal latency and fast global delivery.

Conclusion

The development of this portfolio successfully bridges aesthetic cyberpunk terminal design with rigorous front-end engineering standards. It stands as a functional, highly responsive ecosystem that continuously represents my technical growth, code cleanliness, and readiness for professional software engineering internships.

federicojw.my.id