Portfolio Website

Independent Project

Responsive Angular portfolio website with bilingual content (EN/ID), standalone components, custom directives, dark/light theme support, multiple colour themes, project showcase, and EmailJS contact form.

Angular TypeScript SCSS Tailwind CSS i18n Responsive UI Unit Testing

Live Demo

GitHub

Overview

Personal portfolio website built with Angular 20, SCSS, and Tailwind CSS v4. Features bilingual EN/ID content, multiple colour themes, dark/light mode, a custom cursor directive, an EmailJS contact form, and Karma/Jasmine unit tests.

Portfolio website showing the introduction section with hero content, quick facts, and call-to-action buttons — Portfolio website — Angular 20, live on GitHub Pages

Context

Independent project. Year: 2025 (active). Role: Developer.

Responsibilities

Designed and implemented standalone Angular components for each portfolio section.
Built a custom i18n system using typed TypeScript translation objects with dot-path lookup and EN fallback.
Implemented a ThemeService managing dark/light mode and multiple colour themes via CSS custom properties and localStorage.
Wrote a CustomCursorDirective handling mouse movement for a custom cursor experience.
Integrated EmailJS for serverless contact form submission without a backend.
Set up Karma/Jasmine unit tests covering services, components, directives, and routes.
Deployed via angular-cli-ghpages to GitHub Pages with a custom CNAME.

Architecture

Single-Page Application with the Angular router (in-memory scroll + fragment anchors). Each section is a standalone component, translation is resolved at runtime via LanguageService, and themes are applied via document.documentElement CSS variable overrides.

Angular SSG architecture: components, services, static prerender, GitHub Pages deployment

Technology Stack

Angular 20 · TypeScript · SCSS · Tailwind CSS v4 · EmailJS · i18n (custom) · Karma / Jasmine · GitHub Pages