Juan Hurtado - Portfolio

A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS, showcasing my professional experience, skills, and contact information.

Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
• Customization
• Contact

Features

• Responsive Design: Fully responsive layout that works on all devices
• Dark/Light Mode: Theme toggle with system preference support
• Interactive Timeline: Animated work experience timeline
• Modern UI: Built with Tailwind CSS and shadcn/ui components
• Type Safety: Full TypeScript support
• Modular Architecture: Component-based structure for easy maintenance
• Internationalization: English and Spanish language support
• GitHub Integration: Cached GitHub stats and repository showcase

Tech Stack

• Framework: Next.js 15.5.2
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Deployment: Vercel / Next.js runtime

Project Structure

├── app/
│   ├── api/
│   │   └── github-stats/
│   ├── [locale]/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── sections/
│   │   ├── about-me.tsx
│   │   ├── contact.tsx
│   │   ├── education.tsx
│   │   ├── github-stats.tsx
│   │   ├── hero.tsx
│   │   ├── repositories.tsx
│   │   ├── skills.tsx
│   │   └── work-experience.tsx
│   ├── ui/
│   ├── contact-form.tsx
│   ├── header.tsx
│   ├── mobile-menu.tsx
│   ├── mode-toggle.tsx
│   └── theme-provider.tsx
├── hooks/
│   ├── use-github-stats.ts
│   ├── use-locale.ts
│   ├── use-scroll-progress.ts
│   ├── use-smooth-scroll.ts
│   └── use-toast.ts
├── lib/
│   ├── config/
│   ├── data/
│   │   ├── education.ts
│   │   ├── github-stats.ts
│   │   ├── repositories.ts
│   │   ├── skills.ts
│   │   └── work-experience.ts
│   ├── i18n.ts
│   ├── rate-limit.ts
│   ├── types/
│   │   └── index.ts
│   ├── utils.ts
│   └── validation/
│       └── contact.ts
└── public/

Getting Started

1.Clone the repository

git clone https://github.com/Skpow1234/Portfolio.github.io

2.Install dependencies

npm install

3.Run the development server

npm run dev

4.Build for production

npm run build

For a faster (experimental) production build using Turbopack:

npm run build:turbo

Performance

• Dev: npm run dev uses Turbopack for faster startup and HMR.
• Build: npm run build:turbo uses Turbopack (experimental) for faster compilation.
• Bundle: Radix UI and other barrel exports are tree-shaken via optimizePackageImports.
• Lazy loading: Chatbot and Coding Terminal load after the initial page so the first paint stays light.

Customization

1. Personal Information: Update the content in lib/data/ directory
2. Styling: Modify tailwind.config.ts and app/globals.css
3. Components: Customize components in the components/ directory
4. Translations: Modify lib/i18n.ts for language content
5. GitHub Integration: Update GitHub username in lib/data/github-stats.ts

Contact

Feel free to reach out if you have any questions or just want to connect:

• GitHub: @Skpow1234
• LinkedIn: Juan Felipe H
• Location: Cali, Colombia