Modern Portfolio using React, Vite, and Framer Motion

Ahmed Yassen Mohamed portfolio built with React + Vite, featuring modern UI/UX, framer-motion animations, and responsive design.

‼️ Folder Structure

Here is the folder structure of this app.

modern-portfolio/
  |- public/         # Static assets
  |- src/
    |-- components/  # React components
    |-- pages/       # Page components (Home, About, etc.)
    |-- utils/       # Utility functions
    |-- App.jsx      # Main Application component with routing
    |-- main.jsx     # Entry point
    |-- index.css    # Global styles (Tailwind)
  |- index.html      # HTML template
  |- package.json    # Project dependencies and scripts
  |- tailwind.config.js
  |- vite.config.js

🧰 Getting Started

1. Make sure Git and NodeJS is installed.

2. Clone this repository to your local computer.

3. Open terminal in root directory. Run npm install.

4. Now app is fully configured 👍 and you can start using this app using npm run dev.

📷 Screenshots:

⚙️ Tech Stack

💎 Acknowledgements

Useful resources and dependencies that are used in Modern Portfolio.

Production Dependencies

• framer-motion: ^10.12.16
• react: ^18.2.0
• react-router-dom: ^6.20.0
• react-countup: ^6.4.2
• react-icons: ^4.8.0
• react-tsparticles: ^2.9.3
• swiper: ^9.4.0
• tailwind-scrollbar: ^3.0.4
• tsparticles: ^2.9.3

Development Dependencies

• vite: ^5.0.8
• tailwindcss: ^3.3.2
• autoprefixer: ^10.4.14
• postcss: ^8.4.23

(back to top)