🚀 Personal Portfolio - Nícolas Harnisch

Professional Portfolio — React + TypeScript application focused on performance, accessibility, and responsive design.

---

📋 Table of Contents

• About
• Architecture Overview
• Technologies
• Folder Structure
• Core Features
• Setup
• Run Locally
• Testing
• Deployment
• Future Improvements
• Author

---

🇧🇷 Português

Read the full Portuguese version here: README.pt-BR.md

About 🎯

This portfolio project by Nícolas Harnisch demonstrates advanced skills in:

• React componentization with TypeScript
• Responsive design with Tailwind CSS
• Accessibility and keyboard-first navigation
• Smooth transitions with framer-motion
• Internationalization (i18n) with LanguageContext (English/Portuguese)
• Interactive 3D elements with Spline
• Dynamic Star Background for immersive UI
• Performance-focused architecture with React.lazy and Suspense
• Custom hooks and optimized UI rendering

The site includes sections: Hero, About, Experience, Tech Stack, Projects, and Footer.

---

Architecture Overview 🏗️

• Vite + React + TypeScript: fast development server and production build.
• Component-based architecture: UI and logic separation.
• Context API: LanguageContext (i18n), theme-provider (dark/light mode).
• Custom hooks:
  • useMobile (mobile breakpoint detection)
  • useScrollAnimation (entry animation on scroll)
  • useTypingEffect (typewriter effect in Hero)
  • useToast (toast notifications)
• Interactive 3D: Spline integration for high-end visual engagement.
• Code Splitting: Heavy components (Spline, sections) are lazy-loaded to optimize initial TTI/LCP.

---

Technologies 🛠️

Core

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Framer Motion
• Lucide React
• shadcn/ui (design system)
• Spline 3D (3D scenes)
• Lucide React (icons)
• HSL Theming (Glassmorphism & Airy Premium)

Dev Tools

• ESLint
• Prettier
• Husky (git hooks, optional)
• Vitest + Testing Library

---

Folder Structure 📁

src/
├── components/
│   ├── ui/                     # Reusable UI components
│   ├── About.tsx
│   ├── Experience.tsx
│   ├── Footer.tsx
│   ├── Hero.tsx
│   ├── Navbar.tsx
│   ├── NavLink.tsx
│   ├── ProjectCard.tsx
│   ├── Projects.tsx
│   ├── SplineScene.tsx          # 3D interactive scene
│   ├── StarBackground.tsx       # Dynamic background
│   ├── TechStack.tsx
│   └── WhatsAppButton.tsx
├── contexts/
│   ├── LanguageContext.tsx
│   └── theme-provider.tsx
├── hooks/
│   ├── use-mobile.tsx
│   ├── use-scroll-animation.tsx
│   ├── use-typing-effect.tsx
│   └── use-toast.ts
├── lib/
│   └── utils.ts
├── locales/
│   └── translations.ts
├── pages/
│   ├── Index.tsx
│   └── NotFound.tsx
├── App.tsx
├── main.tsx
├── index.css
└── vite-env.d.ts

---

Core Features ✅

Navigation

• Fixed top navbar with smooth section scrolling
• Mobile menu toggle
• Active section indicator based on scroll position
• 320px mobile-first responsive support

Hero

• Typewriter effect using useTypingEffect
• CTA links: CV (Google Drive), LinkedIn, GitHub, Email
• Interactive 3D Robot/Scene (Spline)
• Persistent dark/light theme toggle with transition effects
• Dynamic Star Background following theme colors

About & Experience

• Timeline style experience section
• Skills and education highlights
• Buttons for downloading CV and contacting author

Tech Stack

• Categorized stack cards
• Interactive chips and context-aware display

Projects

• Project cards with descriptions, tags, and links
• Dark mode style support on cards
• Search/filter hooks (if configured)

Contact & Footer

• Quick WhatsApp access button
• Detailed footer with navigation and social presence
• Multi-language support toggle (PT/EN) integrated in Navbar

Accessibility

• Keyboard focus styles and skip-to-content model
• High contrast and responsive typography

---

Setup ⚙️

Prerequisites

• Node.js v18+ recommended
• npm 10+ or pnpm

Installation

git clone https://github.com/NicolasHarnisch/Portifolio.git
cd Portifolio
npm install

---

Run Locally ▶️

npm run dev

Open: http://localhost:5173

Production build

npm run build
npm run preview

---

Testing 🧪

Install test dependencies:

npm install -D vitest @testing-library/react @testing-library/jest-dom

Run tests:

npm run test

---

Deployment 🚀

Vercel

npm install -g vercel
vercel

Netlify

• Connect repository
• Build command: npm run build
• Publish directory: dist

GitHub Pages

• Optional: setup with gh-pages package

---

Future Improvements 🗺️

• Add unit tests and E2E tests
• Improve SEO with metadata and sitemap
• Add more content sections (blog/case studies)
• Add analytics and CI/CD pipeline

---

Author 👨‍💻

Nícolas Harnisch

• GitHub: https://github.com/NicolasHarnisch
• LinkedIn: https://linkedin.com/in/nicolasharnisch
• Email: [email protected]