Personal Website

Hi, this is my personal website! I'm currently between classical web development with html, css, and javascript and modern web development with Next.js and React.

Tech Stack

• nix to setup the development machine
• Next.js for the React framework
• tailwindcss
  • headless ui as a complimentary tailwindcss UI library
• pnpm for the package manager
  • eslint for the js[x] and ts[x] linter
  • prettier for the general formatter
  • font awesome icons which are set up for React and Next.js
• Deploying (currently) on Vercel at sua.sh

Project Workflow

Currently, I have the production website at sua.sh and the preview website at sua-dev.vercel.app. The production website is tied directly to main, while the preview website is tied to staging.

I'm drafting small issues and pull requests that merge into the staging branch. When I've made significant enough progress, I'll merge back staging into main.

---
title: Example workflow
---
gitGraph
   commit
   commit tag: "v0.1.0"
   branch staging
   checkout staging
   commit
   branch feature-1
   checkout feature-1
   commit
   checkout staging
   merge feature-1 tag: "v0.1.1"
   commit
   branch feature-2
   checkout feature-2
   commit
   checkout staging
   merge feature-2  tag: "v0.1.2"
   commit
   checkout main
   merge staging tag: "v0.2.0"
   commit

Loading

TLDR; go to sua-dev.vercel.app for the latest changes, but you will need to sign into Vercel. Or, go to the staging branch, pull the changes, and run pnpm dev to start up a local development web server.

Developer Workflow

Installation

Install nix from Determinate Systems.

curl --proto '=https' --tlsv1.2 -sSf -L https://install.determinate.systems/nix | sh -s -- install

Use devenv and direnv to install and load the developer shell with all the tooling built in.

I recommend using neovim or vscode with the devcontainer extension for the text editor.

Run the Server

Run pnpm dev to start up the local development web server.

Alternatively, use vercel dev and sign in to start the same server but gain the ability to interact with Vercel data.

Contribution

When committing, use commitizen to format the commit title and subtext to ensure conventional commits.

There are also a number of commit hooks set up for pre-commit to ensure consistent formatting and style.

Deployment

Purchase a domain name from a domain name registrar like namecheap. Alternatives include Cloudflare or GoDaddy.

Vercel makes it easy to setup and deploy your git project. First, sign up and connect your GitHub account to Vercel, then create a new Vercel project from one of your GitHub repositories. Finally, connect the Vercel server's IP address and domain name by adding an A and CNAME record to your domain under your domain name provider.

Each commit to main will be to the production website, and pushes to other branches will be to preview websites. See each build and deployment status under the deployment tab.