Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cityisbetter/website-portfolio-4.0
This website showcases my projects, skills, and experience, and it was built using Next.js 14 with animations implemented using Framer Motion and GSAP. I have also incorporated smooth page transitions using the Next.js page router. The project is developed with TypeScript and styled using SASS.
https://github.com/cityisbetter/website-portfolio-4.0
nextjs portfolio reactjs scss typescript vercel website-portfolio
Last synced: about 17 hours ago
JSON representation
This website showcases my projects, skills, and experience, and it was built using Next.js 14 with animations implemented using Framer Motion and GSAP. I have also incorporated smooth page transitions using the Next.js page router. The project is developed with TypeScript and styled using SASS.
- Host: GitHub
- URL: https://github.com/cityisbetter/website-portfolio-4.0
- Owner: CityIsBetter
- License: mit
- Created: 2024-07-19T10:14:26.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T12:40:35.000Z (1 day ago)
- Last Synced: 2024-11-06T13:47:23.658Z (1 day ago)
- Topics: nextjs, portfolio, reactjs, scss, typescript, vercel, website-portfolio
- Language: TypeScript
- Homepage: https://maheshpaul.vercel.app
- Size: 41.7 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# My Portfolio Website
Welcome to my portfolio website repository. This website showcases my projects, skills, and experience, and it was built using Next.js 14 with animations implemented using Framer Motion and GSAP. I have also incorporated smooth page transitions using the Next.js page router. The project is developed with TypeScript and styled using SASS.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Screenshots](#screenshots)
- [Performance Insights](#performance-insights)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Next.js 14**: The latest version of Next.js provides server-side rendering and static site generation.
- **Framer Motion**: Used for implementing animations for various elements.
- **GSAP**: Used for complex animations and transitions.
- **Page Transitions**: Smooth transitions between pages using the Next.js page router.
- **TypeScript**: Ensures type safety and better developer experience.
- **SASS**: Used for writing clean and maintainable CSS.
- **Responsive Design**: Fully responsive and works on all devices.
- **SEO Optimized**: Basic SEO optimization for better search engine ranking.
## Technologies Used
- [Next.js 14](https://nextjs.org/)
- [Framer Motion](https://www.framer.com/motion/)
- [GSAP](https://greensock.com/gsap/)
- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [SASS](https://sass-lang.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
## Installation
To get started with this project, clone the repository and install the dependencies:
```bash
git clone https://github.com/your-username/portfolio-website.git
cd portfolio-website
npm install
```
## Usage
To start the development server:
```bash
npm run dev
```
## Screenshots
Here are some screenshots of the website:
## Performance Insights
The website is optimized for performance, ensuring a fast and smooth user experience. Below are the performance benchmarks:
performance benchmark is low since pageInsight is not suited for websites with page transition and flag the transition as layout shift and reduce score.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any improvements or new features.
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/CityIsBetter/Website-Portfolio-4.0/blob/main/LICENSE) file for details.