Designed and developed a fully static personal portfolio website to showcase software engineering projects, technical experience, and professional skills. The website serves as a central hub for presenting project work while emphasizing performance, maintainability, accessibility, and responsive design.

The visual design is heavily inspired by the modern aesthetic and layout principles used across Meta's public-facing websites, adapted into a lightweight, independently developed implementation.

Overview

The portfolio is built using a modern TypeScript-based frontend stack and is compiled into static assets during the build process. The generated website is hosted through GitHub Pages, providing a simple deployment workflow while benefiting from the reliability and scalability of static hosting.

The project was designed with a strong focus on:

• Fast loading times
• Responsive layouts
• Accessibility
• Multilingual content
• Long-term maintainability
• Minimal hosting requirements

Static Site Architecture

Implemented the website using Deno, TypeScript, React, Tailwind CSS, and standard web technologies.

The build process generates fully static HTML, CSS, and JavaScript assets, eliminating the need for server-side infrastructure while maintaining a modern user experience.

Key advantages of this approach include:

• Reduced operational complexity
• Low hosting costs
• Improved security through static deployment
• High performance and caching efficiency

The final build artifacts are deployed through a dedicated GitHub Pages repository.

Responsive Design

Developed a responsive layout that adapts to a wide range of screen sizes and devices.

Features include:

• Desktop and mobile optimized layouts
• Adaptive content presentation
• Flexible component sizing
• Touch-friendly navigation
• Responsive project and content sections

On smaller screens, the primary navigation automatically transitions into a sidebar-style menu to improve usability and maximize available screen space.

Theme Support

Implemented automatic light and dark mode support based on the user's operating system or browser preferences.

The theme system provides:

• Automatic preference detection
• Consistent styling across components
• Improved readability in different environments
• Seamless theme switching without additional user configuration

Internationalization

Built the website with full bilingual content support, allowing visitors to switch between English and German.

All portfolio content is maintained in both languages and can be toggled dynamically without requiring separate website versions.

This approach ensures accessibility for both international and German-speaking audiences while keeping content management centralized.

Content Generation Workflow

Project descriptions are authored in Markdown format to improve readability and maintain a clean content structure.

To streamline documentation efforts:

• Initial English project descriptions were generated with ChatGPT
• Content is stored and rendered as Markdown
• German translations were created using DeepL
• Both language versions are integrated directly into the website

This workflow enables consistent presentation while reducing the effort required to maintain multilingual project documentation.

Technologies

Frontend

• TypeScript
• React
• Tailwind CSS
• HTML

Build & Deployment

• Deno
• Static Site Generation
• GitHub Pages

Content Management

• Markdown
• Internationalization (i18n)

Key Achievements

• Designed and implemented a fully static portfolio website from scratch
• Built a Deno-powered static generation workflow
• Created responsive layouts for desktop and mobile devices
• Implemented automatic light and dark mode support
• Added bilingual English and German content management
• Established a Markdown-based content workflow for project documentation
• Deployed the site through GitHub Pages with zero server-side infrastructure
• Recreated and adapted design concepts inspired by Meta's web presence