Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated v5 #2

Open
wants to merge 7 commits into
base: v4
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions .babelrc

This file was deleted.

5 changes: 5 additions & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Warning: Do not add secrets (API keys and similar) to this file, as it source controlled!
# Use `.env.local` for any secrets, and ensure it is not added to source control

NEXT_PUBLIC_SANITY_PROJECT_ID="hah1kn4r"
NEXT_PUBLIC_SANITY_DATASET="production"
32 changes: 0 additions & 32 deletions .eslintrc.js

This file was deleted.

21 changes: 1 addition & 20 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,3 @@
{
"extends": "next/core-web-vitals",
"rules": {
"react/no-unescaped-entities": "off",
"@next/next/no-page-custom-font": "off",
"indent": ["error", 2], // Enforce a 2-space indentation
"no-unused-vars": "warn", // Warn about variables that are declared but not used
"no-console": "warn", // Warn about console.log statements
"react/react-in-jsx-scope": "off", // Not necessary in Next.js as of version 9.5.4
"react/prop-types": "off", // Disable prop-types as TypeScript is often used with Next.js
"jsx-a11y/anchor-is-valid": [ // Enforce valid anchors
"error", {
"components": ["Link"],
"specialLink": ["hrefLeft", "hrefRight"],
"aspects": ["invalidHref", "preferButton"]
}
],
"import/no-anonymous-default-export": "warn", // Warn against anonymous default exports
"react-hooks/rules-of-hooks": "error", // Enforce rules of hooks
"react-hooks/exhaustive-deps": "warn" // Warn if dependencies are missing in useEffect
}
"extends": "next/core-web-vitals"
}
13 changes: 0 additions & 13 deletions .github/FUNDING.yml

This file was deleted.

38 changes: 0 additions & 38 deletions .github/ISSUE_TEMPLATE/bug_report.md

This file was deleted.

10 changes: 0 additions & 10 deletions .github/ISSUE_TEMPLATE/custom.md

This file was deleted.

20 changes: 0 additions & 20 deletions .github/ISSUE_TEMPLATE/feature_request.md

This file was deleted.

80 changes: 0 additions & 80 deletions .github/workflows/nextjs.yml

This file was deleted.

21 changes: 0 additions & 21 deletions LICENSE

This file was deleted.

113 changes: 21 additions & 92 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,107 +1,36 @@
# Hello there (ฅ'ω'ฅ) it's rNLKJA here!

<img src="https://rin.contact/images/index/heroSection1.png" width=100% alt='image of me'/>

After months of ideation and development, I'm excited to introduce the latest iteration of my personal website, built with `React` and `Next.js`. This 4th rebuild represents a continuous evolution of my online presence, with a focus on showcasing my data science skills and publishing content I'm passionate about. While this may not be the final version, my goal is for it to be a flexible, easily updated foundation for future expansions.

## Table of Content

- [Hello there (ฅ'ω'ฅ) it's rNLKJA here!](#hello-there-ฅωฅ-its-rnlkja-here)
- [Table of Content](#table-of-content)
- [Tech Stack](#tech-stack)
- [Documentation](#documentation)
- [Getting Started](#getting-started)
- [Project Structure](#project-structure)
- [Deployment](#deployment)
- [Future Plan](#future-plan)
- [Contribution Guidelines](#contribution-guidelines)
- [LICENSE](#license)
- [Contact](#contact)

## Tech Stack

The site is built using the following technologies:

- **Next.js**: A React framework offering features like server-side rendering and static site generation, enhancing SEO and performance.
- **React**: A JavaScript library for building user interfaces with reusable components.
- **TailwindCSS**: A utility-first CSS framework for creating custom designs without leaving your HTML.
- **Additional Libraries**: `react-icons`, `bootstrap`, `mui`, `react-awesome-reveal`, etc., which provide ready-to-use components and animations.
- **Database**: use MongoDB free tier to store data. Data base is hosted on MongoDB Atlas Sydney server.

## Documentation

- For website polling, follow documentation at [app.earser.io](https://app.eraser.io/workspace/juqNSio2wyvFy79ovWRI?origin=share)
- For project planner, refer to [projectplanner.ai]()
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).

## Getting Started

To get the project up and running on your local machine, follow these steps:

**Prerequisites**:

- Ensure you have `node.js` and `npm` installed.
First, run the development server:

**Installation**:

- Clone the repository: `git clone https://github.com/rNLKJA/rin.contact.git`
- Navigate to the project directory: `cd rin.contact`
- Install dependencies: `npm install`

**Local Development**:

- Start the development server: npm run dev
- Visit `http://localhost:3000` in your browser to view the site.

## Project Structure

```text
rin.contact/
├── app/ # App configuration (e.g., next.config.js, tailwind.config.js)
├── components/ # Reusable UI components (e.g., Navbar, Footer)
├── pages/ # Page components (e.g., index.js, about.js)
├── public/ # Static files like images and favicon
└── styles/ # Global and individual stylesheets
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

The project structure is pretty simple, the `app` folder contains the configuration of the app, e.g. `next.config.js`, `tailwind.config.js`, etc. The `components` folder contains all the components used in the website, e.g. `Navbar`, `Footer`, `HeroSection`, etc. The `pages` folder contains all the pages, e.g. `index.js`, `about.js`, etc. The `public` folder contains all the static files, e.g. `favicon.ico`, `heroSection.png`, etc. The `styles` folder contains all the stylesheets, e.g. `global.css`, `index.css`, etc.

To add a new page, simply create a new file in `pages` folder, e.g. `contact.js`, the new page will be automatically generated and access via `http://localhost:3000/contact`. To add a new component, simply create a new file in `components` folder, e.g. `Contact.js`, then you can import it in any page you want.

## Deployment

The site is deployed via GitHub Pages with automated deployment through GitHub Actions. If you encounter a 404 error or other deployment issues, consider the following:

- **404 Error**: Ensure the `next.config.js` is correctly configured, especially if next export has been deprecated.
- **Initial Setup**: If problems persist, initializing a fresh `Next.js` app with the recommended structure might help.
- **GitHub Pages Configuration**: Ensure your repository settings correctly point to the build output folder.

## Future Plan

- **Hosting**: Migrate to Vercel for improved performance and developer experience.
- **TypeScript**: Convert .jsx files to .tsx for enhanced code quality and maintainability.
- **Database Integration**: Incorporate a database like MongoDB for dynamic content and use `Next.js` API routes for server-side operations.
- **AI Gallery**: Create a gallery featuring AI-generated images, with prompts and details about the creation process.
- **\_\_tests\_\_**: Add unit tests for components and pages using `Jest` and `React Testing Library`.
- ...
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Contribution Guidelines
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Learn More

## LICENSE
To learn more about Next.js, take a look at the following resources:

This project is under a specific license. Please review the [LICENSE](/LICENSE) file in the repository for more information. If you plan to use any content commercially, ensure compliance with all relevant licenses.
- [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.

## Contact
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

For any further queries or suggestions, please reach out to me at GitHub @[rNLKJA](https://github.com/rNLKJA) or submit a quest via [Contact Form](https://rin.contact/contact).
## Deploy on Vercel

---
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.

<p align=right>2023-12-30 @<a href='https://github.com/rNLKJA'>rNLKJA</a></p>
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
Loading