This content originally appeared on DEV Community and was authored by CodeBucks
Looking to create a professional portfolio website to showcase your projects and skills?🤔 This Next.js portfolio website tutorial is perfect for you! With Next.js, Tailwind CSS, and Framer Motion, you can build a dynamic and responsive website that will impress your potential clients and employers. It has almost perfect lighthouse score.
Overview
The tutorial starts with an introduction and a demo of the final product. We’ll then move on to setting up the environment and installing the necessary tools. You’ll learn how to use Tailwind CSS for styling and Framer Motion for animations. We’ll cover how to optimize images using NextJS, use Google fonts in NextJS, and implement dark mode in your portfolio. In this portfolio there are 4 pages home, about, projects and articles. Before starting this video you can checkout the following demo link👇
Link🔗: NextJs Portfolio Website
Here is the tutorial on how I have created this portfolio!👇
What You’ll Learn
By watching this video tutorial, you will learn the following:
- Using nextjs to build static pages
- Adding style using tailwind-css.
- How to create Page Transition effects using framer-motion.
- How to use Midjourney to create awesome profile image.
- How to use google fonts in next js
- NextJS images optimization
- How to implement dark mode in your next js portfolio
- And many awesome animations using framer-motion.
Key Features of This Portfolio Website
- Smooth Page Transition effects
- Cool Animations
- Minimal design
- Multiple Pages
- Mobile Responsive
- Unique approach to showcase your articles
- Fonts and Image optimization using Next.js Image component
- On Scroll animations
Libraries Used
For this project, you will use the following libraries:
- Next.js
- Framer-motion
- Tailwind CSS
Code Links
You can find the starter code for this project at: Starter code for nextjs portfolio And, for the final code, checkout the following link:
Final Code Link (Gumroad): Next.js portfolio website
Resources
You can find all the resources used to make this portfolio from the following:
- Svg Icons from Iconify.
- Fonts from Google Fonts.
- LightBulb Svg from lukaszadam.
- Home page Image created by using Midjourney .
- Profile image in the about page by Albert Dera on Unsplash.
Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.
Any suggestions are welcomed!
Don't forget to Share your feedback in the comments.
You might also like these website templates:
Thanks For Reading😄
Checkout my other article:
Build a custom pagination component in ReactJS from scratch
Form validation in ReactJS: build a reusable custom hook for inputs and error handling
Feel free to visit my youtube channel:
@CodeBucks
Checkout my new website:
DevDreaming
Follow me on Twitter where I share lots of useful resources!
@code_bucks 😉
This content originally appeared on DEV Community and was authored by CodeBucks
CodeBucks | Sciencx (2023-03-27T12:13:25+00:00) Create NextJs Portfolio⭐ Website using Tailwind-CSS and Framer-motion. Retrieved from https://www.scien.cx/2023/03/27/create-nextjs-portfolio%e2%ad%90-website-using-tailwind-css-and-framer-motion/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.