Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sylvaincodes/portfolio_nextjs
A Frontend Portfolio built with NextJs , Framer Motion TailwindCss
https://github.com/sylvaincodes/portfolio_nextjs
Last synced: about 2 months ago
JSON representation
A Frontend Portfolio built with NextJs , Framer Motion TailwindCss
- Host: GitHub
- URL: https://github.com/sylvaincodes/portfolio_nextjs
- Owner: sylvaincodes
- Created: 2024-05-13T23:23:06.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-08-04T07:42:07.000Z (5 months ago)
- Last Synced: 2024-08-05T04:22:40.726Z (5 months ago)
- Language: TypeScript
- Homepage: https://animatedportfolio.vercel.app
- Size: 1.64 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next Js Frontend Portfolio With Framer Motion, Tailwind CSS.
This is the best animated portfolio with a beautiful and amazing design ui.
## Our goal
- Build beautiful Frontend Design UI & High quality code
- Build your own portfolio to promote your skills and get a Job.
## Core features
- Learn how to start a next js project from scratch
- Learn how to set SEO to Next Js Project
- Learn how to set up Tailwind Css and Next Js Project
- Learn how to create React components with Tailwind CSS
- Learn how to create React components with framer motion
## Quick start
To spin up this example loccaly, follow these steps
### Clone
Use the ` git clone ` CLI to clone template directly to your machine
### Set up env file
1. You will need to setup Next js [Next Js ](https://nextjs.org)
```bash
NEXT_PUBLIC_SERVER_URL=
```
### Run project on local
```bash
npm run dev
```
## Project Dev Steps
1. Environment Setup
- Install Next js Project
- Install Shadcn & Framer motion & @headlessui/react
```bash
npx shadcn-ui@latest init
npm i framer-motion
npm i @headlessui/react
```
2. Project Folder Structure
3. Optimisations
- SEO
- SMO
4. KIT UI : Container - Colors - Fonts
5. Landing Page
- Header
- Footer
- Hero
- Main Content
7. Projects page
- Main content
8. Blog page
- Main content
9. Contact page
- Main content
10. Test
11. Deploy to Netlify
## Questions
If you have any issues or questions [Send a comment] (https://www.youtube.com/@sylvaincodes593) on Youtube or reach out me on [Discord](https://discord.com/channels/1234070993996091503/1234070994512248853)