A modern, animated portfolio website built with cutting-edge web technologies featuring 3D graphics, smooth animations, and multilingual support.
- 3D Interactive Background - Immersive Three.js animated particles
- GSAP Animations - Smooth scroll-triggered animations throughout
- Framer Motion - Fluid micro-interactions and transitions
- Dark Theme - Premium dark UI with blue accent colors
- Responsive Design - Fully optimized for all device sizes
- Multilingual Support - Available in:
- 🇬🇧 English
- 🇫🇷 French (Français)
- 🇸🇦 Arabic (العربية)
- EmailJS Integration - Backend-less contact form
- Form Validation - Real-time client-side validation
- Feedback States - Loading, success, and error messages
- GitHub Stats - Live GitHub activity integration
- Animated Counters - Scroll-triggered statistics
- Interactive Project Cards - Hover effects and detailed views
| Category | Technologies |
|---|---|
| Framework | Next.js 15 (App Router, Turbopack) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4, CSS Variables |
| 3D Graphics | Three.js, React Three Fiber, Drei |
| Animations | GSAP, Framer Motion |
| Icons | Lucide React, React Icons |
| i18n | next-intl |
| EmailJS | |
| Deployment | Vercel |
src/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Main page component
├── components/
│ ├── layouts/ # Header, Footer
│ ├── sections/ # Page sections
│ │ ├── Hero.tsx # Hero with 3D background
│ │ ├── AboutSection.tsx
│ │ ├── CompetenceSection.tsx
│ │ ├── EducationSection.tsx
│ │ ├── ExperienceSection.tsx
│ │ ├── ProjectsSection.tsx
│ │ ├── GithubStatsSection.tsx
│ │ └── ContactSection.tsx
│ ├── three/ # Three.js components
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions
└── i18n.ts # Internationalization config
messages/ # Translation files
├── en.json # English
├── fr.json # French
└── ar.json # Arabic
public/
├── images/ # Static images
└── cv.pdf # Downloadable CV
- Node.js 18.17 or later
- npm or yarn
-
Clone the repository
git clone https://github.com/Keltoummalouki/MyPortfolio.git cd MyPortfolio -
Install dependencies
npm install
-
Set up environment variables (optional, for contact form)
# Create .env.local file NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key -
Run the development server
npm run dev
-
Open in browser
http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run ESLint |
| Section | Description |
|---|---|
| Hero | Introduction with 3D particle background, profile photo, and CTAs |
| About | Bio, animated stats, journey timeline, and personal qualities |
| Skills | Technical competencies organized by category with SVG icons |
| Education | Academic background and certifications |
| Experience | Professional experience and internships |
| Projects | Featured projects with images, tech stack, and links |
| GitHub Stats | Live GitHub contribution statistics |
| Contact | Contact form with EmailJS integration |
This project is configured for seamless deployment on Vercel:
- Push your code to GitHub
- Import the repository in Vercel
- Configure environment variables (if using EmailJS)
- Deploy!
This project is open source and available under the MIT License.
Keltoum Malouki - Full Stack Developer
- 📧 Email: keltoummalouki@gmail.com
- 💼 LinkedIn: Keltoum Malouki
- 🐙 GitHub: @Keltoummalouki
- 📍 Location: Casablanca, Morocco
⭐ If you found this portfolio helpful, please consider giving it a star!
Made with ❤️ by Keltoum Malouki