Modern Portfolio using Next.js and Framer Motion

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

modern-portfolio/
  |- components/
  |- pages/
    |-- about/
    |-- contact/
    |-- services/
    |-- testimonials/
    |-- work/
    |-- _app.jsx
    |-- index.jsx
  |- public/
  |- styles/
    |-- globals.css
  |- .eslintrc.json
  |- .gitignore
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.js
  |- variants.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 --legacy-peer-deps or yarn install --legacy-peer-deps.

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

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Modern Portfolio.

Production Dependencies

• @next/font: ^13.4.4
• framer-motion: ^10.12.16
• next: 13.4.3
• react: 18.2.0
• react-countup: ^6.4.2
• react-dom: 18.2.0
• 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

• autoprefixer: ^10.4.14
• eslint: 8.41.0
• eslint-config-next: 13.4.3
• postcss: ^8.4.23
• tailwindcss: ^3.3.2

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)