[docs] create docs
This commit is contained in:
Alvalen
parent
8d1f25b9a9
commit
ee70cbbe1c
3 changed files with 71 additions and 28 deletions
85
README.md
85
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
|
||||
|
||||
|
||||
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
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
## Features
|
||||
|
||||
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||
* **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.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
## Installation
|
||||
|
||||
## Learn More
|
||||
1. Ensure you have [pnpm](https://pnpm.io/) installed. If not, you can install it using:
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
```shell
|
||||
npm install -g pnpm
|
||||
```
|
||||
2. Clone the repository:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
```shell
|
||||
git clone https://github.com/Alvalens/Alvalens-porto-2-nextJs.git
|
||||
```
|
||||
3. Navigate to the project directory:
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
```shell
|
||||
cd Alvalens-porto-2-nextJs
|
||||
```
|
||||
4. Install dependencies:
|
||||
|
||||
## Deploy on Vercel
|
||||
```
|
||||
pnpm install
|
||||
```
|
||||
5. Start the development server
|
||||
|
||||
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.
|
||||
```shell
|
||||
pnpm next dev
|
||||
```
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
|
||||
## 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.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the GPL-3.0 License seethe [LICENSE](LICENSE) file for details.
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"code": "http://www.google.com",
|
||||
"preview": "https://react-chat-rouge.vercel.app",
|
||||
"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",
|
||||
"code": "http://www.google.com",
|
||||
"preview": "https://github.com/Alvalens/react-tools",
|
||||
"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",
|
||||
"code": "http://www.google.com",
|
||||
"preview": "",
|
||||
"code": "https://github.com/Alvalens/aleph-discord-bot",
|
||||
"images": [
|
||||
"/projects/bot/bot1.png",
|
||||
"/projects/bot/bot2.png"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "my-porto-2",
|
||||
"version": "0.1.0",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbo",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue