← All projects
▸2026/Live/Design, frontend, CI/CD

Personal Portfolio

A retro-space showcase site for my work and writing.

TypeScriptAngularFirebase HostingTailwindCSSGitHub Actions

The portfolio is a small single-page Angular application built from scratch with a hand-crafted retro-space aesthetic — CRT scanlines, a phosphor-green palette, subtle glow effects and a starfield-inspired background.

Rather than using a generic portfolio template, I designed the interface around a distinct visual identity that reflects my interest in both software engineering and UI details. The design system is built around reusable components, consistent spacing, typography and a small set of visual tokens.

The application uses modern Angular features such as standalone components and signals, with TailwindCSS handling the majority of the styling and responsive layout.

The site is deployed to Firebase Hosting and the repository is kept private. GitHub Actions handles the CI/CD workflow, automatically building and deploying the application when changes are merged into the main branch.

Because the portfolio itself is also a demonstration of my development practices, I paid particular attention to accessibility, performance, responsive behavior and keeping the application lightweight.

Links

$ cat challenges.md

Keeping the retro look accessible

Green-on-black looks great but can easily create contrast and readability problems. I defined a small set of design tokens and tested text and interactive elements against WCAG AA contrast requirements while keeping the visual identity intact.

Building a distinctive design from scratch

I wanted the portfolio to feel like a deliberate product rather than another developer portfolio template. This meant creating the visual language, reusable components, typography, spacing and effects myself while keeping the implementation maintainable.

Balancing visual effects and performance

The CRT effects, glow, scanlines and background elements needed to create atmosphere without becoming a performance bottleneck. I kept the effects lightweight and CSS-driven where possible and avoided unnecessary dependencies.

Making the design responsive

The retro interface was designed around a desktop-first visual concept, but it still needed to work naturally on smaller screens. I had to adapt layouts, typography, spacing and interactive elements without losing the original visual character.

Automating deployment

Instead of deploying manually, I set up a GitHub Actions workflow that builds the Angular application and deploys it to Firebase Hosting after changes are merged into the main branch. This keeps the live version tied to the same workflow used for development.

// next up
Fake Instagram

A social media platform clone extended into a full DevOps environment.

Read →