Skip to content

README.md

Latest commit

 

History

History
202 lines (148 loc) · 5.37 KB

README.md

File metadata and controls

202 lines (148 loc) · 5.37 KB

🚀 Yassine Harroute - Software Engineer Portfolio

License: MIT Build Status Version

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

Desktop Portfolio

Mobile View

Mobile Portfolio

🏗️ 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

🙏 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