Portfolio Moderno is the personal portfolio of Nicolas Grajales Hoyos — a single-page application (SPA) built with React 19, TypeScript, Vite 6, and Tailwind CSS 3. It showcases projects, skills, and contact information through a polished, performant, and fully responsive interface, demonstrating modern front-end development practices from dark-mode theming to scroll-triggered animations.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt
Use this file to discover all available pages before exploring further.
Key Features
Dark / Light Mode Toggle
Theme preference is persisted in
localStorage and automatically seeded from the OS-level prefers-color-scheme media query on first visit. Switching is instant — Tailwind’s darkMode: 'class' strategy flips a single class on <html>.Animated Typing Effect
The Hero section cycles through role titles using a custom typing animation driven by a
blink keyframe defined in tailwind.config.js, giving the landing section a dynamic, developer-centric feel.Scroll-Triggered Animations
Every section fades in with a
fadeInUp keyframe as it enters the viewport. Visibility is tracked with the native IntersectionObserver API — no animation library required.Fully Responsive Design
Layouts are built entirely with Tailwind utility classes. On small screens the navigation collapses into a hamburger menu managed by the
Header component, ensuring a seamless experience across mobile, tablet, and desktop.Project Cards
The Projects section renders typed
Project objects (defined in src/types.ts) as cards with hover effects, technology tag badges, and optional links to GitHub repositories and live demos.18-Icon Skills Grid
The About section displays an 18-icon skills grid powered by React Icons 5.5, with each icon component typed as
React.FC<{ className?: string }> via the shared Skill interface in src/types.ts.Tech Stack
| Technology | Role |
|---|---|
| React 19 | UI component library and application runtime |
| TypeScript ~5.8 | Static typing for props, state, and shared data models |
| Vite 6 | Dev server with HMR and production bundler |
| Tailwind CSS 3.4 | Utility-first styling, custom design tokens, and keyframe animations |
| React Icons 5.5 | Tree-shakeable icon library covering skills and social links |
Project Structure
All in-page navigation uses anchor links —
#home, #about, #projects, and #contact — rather than a client-side router. The Header component intercepts these links and applies smooth scrolling so transitions between sections feel native and instant without adding a routing dependency.