Khalil Charfi - Portfolio

My personal portfolio site built with React, TypeScript, and Three.js. Nothing fancy, just wanted something that loads fast and looks good.

📚 Documentation

• Architecture Guide - Comprehensive architecture documentation
• Error Handling Guide - Error handling patterns and best practices
• CI/CD & Git Hooks - CI/CD workflows and Git hooks setup
• Deployment Troubleshooting - GitHub Pages deployment issues and solutions
• HTML Templating - Handlebars templating system for static HTML generation
• Templating Options - Comparison of templating approaches
• No-JS Testing Guide - Testing progressive enhancement and no-JS fallback
• No-JS i18n Guide - Multilingual support without JavaScript
• Multilingual No-JS - Pre-rendered language-specific HTML files
• HTML5 Native Components - Modern HTML5 elements for no-JS functionality
• Improvements Summary - Detailed changelog of recent improvements

What's Inside

• React 18 + TypeScript + Vite (because 2025 and we're not using create-react-app anymore)
• Three.js for some particle eye-candy in the background
• Supports 4 languages: English, Arabic, French, German
• Works offline (PWA setup)
• Actually accessible (tested with screen readers)
• Optimized for performance - no 10MB bundles here
• SEO optimized so recruiters can actually find it

Quick Start

# Install
npm install

# Development
npm run dev

# Build
npm run build

# Preview
npm run preview

Scripts

Development

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build

Deployment

Command	Description
npm run deploy:manual	Manual deployment to GitHub Pages (recommended)

Note: Due to CI environment issues with large files, use manual deployment for production releases. See Deployment Troubleshooting for details.

Testing & CI

Command	Description
npm run test:playwright	Run Playwright tests
npm run test:no-js	Test no-JS fallback (production build)
npm run ci:test	Run all CI tests locally
npm run ci:validate-translations	Validate translations
npm run ci:bundle-size	Check bundle size

Heads up: Testing no-JS? Use the prod build (npm run preview on 4173). Dev server on 5177 won't work for this. See the No-JS Testing Guide if you're confused.

Git Hooks

Command	Description
npm run hooks:setup	Install Git hooks
npm run hooks:remove	Remove Git hooks

See CI/CD & Git Hooks Guide for more details.

Structure

src/
├── features/         # Feature modules
├── shared/           # Shared components & utilities
├── context/          # Global contexts
└── styles/           # Global styles

Configuration

Create .env file:

GEMINI_API_KEY=your_api_key_here
VITE_ENABLE_CHATBOT=false

HTML Templating

Yeah, I'm using Handlebars to generate the HTML from translation files. Makes it easier to keep everything in sync across languages.

• Templates live in templates/*.hbs
• Run npm run generate:html if you need to regenerate
• Happens automatically before builds anyway

Check the HTML Templating Guide if you want the full story.

Contact

• LinkedIn: linkedin.com/in/khalil-charfi
• GitHub: github.com/khalil-charfi

---

Made by Khalil Charfi • 2025