Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/minel1410/portfolio

My personal portfolio website built with Next.js, Framer Motion, and Tailwind CSS. Showcases smooth animations, responsive design, and modular components.
https://github.com/minel1410/portfolio

framer-motion nextjs responsive-design vercel webdesign

Last synced: about 21 hours ago
JSON representation

My personal portfolio website built with Next.js, Framer Motion, and Tailwind CSS. Showcases smooth animations, responsive design, and modular components.

Awesome Lists containing this project

README

        

# Portfolio

This is a personal portfolio website built using **Next.js**, **Framer Motion**, **Tailwind CSS**, and other modern web development tools. It showcases a clean, responsive design with smooth animations and an intuitive layout, ideal for presenting projects and personal information.

## Features
- **Responsive Design**: Tailored for devices of all sizes using [Tailwind CSS](https://tailwindcss.com/).
- **Smooth Animations**: Powered by [Framer Motion](https://www.framer.com/motion/) for a dynamic user experience.
- **Optimized Performance**: Built with [Next.js](https://nextjs.org/) for server-side rendering and static site generation.
- **Customizable Components**: Modular structure for easy updates and feature additions.

## Project Structure
```plaintext
.
├── public/
│ ├── assets/ # Static images and icons
├── src/
│ ├── components/ # Reusable React components
│ ├── pages/ # Next.js page routes
│ ├── styles/ # Tailwind CSS configurations
├── .gitignore # Ignored files
├── README.md # Project documentation
├── package.json # Frontend dependencies
├── tailwind.config.js # Tailwind CSS setup
```

### Notable Directories
- **public/assets/**: Contains all the static assets used in the project.
- **src/components/**: Includes reusable UI elements like headers, footers, and cards.
- **src/pages/**: Defines the portfolio's routes and content.

## Interesting Techniques
- **Framer Motion**: Used for animations, including page transitions and component reveals. Learn more in the [Framer Motion documentation](https://www.framer.com/motion/).
- **Tailwind CSS**: For utility-first styling. See the [official Tailwind CSS guide](https://tailwindcss.com/docs/).
- **Static Site Generation (SSG)**: Implemented with Next.js for optimal performance. Explore [Next.js SSG](https://nextjs.org/docs/basic-features/pages#static-generation).

## Learn More
- [Next.js Documentation](https://nextjs.org/docs)
- [Framer Motion Documentation](https://www.framer.com/motion/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)