Welcome to the source code of my personal portfolio website. This project is built using Gatsby, React, Tailwind CSS, and supports internationalization using gatsby-plugin-react-i18next.
This portfolio showcases my projects, skills, and allows visitors to get in touch with me directly through the contact form. It also supports dark mode and RTL layout for languages like Arabic.
- Framework: Gatsby v5
- Styling: Tailwind CSS
- Language Support: i18next + gatsby-plugin-react-i18next
- Icons: lucide-react
- Email Integration: FormSubmit / EmailJS / Custom server (depending on deployment)
- Deployment: [Optional: Add where you deployed it – Vercel, Netlify, etc.]
- 💡 Dark/Light Mode toggle with
localStoragepersistence. - 🌍 Multilingual Support for
en,ar,fr,it, andde. - 📱 Responsive Design optimized for mobile and desktop.
- 💼 Projects Showcase with translation support.
- 🛠️ Skills Section with animated progress indicators.
- ✉️ Contact Form to receive emails directly.
- 📄 Resume Viewer with download functionality.
- 🎯 Smooth Animations using Tailwind transitions.
├── src
│ ├── components # Reusable UI components (Navbar, Footer, Cards, etc.)
│ ├── pages # Static & dynamic pages (Home, Projects, Skills, Contact)
│ ├── translations # JSON translation files for i18n
│ ├── utils # Theme logic, i18n helpers
│ ├── assets # Images, logos, etc.
│ └── styles # Global and Tailwind configuration
Using gatsby-plugin-react-i18next. Translations are stored in src/translations/{lang}/{namespace}.json. Each page/component loads translations through the useTranslation() hook and optionally graphql queries.
- Default language:
en - Auto-detection enabled (from browser settings)
- RTL direction applied for Arabic
Dark mode is handled via Tailwind's dark: classes. The theme is stored in localStorage and toggled with a simple state hook. The root <html> is updated using useEffect.
The contact form sends data through [EmailJS / FormSubmit / custom API] depending on the selected service.
const handleSubmit = async (e: React.FormEvent) => {
// validate & send
};Feel free to plug in your preferred method.
The “View Resume” button links to a downloadable PDF or Google Drive link. You can either:
- Upload it to
/static/resume.pdf - Link it to an external platform like Notion or Google Docs
npm install
gatsby developMake sure to include .env file for any keys if required (like EmailJS or deployment vars).
To add or update translations:
- Edit JSON files in
src/translations - Use key-based lookups like
t('projects.title')
- Add unit tests
- Enable lazy loading images
- Add blog or changelog section
- Improve form validation
This is a personal, private project and not intended for commercial reuse.
Let me know if you want this exported, turned into a Notion doc, or formatted for internal sharing!