Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion

Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion
Hello fellow developers! đź‘‹ Today, I’m excited to share my journey of building Portfolio v2, a modern and responsive portfolio using Next.js, TailwindCSS, and Framer Motion. Whethe…


This content originally appeared on DEV Community and was authored by MOHAMAD ZUBI

Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion
Hello fellow developers! đź‘‹ Today, I'm excited to share my journey of building Portfolio v2, a modern and responsive portfolio using Next.js, TailwindCSS, and Framer Motion. Whether you're showcasing your work or looking to revamp your personal brand, this project is designed to impress.

Technologies Used

Next.js
Next.js provided the robust framework needed to create a fast, server-rendered React application. Its built-in routing and optimization capabilities ensured a smooth user experience across devices.

TailwindCSS
TailwindCSS empowered me to rapidly style and customize components with utility-first classes. The flexibility of TailwindCSS allowed me to create both a dark and light theme seamlessly.

Framer Motion
Framer Motion added a touch of interactivity with fluid animations and transitions. This library made it easy to enhance user engagement while maintaining performance.

Key Features
Two Themes: Choose between a sleek dark mode and a vibrant light mode to suit your preferences.
Sections: The portfolio includes essential sections like hero, about, and projects, each designed to highlight your skills and achievements.
Responsive Design: Built with responsiveness in mind, ensuring a seamless experience across various screen sizes and devices.
Open-Source: Portfolio v2 is open-source, welcoming contributions and feedback from the community.

Check it out here
Live-Website
How to Get Started
Installation
Clone the repository and install dependencies:


git clone https://github.com/mohamad-zubi/portfolio-v2.git
cd portfolio-v2
npm install

Run Locally
Start the development server:

npm run dev

Open http://localhost:3000 to view your portfolio in the browser.

Contributing
Contributions are welcome! Whether it's bug fixes, feature enhancements, or suggestions for improvement, feel free to fork the repository and submit a pull request.

**
Portfolio v2 was a rewarding experience, allowing me to leverage modern web technologies to create a visually appealing and functional portfolio. I invite you to explore the project on GitHub, try out the live demo, and contribute to its ongoing development.

Check out Portfolio v2 on GitHub: [GitHub Repository Link]

Happy coding! 🚀
Image description**
Buildin
Image description
Image description
Image description
Image description


This content originally appeared on DEV Community and was authored by MOHAMAD ZUBI


Print Share Comment Cite Upload Translate Updates
APA

MOHAMAD ZUBI | Sciencx (2024-07-11T00:26:38+00:00) Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion. Retrieved from https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/

MLA
" » Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion." MOHAMAD ZUBI | Sciencx - Thursday July 11, 2024, https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/
HARVARD
MOHAMAD ZUBI | Sciencx Thursday July 11, 2024 » Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion., viewed ,<https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/>
VANCOUVER
MOHAMAD ZUBI | Sciencx - » Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/
CHICAGO
" » Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion." MOHAMAD ZUBI | Sciencx - Accessed . https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/
IEEE
" » Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion." MOHAMAD ZUBI | Sciencx [Online]. Available: https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/. [Accessed: ]
rf:citation
» Building a Modern Portfolio with Next.js, TailwindCSS, and Framer Motion | MOHAMAD ZUBI | Sciencx | https://www.scien.cx/2024/07/11/building-a-modern-portfolio-with-next-js-tailwindcss-and-framer-motion/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.