🚀 Yassine Harroute - Software Engineer Portfolio

A modern, responsive portfolio website showcasing my work as a Software Engineer. Built with React and modern web technologies, featuring smooth animations, interactive elements, and a professional timeline of my career journey.

✨ Features

• Responsive Design - Optimized for all devices and screen sizes
• Interactive Timeline - Professional career progression visualization
• Smooth Animations - Scroll-triggered animations and transitions
• Modern UI/UX - Clean, professional design with hover effects
• Performance Optimized - Fast loading and smooth scrolling
• SEO Friendly - Proper meta tags and semantic HTML structure

🛠️ Technologies Used

Frontend

• React.js - Modern UI framework
• CSS3 - Custom styling with animations
• JavaScript (ES6+) - Modern JavaScript features
• Font Awesome - Icon library
• Google Fonts - Typography

Build Tools

• Vite - Fast build tool and dev server
• GitHub Pages - Deployment platform

🚀 Live Demo

🌐 Portfolio Website: https://thales-2y8.pages.dev

📱 Screenshots

Desktop View

Mobile View

🏗️ Project Structure

portfolio/
├── public/
│   ├── assets/          # Static assets
│   ├── favicon/         # Favicon files
│   └── logo/           # Logo images
├── src/
│   ├── App.jsx         # Main application component
│   ├── App.css         # Main stylesheet
│   ├── index.css       # Global styles
│   └── main.jsx        # Application entry point
├── index.html          # HTML template
├── vite.config.js      # Vite configuration
├── package.json        # Dependencies and scripts
└── README.md           # This file

🚀 Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/Thalesmar/portfolio.git
   cd portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Build for Production

npm run build

Deploy to GitHub Pages

npm run deploy

📋 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run deploy - Deploy to GitHub Pages
• npm run lint - Run ESLint

🎨 Customization

Colors

The portfolio uses a custom color scheme defined in CSS variables:

• Primary: rgb(247, 201, 160) (Warm orange)
• Secondary: rgb(153, 255, 228) (Mint green)
• Background: rgb(30, 30, 30) (Dark grey)

Content

Update the following sections in src/App.jsx:

• Personal information and bio
• Project details and descriptions
• Skills and experience levels
• Contact information and social links

🌟 Key Sections

About

Professional introduction highlighting software engineering expertise and career objectives.

Projects

Showcase of technical projects with:

• Project descriptions
• Technology stacks
• GitHub links
• Live demos (where available)

Experience Timeline

Interactive timeline showing career progression:

• Software Engineer (2024 - Present)
• Full Stack Developer (2022 - 2024)
• Frontend Developer (2021 - 2022)
• Web Developer Intern (2020 - 2021)

Skills

Technical skills organized by category:

• Programming Languages
• Frontend Technologies
• Backend & DevOps

📱 Responsive Design

The portfolio is fully responsive and optimized for:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🚀 Performance Features

• Lazy Loading - Images and components load as needed
• Optimized Assets - Compressed images and minified CSS/JS
• Smooth Scrolling - Native smooth scroll behavior
• Intersection Observer - Efficient scroll-based animations

🔧 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

While this is a personal portfolio, suggestions and feedback are welcome! Feel free to:

• Report bugs
• Suggest improvements
• Share design ideas

📞 Contact

• Email: harrouteyassine573@gmail.com
• GitHub: @Thalesmar
• LinkedIn: Yassine Harroute
• Portfolio: https://thales-2y8.pages.dev/

🙏 Acknowledgments

• Font Awesome - For the beautiful icons
• Google Fonts - For typography
• Vite - For the excellent build tool
• GitHub Pages - For hosting

---

⭐ Star this repository if you found it helpful!

---

Built with ❤️ by Yassine Harroute