Personal portfolio of Marco Lee, Senior Full-Stack Engineer. A fast, bilingual (EN/ES), single-page site built to convert recruiters and clients: terminal-style ASCII intro, animated hero with live stat counters, experience timeline, featured products, and a clear contact CTA.
- Next.js (App Router) + React 19 + TypeScript
- Tailwind CSS v4
- Framer Motion for animations (respects
prefers-reduced-motion) - next-themes for dark/light mode
- react-github-calendar for the contributions graph
- Bilingual — English-first with an ES/EN toggle, persisted in
localStorage - Dark/light theme — system-aware, no hydration flicker
- Sticky navbar — with scroll progress bar and section anchors
- Animated hero — availability badge, count-up stats, decorative dot grid + accent glow
- Experience timeline — vertical rail with per-role tech tags
- SEO — Open Graph image generated at build time (
next/og), JSON-LDPersonschema, sitemap, robots, canonical, generated favicon/apple icon - Anti-spam email — address is base64-obfuscated and only rendered client-side; it never appears in the served HTML
- Project screenshots — real captures of each live product in the cards
- Scrollspy navbar — active section highlighted while scrolling
- Custom 404 — bilingual, on-brand not-found page
- Google Analytics 4 — enabled by setting the
NEXT_PUBLIC_GA_IDenv var (G-XXXXXXX); no ID, no script
The hero avatar automatically shows public/profile.jpg when it exists (square crop recommended, ~640×640). Until then it falls back to the "ML" monogram.
pnpm install
pnpm devOpen http://localhost:3000.
pnpm build
pnpm startsrc/
├── app/
│ ├── layout.tsx # Metadata, JSON-LD, fonts, providers
│ ├── page.tsx # Section composition
│ ├── opengraph-image.tsx # OG image generated with next/og
│ ├── robots.ts / sitemap.ts
│ └── sections/ # Hero, Experience, Projects, Skills, Contact, Footer…
├── components/ # Navbar, AsciiIntro, toggles, counters…
└── lib/ # Translations (EN/ES), language context, email helper