A modern, responsive portfolio website showcasing my journey as a full-stack developer. Built with clean architecture, optimized performance, and smooth animations to create an engaging user experience.
- Responsive Design - Perfect experience on all devices
- Modern UI/UX - Clean, professional, and intuitive interface
- Smooth Animations - Engaging micro-interactions and transitions
- Performance Optimized - Lazy loading, image optimization, and fast loading times
- Clean Architecture - Well-organized, scalable codebase
- Hero - Dynamic introduction with call-to-action
- About - Personal story and professional background
- Skills - Technical expertise and tools
- Experience - Work history and achievements
- Education - Academic background and certifications
- Projects - Featured work with live demos and source code
- Contact - Multiple ways to get in touch
- Lazy Loading Images - Optimized loading with skeleton states
- Animated Menu - Custom hamburger menu with smooth transitions
- Fixed Navigation - Always accessible navigation system
- Error Boundaries - Graceful error handling
- SEO Optimized - Meta tags and semantic HTML
- React 18 - Modern React with hooks and functional components
- Vite - Lightning-fast development and build tool
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Professional animations and transitions
- Custom UI System - Systaliko UI components
- React Icons - Comprehensive icon library
- Responsive Design - Mobile-first approach
- Lazy Loading - Images and components load on demand
- Code Splitting - Optimized bundle sizes
- Image Optimization - WebP support and loading states
- PWA Ready - Progressive Web App capabilities
src/
├── components/
│ ├── layout/ # Layout components (Header, Footer, Menu)
│ ├── sections/ # Page sections (Hero, About, Projects, etc.)
│ ├── common/ # Reusable components (Loading, OptimizedImage)
│ ├── ui/ # UI components
│ └── systaliko-ui/ # Custom UI system
├── data/ # Organized data files
│ ├── personal.js # Hero, About, Contact information
│ ├── experience.js # Work experience data
│ ├── education.js # Education and certifications
│ ├── projects.js # Portfolio projects
│ ├── navigation.js # Menu navigation data
│ └── index.js # Central export point
├── assets/ # Images and static files
├── utils/ # Utility functions
- Node.js (v16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/Derkaoui05/project1.git cd portfolio -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
npm run buildnpm run previewUpdate your information in the src/data/ directory:
personal.js- Hero content, about text, contact infoprojects.js- Your portfolio projectsexperience.js- Work experienceeducation.js- Educational background
- Modify
tailwind.config.jsfor custom themes - Update
src/index.cssfor global styles - Customize component styles in respective files
Replace images in src/assets/ with your own:
- Profile picture
- Project screenshots
- About section image
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you found this project helpful, please give it a ⭐️ on GitHub!
Yassir Derkaoui - Full Stack Developer
- 🌐 Website: derkaoui.netlify.app
- 📧 Email: derkaouidev@gmail.com
- 💼 LinkedIn: linkedin.com/in/derkaoui-yassir-dev
- 🐱 GitHub: github.com/Derkaoui05