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: 3 months ago
JSON representation
My personal portfolio website built with Next.js, Framer Motion, and Tailwind CSS. Showcases smooth animations, responsive design, and modular components.
- Host: GitHub
- URL: https://github.com/minel1410/portfolio
- Owner: minel1410
- Created: 2024-06-29T10:02:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-02T21:27:49.000Z (over 1 year ago)
- Last Synced: 2025-01-12T08:36:05.889Z (over 1 year ago)
- Topics: framer-motion, nextjs, responsive-design, vercel, webdesign
- Language: JavaScript
- Homepage: https://minelsalihagic.com
- Size: 2.31 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)