[docs] create docs

README.md

@@ -1,34 +1,77 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Alvalens Porto 2
 
-## Getting Started
+![visitor badge](https://visitor-badge.laobi.icu/badge?page_id=porto2.visitor-badge)
 
-First, run the development server:
+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.
 
-```bash
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
-npm run dev
+
-# or
+## Features
-yarn dev
+
-# or
+* **Smooth Animation:** Smooth page scroll and scroll trigger animation.
-pnpm dev
+* **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
+
+1. Ensure you have [pnpm](https://pnpm.io/) installed. If not, you can install it using:
+
+   ```shell
+   npm install -g pnpm
+   ```
+2. Clone the repository:
+
+   ```shell
+   git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git
+   ```
+3. Navigate to the project directory:
+
+   ```shell
+   cd Alvalens-porto-2-nextJs
+   ```
+4. Install dependencies:
+
+   ```
+   pnpm install
+   ```
+5. Start the development server
+
+   ```shell
+   pnpm next dev
    ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+## Usage
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+There are four main sections and two subpages in this portfolio website:
 
-## Learn More
+### Home
 
-To learn more about Next.js, take a look at the following resources:
+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.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+### About
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+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.
 
-## Deploy on Vercel
+### Projects
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+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.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+### 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.
+
+## License
+
+This project is licensed under the GPL-3.0 License seethe [LICENSE](LICENSE) file for details.

json/data.json

@@ -7,8 +7,8 @@
         "This project is my second react project and my first project using Firebase. I learned a lot about how to use Firebase and how to use React to create a realtime application. I also learned how to use Daisy UI, a CSS framework that is built on top of Tailwind CSS. "
       ],
       "year": "2023",
-      "preview": "http://www.google.com",
+      "preview": "https://react-chat-rouge.vercel.app",
-      "code": "http://www.google.com",
+      "code": "https://github.com/Alvalens/react-realtime-chat",
       "images": [
         "/projects/chat/chat1.png",
         "/projects/chat/chat2.png",
@@ -34,8 +34,8 @@
         "The Todo List keeps tasks in check with intuitive task management capabilities, ensuring you never miss a beat. The note-taking feature provides a hassle-free way to jot down ideas and crucial information, accessible whenever inspiration strikes. Additionally, our robust expense tracker simplifies financial management by recording and categorizing expenses, delivering insightful spending analysis."
       ],
       "year": "2023",
-      "preview": "http://www.google.com",
+      "preview": "https://github.com/Alvalens/react-tools",
-      "code": "http://www.google.com",
+      "code": "react-tools-flax.vercel.app",
       "images": [
         "/projects/tools/tools.png",
         "/projects/tools/tools1.png",
@@ -55,8 +55,8 @@
       "desc": [
         "Aleph is a Discord bot that I created for my dircord server to use. The bot is built using Python and the discord.py library. The bot has image grabber feauture that takes argument (keywords) and returns an image from the internet.", "Other than that this bot has a few other features such as utility command to delete a messages, and a command to get the server's ping. This bot is still in development and I plan to add more features in the future."],
       "year": "2023",
-      "preview": "http://www.google.com",
+      "preview": "",
-      "code": "http://www.google.com",
+      "code": "https://github.com/Alvalens/aleph-discord-bot",
       "images": [
         "/projects/bot/bot1.png",
         "/projects/bot/bot2.png"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-porto-2",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",