Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neonsy/nextjs-portfolio
Code for my personal portfolio website.
https://github.com/neonsy/nextjs-portfolio
nextjs portfolio portfolio-website react vercel
Last synced: 14 days ago
JSON representation
Code for my personal portfolio website.
- Host: GitHub
- URL: https://github.com/neonsy/nextjs-portfolio
- Owner: Neonsy
- Created: 2024-09-08T21:27:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-03T11:38:52.000Z (3 months ago)
- Last Synced: 2024-10-10T23:23:12.890Z (3 months ago)
- Topics: nextjs, portfolio, portfolio-website, react, vercel
- Language: TypeScript
- Homepage: https://neon-space.vercel.app
- Size: 396 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextJS Portfolio Site
This is a portfolio site built with NextJS.
It's also my first time properly using NextJS, after learning it, as well as React.
> [!NOTE]
> This Website will replace the current [Portfolio Placeholder](https://github.com/Neonsy/Portfolio) once it's complete.
## Workflows
[](https://vercel.com/neonspace/neonspace-portfolio)
### Main Action CI/CD
The workflow is triggered on pull requests targeting the `main` and `Preview` branches when they are opened, reopened, or synchronized.
The reason for this workflow is that with the Vercel environments, I've created a commit flow, that I want to play with.
The current flow, that I have in mind, is:
- The **Dev** branch, is the outmost layer of the _pipeline_, where all the changes happen.
- The **Preview** branch, is the 2. layer, where all the changes get merged into and the deployment is being previewed.
- The **main** branch, is the core layer, that get's all the **Dev** changes, filtered and tested on / form the **Preview** branch, which results in the production version.
> [!NOTE]TL;DR
> **`Dev`**->**`Preview`**->**`main`**
I can also work on Dev directly, depending on the occasion.
#### It runs the following steps:
1. **Restrict PR**
- **Objective**: Ensure PRs are made from the correct source branches.
- **Steps**:
- Checkout the repository.
- Check if the PR to the `Preview` branch originates from the `Dev` branch.
- Check if the PR to the `main` branch originates from the `Preview` branch.
- Add a label and close the PR if the branch conditions are not met.
2. **Label PR**
- **Objective**: Label PRs based on their target branches.
- **Steps**:
- Checkout the repository.
- Add a "preview" label for PRs from `Dev` to `Preview`.
- Add a "production ready" label for PRs from `Preview` to `main`.
3. **Format and Lint**
- **Objective**: Ensure code quality and formatting.
- **Steps**:
- Checkout the repository.
- Setup PNPM and Node.js.
- Install dependencies.
- Run ESLint to check for code quality:
- Add a label if ESLint fails.
- Remove the label if ESLint succeeds.
- Fail the job if ESLint fails.
- Run `format:check` to verify code formatting:
- Add a label if Prettier check fails.
- Remove the label if Prettier check succeeds.
- Run `format:fix` if needed and add a label if successful.
- Check for changes and commit/push if any are found.
4. **Vercel Deploy**
- **Objective**: Deploy to Vercel for production.
- **Steps**:
- Checkout the repository.
- Setup PNPM and Node.js.
- Install dependencies and Vercel CLI.
- Pull Vercel environment information.
- Build and deploy project artifacts to Vercel for production.
5. **Vercel Deploy Preview**
- **Objective**: Deploy to Vercel for preview environments.
- **Steps**:
- Checkout the repository.
- Setup PNPM and Node.js.
- Install dependencies and Vercel CLI.
- Pull Vercel environment information for preview.
- Build and deploy project artifacts to Vercel for preview.
- Comment the deployment URL on the PR.