modern-portfolio
modern-portfolio copied to clipboard
Modern Portfolio using Next.js and Framer Motion.
Modern Portfolio using Next.js and Framer Motion
:notebook_with_decorative_cover: 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
:bangbang: 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
:toolbox: Getting Started
-
Make sure Git and NodeJS is installed.
-
Clone this repository to your local computer.
-
Open terminal in root directory. Run
npm install --legacy-peer-deps
oryarn install --legacy-peer-deps
. -
Now app is fully configured 👍 and you can start using this app using
npm run dev
oryarn dev
.
:camera: Screenshots:
:gear: Tech Stack
:wrench: Stats
:raised_hands: 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.
:gem: 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
:coffee: Buy Me a Coffee
:rocket: Follow Me
:books: 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!
:page_with_curl: 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.
:star: Give A Star
You can also give this repository a star to show more people and they can use this repository.
:star2: Star History
(back to top)