| .vscode | ||
| app | ||
| components | ||
| json | ||
| public | ||
| .eslintrc.json | ||
| .gitignore | ||
| generate-sitemap.js | ||
| jsconfig.json | ||
| LICENSE | ||
| next.config.js | ||
| package.json | ||
| pnpm-lock.yaml | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
Alvalens Porto 2
This is my debut project utilizing Next.js, a portfolio website featuring four primary sections: Home, About, Projects, and Contact. The site is brought to life with animations powered by Framer Motion, enhanced page transitions with Fullpage.js, and styled using elements of Tailwind CSS. This project also read list of project data from a JSON file. It serves as a showcase of my web development skills and represents my initial foray into web development with Next.js.
Features
- Smooth Animation: Smooth page scroll and scroll trigger animation.
- Smooth Page Transition: Smooth page transition with prefetching feature of next js.
- Dynamic Data: Read the project data from JSON file instead of directly implemented the data.
Installation
-
Ensure you have pnpm installed. If not, you can install it using:
npm install -g pnpm -
Clone the repository:
git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git -
Navigate to the project directory:
cd Alvalens-porto-2-nextJs -
Install dependencies:
pnpm install -
Start the development server
pnpm next dev
Usage
There are four main sections and two subpages in this portfolio website:
Home
The home page serves as an introduction to the portfolio. It provides an overview of your web development skills and passion for the field. Users can explore other sections from here.
About
The about page offers more detailed information about you as a web developer. It might include your background, education, skills, and interests in the field of web development.
Projects
The projects section showcases your work as a web developer. Users can explore the projects you've worked on, and you can provide details such as project descriptions, technologies used, and images.
Contact
The contact page allows users to get in touch with you. You can provide contact information or a contact form for inquiries.
Subpages
- Project archive: list all of your project that dont needed to display at main project page.
- Project details: See the main project detail by clicking the project image.
Feel free to customize and expand upon these sections and subpages to suit your needs and showcase your unique skills and projects.
Contributing
Contributions are welcome! If you find any issues or have suggestions, feel free to open an issue or submit a pull request.
Reference (inspiration)
License
This project is licensed under the GPL-3.0 License seethe LICENSE file for details.