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

    NEXT_PUBLIC_SERVER_URL=

Run project on local

    npm run dev

Project Dev Steps

1. Environment Setup
   • Install Next js Project
   • Install Shadcn & Framer motion & @headlessui/react

    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

6. Projects page

   • Main content

7. Blog page

   • Main content

8. Contact page

   • Main content

9. Test

10. 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