Personal developer portfolio engineered with Astro, React, and TypeScript. Focused on high-performance web architecture, zero-FOUC rendering, and modern UI/UX standards.
This repository contains the source code for the personal portfolio of Hugo Adama, Frontend & Full-Stack Developer based in Lima, Peru. The project is designed with an islands architecture: static HTML generation for content-heavy sections and lightweight client-side React islands for interactive features.
- Astro Islands Architecture: Static-first approach delivering zero unnecessary JavaScript to the client for informational sections (Hero, About, Tech Stack, Footer).
- Interactive React Island: A reactive project filtering and pagination system (6 projects per page) with solution-oriented categorization (
Web Apps & Tools,Landing Pages & B2B,Interactive Experiences) and smooth section alignment. - Liquid Glassmorphism Design System: Advanced optical glass styling featuring directional light refraction gradients (
--glass-surface), top specular bevels (--glass-bevel), and multi-elevation atmospheric shadows (--glass-shadow). - Dynamic Aurora Borealis Background: Real-time GPU/Canvas aurora curtain engine with cached trigonometric coordinates (50% reduction in calculations per frame), DPR clamping (1.75 max), and silky ambient lighting orbs.
- Fluid Spring Physics & 60-120fps Animations: Staggered entrance cascades (
@keyframes cardEntrancewith--staggerdelays), GPU compositor-accelerated liquid glass sheen crossfades, framerate-independent exponential pointer smoothing in the Aurora canvas, and native-feeling spring easing curves (cubic-bezier(0.16, 1, 0.3, 1)). - Dark and Light Mode: System-aware theme switcher with
localStoragepersistence and anti-FOUC script in the document head, fully tested for WCAG AAA contrast compliance. - Bilingual Internationalization (ES / EN): Instant in-place language toggle between Spanish and English without full page reloads.
- Custom Vector Iconography: Accessible, lightweight inline SVG icons styled consistently with the application design tokens.
- Accessible Interactions: Built with keyboard focus states, semantic HTML5 landmarks, zero horizontal overflow, and strict accessibility.
- Responsive Layout: Tailored grid layouts for mobile, tablet, and desktop screens.
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Astro 7 | Static site generation and islands orchestration |
| UI Library | React 19 | Interactive client components |
| Language | TypeScript | Type safety for project definitions and state logic |
| Styling | Vanilla CSS (Modular) | Custom design system tokens, CSS variables, liquid glass, and layout modules |
| Fonts | Inter & JetBrains Mono | Primary typography and monospace code presentation |
| Icons | Custom Inline SVGs | Scalable and theme-aware vector icons |
- Git Command Web: Interactive, visual mental-model guide to Git featuring a 4-stage change lifecycle pipeline, live terminal simulator, 3-way merge conflict resolver, Git Bisect simulator, and interactive rebase playground. Built with Astro and TypeScript.
- Once Upon a Timeline: Interactive digital archive and fan experience celebrating TWICE. Features an interactive discography timeline, audio player, 3D photocard customizer with Canvas export, virtual Candybong lightstick simulator, and multi-language support (ES/EN/KO/JA).
- CSS Motion Lab: Interactive laboratory and curated catalog of 180 production-ready pure CSS animations & UI patterns with coordinated HTML and CSS.
- Wedding Invitation: Celestial-themed interactive wedding invitation web app built with Astro 7, TypeScript, and modern CSS, featuring real-time countdown, Web Audio ambient synthesis, 2D canvas particle effects, and RSVP integration.
- Wedding Web: Editorial digital wedding invitation built with Astro 7, TypeScript, and modern CSS, featuring a zero-backend WhatsApp RSVP funnel, real-time Web Audio API ambient synth, and interactive live theme switcher.
- Nova Smile Lima: Boutique dental clinic landing page demo built with Astro 7, TypeScript, and modern CSS. Fast, accessible, and fully responsive.
- Lavanda: Modern, ultra-fast landing page for an eco-friendly on-demand laundry and dry-cleaning delivery service, built with Astro, TypeScript, and zero-JS modern CSS.
- Spartan Gym: High-conversion fitness landing page built with Astro and TypeScript, featuring a zero-friction WhatsApp lead conversion funnel and extreme Core Web Vitals optimization.
- BeatNest: In-browser private audio player with 5-band equalizer, real-time Canvas visualizer, and zero-cloud dependency.
- Nimbus: High-precision real-time weather web application built with clean architecture (SoC) and interactive 24-hour SVG temperature chart.
- MiDespensa: Smart recipe manager and offline-first Progressive Web App (PWA) with IndexedDB persistence.
- Kanban Tableau: Accessible Kanban board (WCAG 2.1 AA) with full keyboard navigation, native Drag and Drop, and Undo/Redo history.
portfolio/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions CI/CD for automated GitHub Pages deployment
├── public/
│ ├── capturas/ # High-resolution screenshots of featured projects
│ ├── cv-hugo-adama.pdf # Default resume (Spanish)
│ ├── cv-hugo-adama-es.pdf # Spanish resume (ATS-friendly)
│ ├── cv-hugo-adama-en.pdf # English resume (ATS-friendly)
│ └── favicon.svg # Vector favicon
├── src/
│ ├── components/
│ │ ├── About.astro # Biography, core pillars, and categorized tech stack
│ │ ├── AuroraWaves.astro # Optimized real-time canvas Aurora Borealis background
│ │ ├── CodeWindow.astro # Interactive code snippet card with typing animation
│ │ ├── Footer.astro # Contact call-to-action, copy email button, and navigation
│ │ ├── Header.astro # Sticky navigation bar with theme and language toggles
│ │ ├── Hero.astro # Introduction, availability status, and primary CTAs
│ │ └── ProjectsFilter.tsx # React client island for category filtering & pagination
│ ├── data/
│ │ └── projects.ts # Typed project datasets with bilingual descriptions & categories
│ ├── layouts/
│ │ └── Layout.astro # HTML document skeleton, SEO metadata, and anti-FOUC script
│ ├── styles/
│ │ ├── tokens.css # Design tokens, liquid glass gradients, and color palettes
│ │ ├── base.css # Resets, body styles, typography, and motion rules
│ │ ├── layout.css # Page containers (.wrap), section titles (h2), and rhythm
│ │ ├── header.css # Navigation bar and header control buttons
│ │ ├── filters.css # Category filter pills with dynamic count badges
│ │ ├── cards.css # Project grid 2x2 layout, liquid glass cards, and pagination
│ │ └── global.css # Master bundle importing all CSS modules
│ ├── utils/
│ │ └── paths.ts # Base path resolver for assets and internal links
│ └── pages/
│ └── index.astro # Root page composing layout and components
├── astro.config.mjs
├── package.json
└── tsconfig.json
- Node.js version 22.12.0 or higher
- npm, pnpm, or yarn
-
Clone the repository:
git clone https://github.com/HugoAdama/MyPortfolio.git cd MyPortfolio -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
The application will be accessible at
http://localhost:4321/MyPortfolio.
| Command | Action |
|---|---|
npm run dev |
Runs the development server at http://localhost:4321/MyPortfolio |
npm run build |
Compiles static production build into ./dist/ |
npm run preview |
Previews the production build locally |
The project is configured for continuous deployment using GitHub Actions. Every push to the main branch triggers .github/workflows/deploy.yml, which compiles the static site and deploys it to GitHub Pages.
Live URL: https://hugoadama.github.io/MyPortfolio/
Hugo Adama
Frontend & Full-Stack Developer
Lima, Peru
- GitHub: https://github.com/HugoAdama
- LinkedIn: https://www.linkedin.com/in/hugoadama
- Email: hugoadama@outlook.com
This project is open-source and available under the MIT License.