downgrade tus server

.env.defaults

@@ -1,35 +0,0 @@
-# These environment variables will be used by default if you do not create any
-# yourself in .env. This file should be safe to check into your version control
-# system. Any custom values should go in .env and .env should *not* be checked
-# into version control.
-
-# location of the test database for api service scenarios (defaults to ./.redwood/test.db if not set)
-# TEST_DATABASE_URL=file:./.redwood/test.db
-
-# disables Prisma CLI update notifier
-PRISMA_HIDE_UPDATE_MESSAGE=true
-
-# Option to override the current environment's default api-side log level
-# See: https://redwoodjs.com/docs/logger for level options, defaults to "trace" otherwise.
-# Most applications want "debug" or "info" during dev, "trace" when you have issues and "warn" in production.
-# Ordered by how verbose they are: trace | debug | info | warn | error | silent
-# LOG_LEVEL=debug
-
-FIRST_NAME=firstname
-LAST_NAME=lastname
-
-GMAIL=example@gmail.com
-GMAIL_SMTP_PASSWORD=chan geme xyza bcde
-
-DOMAIN=example.com
-API_DOMAIN=api.example.com
-
-# Must not end with "/"
-ADDRESS_PROD=https://portfolio.example.com
-ADDRESS_DEV=http://localhost:8910
-API_ADDRESS_PROD=https://api-portfolio.example.com
-API_ADDRESS_DEV=http://localhost:8911
-
-MAX_HTTP_CONNECTIONS_PER_MINUTE=60
-
-DATABASE_URL=postgresql://user:password@localhost:5432/rw_portfolio

.env.example

@@ -6,8 +6,19 @@
 FIRST_NAME=firstname
 LAST_NAME=lastname
 
-GMAIL=example@gmail.com
-GMAIL_SMTP_PASSWORD=chan geme xyza bcde
+DEFAULT_THEME=light
+
+COUNTRY=US
+STATE=New York
+CITY=Manhattan
+
+SMTP_HOST=smtp.example.com
+SMTP_PORT=465
+SMTP_SECURE=true
+SMTP_USER=noreply@example.com
+EMAIL_FROM=noreply@example.com
+EMAIL_TO=email@example.com
+SMTP_PASSWORD=password
 
 DOMAIN=example.com
 API_DOMAIN=api.example.com

.gitea/workflows/ci.yml

@@ -1,6 +1,5 @@
 version: "1"
 name: Publish Docker Image
-
 on:
   push:
     tags:
@@ -22,7 +21,7 @@ jobs:
 
       - name: Build & Tag Image
         run: |
-          docker build -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
+          docker build --build-arg APP_VERSION=${{ gitea.ref_name }} -t git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} .
           docker tag git.altaiar.dev/${{ gitea.repository }}:${{ gitea.ref_name }} git.altaiar.dev/${{ gitea.repository }}:latest
 
       - name: Push Images

Dockerfile

@@ -1,15 +1,13 @@
 # base
 # ----
-FROM node:20-bookworm-slim as base
+FROM node:lts-alpine AS base
 
 RUN corepack enable
 
 # We tried to make the Dockerfile as lean as possible. In some cases, that means we excluded a dependency your project needs.
 # By far the most common is Python. If you're running into build errors because `python3` isn't available,
 # add `python3 make gcc \` before the `openssl \` line below and in other stages as necessary:
-RUN apt-get update && apt-get install -y \
-  openssl \
-  && rm -rf /var/lib/apt/lists/*
+RUN apk add openssl
 
 USER node
 WORKDIR /home/node/app
@@ -29,11 +27,10 @@ RUN --mount=type=cache,target=/home/node/.yarn/berry/cache,uid=1000 \
 
 COPY --chown=node:node redwood.toml .
 COPY --chown=node:node graphql.config.js .
-COPY --chown=node:node .env.defaults .env.defaults
 
 # api build
 # ---------
-FROM base as api_build
+FROM base AS api_build
 
 # If your api side build relies on build-time environment variables,
 # specify them here as ARGs. (But don't put secrets in your Dockerfile!)
@@ -43,47 +40,65 @@ ARG ADDRESS_DEV
 ARG DOMAIN
 ARG API_DOMAIN
 ARG MAX_HTTP_CONNECTIONS_PER_MINUTE
-ARG GMAIL
-ARG GMAIL_SMTP_PASSWORD
+ARG SMTP_HOST
+ARG SMTP_PORT
+ARG SMTP_SECURE
+ARG SMTP_USER
+ARG SMTP_PASSWORD
+ARG EMAIL_FROM
+ARG EMAIL_TO
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG APP_VERSION
 
 COPY --chown=node:node api api
 RUN yarn rw build api
 
 # web prerender build
 # -------------------
-FROM api_build as web_build_with_prerender
+FROM api_build AS web_build_with_prerender
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG COUNTRY
+ARG STATE
+ARG CITY
+ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
+ARG APP_VERSION
+
+ENV APP_VERSION=$APP_VERSION
 
 COPY --chown=node:node web web
 RUN yarn rw build web
 
 # web build
 # ---------
-FROM base as web_build
+FROM base AS web_build
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG COUNTRY
+ARG STATE
+ARG CITY
+ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
+ARG APP_VERSION
+
+ENV APP_VERSION=$APP_VERSION
 
 COPY --chown=node:node web web
 RUN yarn rw build web --no-prerender
 
 # api serve
 # ---------
-FROM node:20-bookworm-slim as api_serve
+FROM node:lts-alpine AS api_serve
 
 RUN corepack enable
 
-RUN apt-get update && apt-get install -y \
-  openssl \
-  && rm -rf /var/lib/apt/lists/*
+RUN apk add openssl
 
 USER node
 WORKDIR /home/node/app
@@ -102,13 +117,15 @@ RUN --mount=type=cache,target=/home/node/.yarn/berry/cache,uid=1000 \
 
 COPY --chown=node:node redwood.toml .
 COPY --chown=node:node graphql.config.js .
-COPY --chown=node:node .env.defaults .env.defaults
 
 COPY --chown=node:node --from=api_build /home/node/app/api/dist /home/node/app/api/dist
 COPY --chown=node:node --from=api_build /home/node/app/api/db /home/node/app/api/db
 COPY --chown=node:node --from=api_build /home/node/app/node_modules/.prisma /home/node/app/node_modules/.prisma
 
+ARG APP_VERSION
+
 ENV NODE_ENV=production
+ENV APP_VERSION=$APP_VERSION
 
 # default api serve command
 # ---------
@@ -121,7 +138,7 @@ CMD [ "./api/dist/server.js" ]
 
 # web serve
 # ---------
-FROM node:20-bookworm-slim as web_serve
+FROM node:lts-alpine AS web_serve
 
 RUN corepack enable
 
@@ -142,10 +159,12 @@ RUN --mount=type=cache,target=/home/node/.yarn/berry/cache,uid=1000 \
 
 COPY --chown=node:node redwood.toml .
 COPY --chown=node:node graphql.config.js .
-COPY --chown=node:node .env.defaults .env.defaults
 
 COPY --chown=node:node --from=web_build /home/node/app/web/dist /home/node/app/web/dist
 
+ARG APP_VERSION
+ENV APP_VERSION=$APP_VERSION
+
 ENV NODE_ENV=production \
   API_PROXY_TARGET=http://api:8911
 
@@ -154,7 +173,7 @@ CMD "node_modules/.bin/rw-web-server" "--api-proxy-target" "$API_PROXY_TARGET"
 
 # console
 # -------
-FROM base as console
+FROM base AS console
 
 # To add more packages:
 #

README.md

@@ -6,10 +6,8 @@ Create two A records, one for the web side of the website and one for the api si
 - It doesn't matter what reverse proxy you use (Nginx, Apache, Traefik, Caddy, etc)
 1. Point the web domain to the web port (default: 8910)
 2. Point the api domain to the api port (default: 8911)
-### Gmail App Password
-1. Go to your Google [account dashboard](https://myaccount.google.com)
-2. Go to Security > 2-Step Verification > App Passwords > Create a new app password
-3. Copy the 16 character password
+### SMTP
+You will need credentials to authorize sending Email, instructions vary depending on provider (Gmail, Hotmail, etc).
 ### [Docker Compose](./docker-compose.yml)
 ```yaml
 version: '3.8'
@@ -18,26 +16,39 @@ services:
   portfolio:
     container_name: portfolio
     image: git.altaiar.dev/ahmed/portfolio:latest
+    restart: unless-stopped
     environment:
       - NODE_ENV=production
       - API_PROXY_TARGET=http://localhost:8911
       - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
       - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/portfolio
+      - DATABASE_URL=postgresql://redwood:changeme@db/portfolio
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
-      - GMAIL=example@gmail.com                             # The Gmail address associated with the app password created earlier
-      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - STATE=New York                                      # Optional, state or province
+      - CITY=Manhattan                                      # Optional
+      - DEFAULT_THEME=light                                 # 'light' or 'dark'
+      - SMTP_HOST=smtp.example.com
+      - SMTP_PORT=465
+      - SMTP_SECURE=true
+      - SMTP_USER=noreply@example.com
+      - EMAIL_FROM=noreply@example.com
+      - EMAIL_TO=email@example.com
+      - SMTP_PASSWORD=password
       - DOMAIN=portfolio.example.com
       - API_DOMAIN=api.portfolio.example.com
                                                             # Careful, addresses below must not end with a '/'
       - ADDRESS_PROD=https://portfolio.example.com          # https://DOMAIN
       - API_ADDRESS_PROD=https://api.portfolio.example.com  # https://API_DOMAIN
     ports:
-      - '8910:8910' # Web
-      - '8911:8911' # API
+      - 8910:8910                                           # Web
+      - 8911:8911                                           # API
     depends_on:
-      - db
+      db:
+        condition: service_healthy
+    volumes:
+      - files:/home/node/app/api/files_prod
     command: >
       /bin/sh -c "
       yarn rw build &&
@@ -45,28 +56,37 @@ services:
       yarn rw prisma db seed &&
       yarn rw serve"
 
-
   db:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
-      POSTGRES_USER: redwood
-      POSTGRES_PASSWORD: redwood
-      POSTGRES_DB: portfolio
-    ports:
-      - '5432:5432'
+      - POSTGRES_USER=redwood
+      - POSTGRES_PASSWORD=changeme                          # Change to a more secure password
+      - POSTGRES_DB=portfolio
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d DATABASE_URL"]     # Replace DATABASE_URL with the database URL from the portfolio container
+      interval: 10s
+      timeout: 5s
+      retries: 5
     volumes:
       - postgres:/var/lib/postgresql/data
 
 volumes:
   postgres:
+  files:                                                    # For persistent file storage across upgrades
+```
+## Fix Files Ownership
+The `files` volume in Docker is owned by `root`, since the portfolio container runs under the `node` user, file uploads will fail. Run this command to give ownership to the `node` user:
+```
+sudo docker exec -u root portfolio chown -R node:node /home/node/app/api/files_prod
 ```
 ## Logging In
 - Once the container is up and running, head to `/login` (`https://portfolio.example.com/login`), default credentials are below
 - If you would like to change the password, head to `/forgot-password` (`https://portfolio.example.com/forgot-password`), the username is `admin`
-  - If you correctly set up the Gmail app password, you should receive an email from yourself
-  - It contains the link needed to change your password
+  - If you correctly configured [SMTP](#smtp), you should receive an Email from [`EMAIL_FROM`](#docker-compose) to [`EMAIL_TO`](#docker-compose)
+  - The Email contains the link needed to change your password
 ### Default Credentials
 **Username:** `admin`
 
-**Password:** [`GMAIL_SMTP_PASSWORD`](#gmail-app-password)
+**Password:** [`SMTP_PASSWORD`](#docker-compose)

api/db/migrations/20241015183037_matrix/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "Handle" ADD VALUE 'matrix';

api/db/schema.prisma

@@ -25,6 +25,7 @@ enum Handle {
   discord
   twitch
   linkedin
+  matrix
   github
   gitea
   forgejo

api/package.json

@@ -5,12 +5,13 @@
   "dependencies": {
     "@fastify/cors": "^9.0.1",
     "@fastify/rate-limit": "^9.1.0",
-    "@redwoodjs/api": "8.3.0",
-    "@redwoodjs/api-server": "8.3.0",
-    "@redwoodjs/auth-dbauth-api": "8.3.0",
-    "@redwoodjs/graphql-server": "8.3.0",
-    "@tus/file-store": "^1.4.0",
-    "@tus/server": "^1.7.0",
+    "@redwoodjs/api": "8.4.0",
+    "@redwoodjs/api-server": "8.4.0",
+    "@redwoodjs/auth-dbauth-api": "8.4.0",
+    "@redwoodjs/graphql-server": "8.4.0",
+    "@tus/file-store": "1.4.0",
+    "@tus/server": "1.7.0",
+    "countries-list": "^3.1.1",
     "graphql-scalars": "^1.23.0",
     "nodemailer": "^6.9.14"
   },

api/src/graphql/socials.sdl.ts

@@ -17,6 +17,7 @@ export const schema = gql`
     discord
     twitch
     linkedin
+    matrix
     github
     gitea
     forgejo

api/src/lib/email.ts

@@ -8,16 +8,18 @@ interface Options {
 }
 
 const transporter = nodemailer.createTransport({
-  service: 'gmail',
+  host: process.env.SMTP_HOST,
+  port: Number(process.env.SMTP_PORT),
+  secure: process.env.SMTP_SECURE === 'true',
   auth: {
-    user: process.env.GMAIL,
-    pass: process.env.GMAIL_SMTP_PASSWORD,
+    user: process.env.SMTP_USER,
+    pass: process.env.SMTP_PASSWORD,
   },
 })
 
 export const sendEmail = async ({ to, subject, text, html }: Options) =>
   await transporter.sendMail({
-    from: `"${process.env.FIRST_NAME} ${process.env.LAST_NAME} (noreply)" <${process.env.GMAIL}>`,
+    from: `${process.env.FIRST_NAME} ${process.env.LAST_NAME} <${process.env.EMAIL_FROM}>`,
     to: Array.isArray(to) ? to : [to],
     subject,
     text,

api/src/lib/tus.ts

@@ -25,10 +25,11 @@ export const handleTusUpload = (
   tusHandler: Server,
   isPublicEndpoint: boolean
 ) => {
+  res.hijack()
   if (isProduction) {
     if (req.method === 'OPTIONS') handleOptionsRequest(res)
     else if (isPublicEndpoint && req.method === 'GET')
-      tusHandler.handle(req.raw, res.raw)
+      void tusHandler.handle(req.raw, res.raw)
     else if (['GET', 'POST', 'HEAD', 'PATCH'].includes(req.method)) {
       if (req.headers.cookie) handleAuthenticatedRequest(req, res, tusHandler)
       else {
@@ -41,7 +42,7 @@ export const handleTusUpload = (
     }
   } else {
     setCorsHeaders(res)
-    tusHandler.handle(req.raw, res.raw)
+    void tusHandler.handle(req.raw, res.raw)
   }
 }
 

api/src/server.ts

@@ -9,7 +9,27 @@ import { createServer } from '@redwoodjs/api-server'
 
 import { logger } from 'src/lib/logger'
 import { handleTusUpload } from 'src/lib/tus'
+
+enum Theme {
+  light = 'light',
+  dark = 'dark',
+}
+
 ;(async () => {
+  const { countries } = await import('countries-list')
+
+  if (!Object.keys(countries).includes(process.env.COUNTRY))
+    throw new Error(
+      'Invalid COUNTRY environment variable, please select a valid ISO-3166-1 alpha-2 country code\n See https://en.wikipedia.org/wiki/ISO_3166-1#Codes'
+    )
+
+  if (!(process.env.DEFAULT_THEME.toLowerCase() in Theme))
+    throw new Error(
+      'Invalid DEFAULT_THEME environment variable, please select either light or dark'
+    )
+
+  logger.info(`Portfolio ${process.env.APP_VERSION}`)
+
   const server = await createServer({
     logger,
     configureApiServer: async (server) => {
@@ -34,7 +54,10 @@ import { handleTusUpload } from 'src/lib/tus'
     datastore: new FileStore({
       directory: `./files_${isProduction ? 'prod' : 'dev'}`,
     }),
-    onResponseError: (_req, res, _err) => logger.error(res),
+    onResponseError(_, err) {
+      logger.error(err)
+      return { status_code: 500, body: 'Internal Server Error' }
+    },
   })
 
   server.addContentTypeParser(
@@ -42,12 +65,14 @@ import { handleTusUpload } from 'src/lib/tus'
     (_request, _payload, done) => done(null)
   )
 
-  server.all('/files', (req, res) =>
+  server.all('/files', (req, res) => {
+    res.hijack()
     handleTusUpload(req, res, tusServer, false)
-  )
-  server.all('/files/*', (req, res) =>
+  })
+  server.all('/files/*', (req, res) => {
+    res.hijack()
     handleTusUpload(req, res, tusServer, true)
-  )
+  })
 
   await server.start()
 })()

api/tsconfig.json

@@ -5,7 +5,7 @@
     "esModuleInterop": true,
     "target": "ES2023",
     "module": "Node16",
-    "moduleResolution": "Node16",
+    "moduleResolution": "node16",
     "skipLibCheck": false,
     "rootDirs": [
       "./src",

docker-compose.yml

@@ -4,26 +4,39 @@ services:
   portfolio:
     container_name: portfolio
     image: git.altaiar.dev/ahmed/portfolio:latest
+    restart: unless-stopped
     environment:
       - NODE_ENV=production
       - API_PROXY_TARGET=http://localhost:8911
       - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
       - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/portfolio
+      - DATABASE_URL=postgresql://redwood:changeme@db/portfolio
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
-      - GMAIL=example@gmail.com                             # The Gmail address associated with the app password created earlier
-      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - STATE=New York                                      # Optional, state or province
+      - CITY=Manhattan                                      # Optional
+      - DEFAULT_THEME=light                                 # 'light' or 'dark'
+      - SMTP_HOST=smtp.example.com
+      - SMTP_PORT=465
+      - SMTP_SECURE=true
+      - SMTP_USER=noreply@example.com
+      - EMAIL_FROM=noreply@example.com
+      - EMAIL_TO=email@example.com
+      - SMTP_PASSWORD=password
       - DOMAIN=portfolio.example.com
       - API_DOMAIN=api.portfolio.example.com
                                                             # Careful, addresses below must not end with a '/'
       - ADDRESS_PROD=https://portfolio.example.com          # https://DOMAIN
       - API_ADDRESS_PROD=https://api.portfolio.example.com  # https://API_DOMAIN
     ports:
-      - '8910:8910' # Web
-      - '8911:8911' # API
+      - 8910:8910                                           # Web
+      - 8911:8911                                           # API
     depends_on:
-      - db
+      db:
+        condition: service_healthy
+    volumes:
+      - files:/home/node/app/api/files_prod
     command: >
       /bin/sh -c "
       yarn rw build &&
@@ -31,18 +44,22 @@ services:
       yarn rw prisma db seed &&
       yarn rw serve"
 
-
   db:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
-      POSTGRES_USER: redwood
-      POSTGRES_PASSWORD: redwood
-      POSTGRES_DB: portfolio
-    ports:
-      - '5432:5432'
+      - POSTGRES_USER=redwood
+      - POSTGRES_PASSWORD=changeme                          # Change to a more secure password
+      - POSTGRES_DB=portfolio
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d DATABASE_URL"]     # Replace DATABASE_URL with the database URL from the portfolio container
+      interval: 10s
+      timeout: 5s
+      retries: 5
     volumes:
       - postgres:/var/lib/postgresql/data
 
 volumes:
   postgres:
+  files:                                                    # For persistent file storage across upgrades

package.json

@@ -7,9 +7,9 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/auth-dbauth-setup": "8.3.0",
-    "@redwoodjs/core": "8.3.0",
-    "@redwoodjs/project-config": "8.3.0",
+    "@redwoodjs/auth-dbauth-setup": "8.4.0",
+    "@redwoodjs/core": "8.4.0",
+    "@redwoodjs/project-config": "8.4.0",
     "prettier-plugin-tailwindcss": "0.4.1"
   },
   "eslintConfig": {

redwood.toml

@@ -9,7 +9,7 @@
   title = "${FIRST_NAME} ${LAST_NAME}"
   port = 8910
   apiUrl = "/api"
-  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
+  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "STATE", "CITY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV", "APP_VERSION"]
 [generate]
   tests = false
   stories = false

scripts/seed.ts

@@ -3,21 +3,19 @@ import { db } from 'api/src/lib/db'
 
 import { hashPassword } from '@redwoodjs/auth-dbauth-api'
 
-const MAX_TITLES = 5
-
 export default async () => {
   try {
     const admin = {
       username: 'admin',
-      email: process.env.GMAIL,
-      password: process.env.GMAIL_SMTP_PASSWORD,
+      email: process.env.EMAIL_TO,
+      password: process.env.SMTP_PASSWORD,
     }
 
     const [hashedPassword, salt] = hashPassword(admin.password)
 
     const existingAdmin = await db.user.findFirst({
       where: {
-        email: admin.email,
+        username: admin.username,
       },
     })
 
@@ -30,15 +28,21 @@ export default async () => {
           salt,
         },
       })
+    else
+      await db.user.update({
+        where: { id: existingAdmin.id },
+        data: {
+          username: admin.username,
+          email: admin.email,
+        },
+      })
 
     const titles = await db.titles.findFirst()
 
     if (!titles)
       await db.titles.create({
         data: {
-          titles: Array.from({ length: MAX_TITLES }).map(
-            (_, i) => `a title ${i + 1}`
-          ),
+          titles: Array.from({ length: 3 }).map((_, i) => `title ${i + 1}`),
         },
       })
   } catch (error) {

web/config/tailwind.config.js

@@ -6,6 +6,7 @@ import {
   SiTiktokHex,
   SiYoutubeHex,
   SiLinkedinHex,
+  SiMatrixHex,
   SiGithubHex,
   SiGiteaHex,
   SiLeetcodeHex,
@@ -112,6 +113,10 @@ export const theme = {
         light: SiLinkedinHex,
         dark: SiLinkedinHex,
       },
+      matrix: {
+        light: SiMatrixHex,
+        dark: invertColor(SiMatrixHex),
+      },
       github: {
         light: SiGithubHex,
         dark: invertColor(SiGithubHex),

web/package.json

@@ -14,11 +14,11 @@
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@redwoodjs/auth-dbauth-web": "8.3.0",
-    "@redwoodjs/forms": "8.3.0",
-    "@redwoodjs/router": "8.3.0",
-    "@redwoodjs/web": "8.3.0",
-    "@redwoodjs/web-server": "8.3.0",
+    "@redwoodjs/auth-dbauth-web": "8.4.0",
+    "@redwoodjs/forms": "8.4.0",
+    "@redwoodjs/router": "8.4.0",
+    "@redwoodjs/web": "8.4.0",
+    "@redwoodjs/web-server": "8.4.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tiptap/extension-link": "^2.8.0",
     "@tiptap/extension-text-style": "^2.8.0",
@@ -35,16 +35,17 @@
     "@uppy/react": "^4.0.1",
     "@uppy/tus": "^4.0.0",
     "@uppy/webcam": "^4.0.1",
+    "countries-list": "^3.1.1",
     "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
     "react-html-parser": "^2.0.2",
-    "react-typed": "^2.0.12"
+    "react-pdf": "^9.2.1"
   },
   "devDependencies": {
-    "@redwoodjs/vite": "8.3.0",
+    "@redwoodjs/vite": "8.4.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-html-parser": "^2",

web/src/Routes.tsx

@@ -31,11 +31,11 @@ const Routes = () => {
           <Route path="/admin/titles" page={TitleTitlesPage} name="titles" />
         </Set>
 
-        <Set wrap={ScaffoldLayout} title="Resume" titleTo="adminResume">
+        <Set wrap={ScaffoldLayout} title="Résumé" titleTo="adminResume">
           <Route path="/admin/resume" page={ResumeAdminResumePage} name="adminResume" />
         </Set>
 
-        <Set wrap={ScaffoldLayout} title="Projects" titleTo="projects" buttonLabel="New Project" buttonTo="newProject">
+        <Set wrap={ScaffoldLayout} title="Projects" titleTo="adminProjects" buttonLabel="New Project" buttonTo="newProject">
           <Route path="/admin/projects/new" page={ProjectNewProjectPage} name="newProject" />
           <Route path="/admin/projects/{id:Int}/edit" page={ProjectEditProjectPage} name="editProject" />
           <Route path="/admin/projects/{id:Int}" page={ProjectAdminProjectPage} name="adminProject" />

web/src/components/AutoCarousel/AutoCarousel.tsx

@@ -1,56 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-
-const SCROLL_INTERVAL_SECONDS = 3
-
-interface AutoCarouselProps {
-  images: string[]
-}
-
-const AutoCarousel = ({ images }: AutoCarouselProps) => {
-  const [activeItem, setActiveItem] = useState<number>(0)
-  const ref = useRef<HTMLDivElement>(null)
-
-  const scroll = useCallback(() => {
-    setActiveItem((prev) => {
-      if (images.length - 1 > prev) return prev + 1
-      else return 0
-    })
-  }, [images.length])
-
-  const autoScroll = useCallback(
-    () => setInterval(scroll, SCROLL_INTERVAL_SECONDS * 1000),
-    [scroll]
-  )
-
-  useEffect(() => {
-    const play = autoScroll()
-    return () => clearInterval(play)
-  }, [autoScroll])
-
-  useEffect(() => {
-    const width = ref.current?.getBoundingClientRect().width
-    ref.current?.scroll({ left: activeItem * (width || 0) })
-  }, [activeItem])
-
-  return (
-    <div
-      ref={ref}
-      className="carousel carousel-center p-2 space-x-2 rounded-box"
-    >
-      {images.map((image, i) => (
-        <div
-          key={i}
-          className="carousel-item w-full h-fit my-auto justify-center"
-        >
-          <img
-            src={image}
-            alt={`${i}`}
-            className="object-contain rounded-xl size-fit"
-          />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export default AutoCarousel

web/src/components/ColorPicker/ColorPicker.tsx

@@ -9,48 +9,50 @@ interface ColorPickerProps {
   setColor: React.Dispatch<React.SetStateAction<string>>
 }
 
-const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
-  return (
-    <div className="flex flex-col space-y-2 bg-base-100 p-2 rounded-xl w-min">
-      <section className="w-52">
-        <HexColorPicker color={color} onChange={setColor} />
-      </section>
-      <div className="flex space-x-2 w-52">
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label className="input input-bordered flex items-center gap-2 input-sm w-full grow">
-          <Icon path={mdiPound} className="size-4 opacity-70" />
-          <HexColorInput color={color} className="w-16" />
-        </label>
-        <button
-          type="button"
-          className="btn btn-square btn-sm"
-          onClick={async () => {
-            try {
-              await navigator.clipboard.writeText(color)
-              toast.success('Copied color to clipboard')
-            } catch {
-              toast.error(`Failed to copy, please try again`)
-            }
-          }}
-        >
-          <Icon path={mdiContentCopy} className="size-4" />
-        </button>
-        <button
-          type="button"
-          className="btn btn-square btn-sm  "
-          onClick={async () => {
-            try {
-              setColor(await navigator.clipboard.readText())
-            } catch {
-              toast.error(`Failed to paste, please try again`)
-            }
-          }}
-        >
-          <Icon path={mdiContentPaste} className="size-4" />
-        </button>
-      </div>
+const ColorPicker = ({ color, setColor }: ColorPickerProps) => (
+  <div className="flex flex-col space-y-2 bg-base-100 p-2 rounded-xl">
+    <HexColorPicker color={color} onChange={setColor} />
+    <div className="flex space-x-2">
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label className="input input-bordered flex items-center gap-2 input-sm grow">
+        <Icon path={mdiPound} className="size-4 opacity-70" />
+        <HexColorInput color={color} className="w-16" />
+      </label>
+      <button
+        type="button"
+        className="btn btn-square btn-sm"
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(color)
+            toast.success('Copied color to clipboard')
+          } catch {
+            toast.error(`Failed to copy, please try again`)
+          }
+        }}
+      >
+        <Icon path={mdiContentCopy} className="size-4" />
+      </button>
+      <button
+        type="button"
+        className="btn btn-square btn-sm"
+        onClick={async () => {
+          try {
+            const clipboardText = await navigator.clipboard.readText()
+            const hexColorRegex =
+              /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+
+            if (!hexColorRegex.test(clipboardText))
+              toast.error(`Text is not a valid hex color`)
+            else setColor(clipboardText)
+          } catch {
+            toast.error(`Failed to paste, please try again`)
+          }
+        }}
+      >
+        <Icon path={mdiContentPaste} className="size-4" />
+      </button>
     </div>
-  )
-}
+  </div>
+)
 
 export default ColorPicker

web/src/components/ContactCard/ContactCard/ContactCard.tsx

@@ -1,14 +1,17 @@
 import { useState, useRef, useLayoutEffect } from 'react'
 
-import SocialLinksCell from 'src/components/Social/SocialLinksCell'
+import { ContactCardPortrait } from 'types/graphql'
+
+import SocialLinks from 'src/components/Social/SocialLinks/SocialLinks'
 
 interface ContactCardProps {
   portraitUrl: string
+  socials: ContactCardPortrait['socials']
 }
 
-const ContactCard = ({ portraitUrl }: ContactCardProps) => {
-  const [width, setWidth] = useState()
-  const [height, setHeight] = useState()
+const ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
+  const [width, setWidth] = useState<number>(0)
+  const [height, setHeight] = useState<number>(0)
 
   const observedDiv = useRef(null)
 
@@ -50,25 +53,19 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
         }}
       />
 
-      <div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
-        <div className="card bg-base-100 shadow-xl md:card-side">
-          <figure>
-            <img
-              className="contact-me-image aspect-portrait object-cover"
-              src={portraitUrl}
-              alt={`${process.env.FIRST_NAME} ${process.env.LAST_NAME}`}
-            />
-          </figure>
-          <div
-            className="card-body mx-auto h-fit w-fit md:mx-0"
-            ref={observedDiv}
-          >
-            <h2 className="card-title justify-center text-3xl md:justify-start">
+      <div className="flex items-center justify-center">
+        <div className="card card-compact bg-base-100 shadow-xl md:card-side">
+          <img
+            className="contact-me-image rounded-box aspect-portrait p-2 object-cover"
+            src={portraitUrl}
+            alt={`${process.env.FIRST_NAME} ${process.env.LAST_NAME}`}
+          />
+          <div className="card-body mx-auto w-fit md:mx-0" ref={observedDiv}>
+            <h2 className="card-title justify-center text-3xl pb-2 md:justify-start">
               Contact Me
             </h2>
-            <p className="p-2"></p>
-            <div className="card-actions">
-              <SocialLinksCell />
+            <div className="card-actions rounded-btn">
+              <SocialLinks socials={socials} />
             </div>
           </div>
         </div>

web/src/components/ContactCard/ContactCardCell/ContactCardCell.tsx

@@ -1,9 +1,14 @@
-import type { FindPortrait, FindPortraitVariables } from 'types/graphql'
-
 import type {
-  TypedDocumentNode,
-  CellFailureProps,
-  CellSuccessProps,
+  ContactCardPortrait,
+  ContactCardPortraitVariables,
+} from 'types/graphql'
+
+import { routes } from '@redwoodjs/router'
+import {
+  type TypedDocumentNode,
+  type CellFailureProps,
+  type CellSuccessProps,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -11,25 +16,49 @@ import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
 import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
 import ContactCard from 'src/components/ContactCard/ContactCard/ContactCard'
 
-export const QUERY: TypedDocumentNode<FindPortrait, FindPortraitVariables> =
-  gql`
-    query ContactCardPortrait {
-      portrait: portrait {
-        fileId
-      }
+export const QUERY: TypedDocumentNode<
+  ContactCardPortrait,
+  ContactCardPortraitVariables
+> = gql`
+  query ContactCardPortrait {
+    portrait {
+      fileId
     }
-  `
+    socials {
+      id
+      name
+      type
+      username
+    }
+  }
+`
 
 export const Loading = () => <CellLoading />
 
 export const Empty = () => <CellEmpty />
 
-export const Failure = ({ error }: CellFailureProps<FindPortrait>) => (
+export const Failure = ({ error }: CellFailureProps<ContactCardPortrait>) => (
   <CellFailure error={error} />
 )
 
 export const Success = ({
   portrait,
-}: CellSuccessProps<FindPortrait, FindPortraitVariables>) => (
-  <ContactCard portraitUrl={portrait.fileId} />
+  socials,
+}: CellSuccessProps<ContactCardPortrait, ContactCardPortraitVariables>) => (
+  <>
+    <Metadata
+      title="Contact"
+      og={{
+        title: 'Contact',
+        type: 'website',
+        image: {
+          url: portrait.fileId,
+          type: 'image/webp',
+          alt: `${process.env.FIRST_NAME} ${process.env.LAST_NAME}`,
+        },
+        url: routes.contact(),
+      }}
+    />
+    <ContactCard portraitUrl={portrait.fileId} socials={socials} />
+  </>
 )

web/src/components/PDF/PDF.tsx

@@ -1,19 +1,50 @@
+import { useState } from 'react'
+
+import { mdiOpenInNew } from '@mdi/js'
+import Icon from '@mdi/react'
+import { Document, Page as PdfPage, pdfjs } from 'react-pdf'
+import 'react-pdf/dist/Page/AnnotationLayer.css'
+import 'react-pdf/dist/Page/TextLayer.css'
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString()
+
 interface PDFProps {
   url: string
   form?: boolean
 }
 
-const PDF = ({ url, form = false }: PDFProps) => (
-  <embed
-    src={url}
-    title="PDF"
-    type="application/pdf"
-    style={{
-      width: 'calc(100vw - 1rem)',
-      height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
-    }}
-    className="rounded-xl"
-  />
-)
+const PDF = ({ url, form = false }: PDFProps) => {
+  const [numPages, setNumPages] = useState<number>(0)
+  function onLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages)
+  }
+
+  return (
+    <div
+      className="overflow-y-auto flex justify-center"
+      style={{
+        width: 'calc(100vw - 1rem)',
+        height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
+      }}
+    >
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed top-20 left-0 z-10 m-2 p-2 rounded-xl btn btn-square btn-ghost shadow-lg"
+      >
+        <Icon path={mdiOpenInNew} size={1} className="text-gray-600" />
+      </a>
+      <Document file={url} onLoadSuccess={onLoadSuccess}>
+        {Array.from({ length: numPages }, (_, i) => (
+          <PdfPage key={i} pageNumber={i + 1} width={800} />
+        ))}
+      </Document>
+    </div>
+  )
+}
 
 export default PDF

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -127,14 +127,13 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
     )
   else
     return (
-      <div className="mx-auto w-fit space-y-2">
+      <div className="mx-auto max-w-prose space-y-2">
         {!fileId ? (
           <>
             <Uploader
               onComplete={onUploadComplete}
-              width="22rem"
-              height="34.5rem"
-              className="flex justify-center"
+              width="auto"
+              height="30rem"
             />
             <p className="text-center">
               High quality, 4:5 aspect ratio image recommended

web/src/components/Project/AdminProject/AdminProject.tsx

@@ -46,29 +46,28 @@ const AdminProject = ({ project }: Props) => {
   }
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex justify-center">
       <div>
         <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
           <table className="table">
             <thead className="bg-base-200 font-syne">
               <tr>
-                <th className="w-0">
+                <th colSpan={2}>
                   Project {project.id}: {project.title}
                 </th>
-                <th>&nbsp;</th>
               </tr>
             </thead>
             <tbody>
               <tr>
-                <th>ID</th>
+                <th className="text-right">ID</th>
                 <td>{project.id}</td>
               </tr>
               <tr>
-                <th>Title</th>
+                <th className="text-right">Title</th>
                 <td>{project.title}</td>
               </tr>
               <tr>
-                <th>Description</th>
+                <th className="text-right">Description</th>
                 <td>
                   <article className="prose">
                     {parseHtml(project.description)}
@@ -76,11 +75,11 @@ const AdminProject = ({ project }: Props) => {
                 </td>
               </tr>
               <tr>
-                <th>Date</th>
+                <th className="text-right">Date</th>
                 <td>{timeTag(project.date)}</td>
               </tr>
               <tr>
-                <th>Images</th>
+                <th className="text-right">Images</th>
                 <td>
                   <div className="flex flex-wrap gap-2">
                     {project.images.map((image, i) => (
@@ -88,7 +87,7 @@ const AdminProject = ({ project }: Props) => {
                         key={i}
                         href={image}
                         target="_blank"
-                        className="btn btn-sm btn-square"
+                        className={`btn btn-sm btn-square ${i === 0 && 'btn-primary'}`}
                         rel="noreferrer"
                       >
                         {i + 1}
@@ -98,7 +97,7 @@ const AdminProject = ({ project }: Props) => {
                 </td>
               </tr>
               <tr>
-                <th>Tags</th>
+                <th className="text-right">Tags</th>
                 <td>
                   <div className="flex flex-wrap gap-2">
                     {project.tags.map((tag, i) => (
@@ -120,19 +119,30 @@ const AdminProject = ({ project }: Props) => {
                 </td>
               </tr>
               <tr>
-                <th>Links</th>
+                <th className="text-right">Links</th>
                 <td>
                   <div className="flex flex-wrap gap-2">
                     {project.links.map((link, i) => (
-                      <a
-                        href={link}
-                        target="_blank"
-                        className="badge badge-ghost text-nowrap"
-                        key={i}
-                        rel="noreferrer"
-                      >
-                        {link}
-                      </a>
+                      <>
+                        <a
+                          href={link}
+                          target="_blank"
+                          className="hidden sm:flex badge badge-ghost text-nowrap"
+                          key={i}
+                          rel="noreferrer"
+                        >
+                          {link}
+                        </a>
+                        <a
+                          href={link}
+                          target="_blank"
+                          className="btn btn-sm btn-square sm:hidden"
+                          key={i}
+                          rel="noreferrer"
+                        >
+                          {i + 1}
+                        </a>
+                      </>
                     ))}
                   </div>
                 </td>

web/src/components/Project/EditProjectCell/EditProjectCell.tsx

@@ -73,12 +73,12 @@ export const Success = ({ project }: CellSuccessProps<EditProjectById>) => {
   ) => updateProject({ variables: { id, input } })
 
   return (
-    <div className="flex w-full justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
-        <table className="table w-80">
+    <div className="flex mx-auto max-w-prose justify-center">
+      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
+        <table className="table">
           <thead className="bg-base-200 font-syne">
             <tr>
-              <th className="w-0">Edit Project {project.id}</th>
+              <th>Edit Project {project.id}</th>
             </tr>
           </thead>
           <tbody>

web/src/components/Project/NewProject/NewProject.tsx

@@ -38,9 +38,9 @@ const NewProject = () => {
     createProject({ variables: { input } })
 
   return (
-    <div className="flex w-full justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
-        <table className="table w-80">
+    <div className="flex mx-auto max-w-prose justify-center">
+      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
+        <table className="table">
           <thead className="bg-base-200 font-syne">
             <tr>
               <th>New Project</th>

web/src/components/Project/Project/Project.tsx

@@ -69,20 +69,23 @@ const Project = ({ project }: Props) => {
             </div>
           </>
         )}
-        <h2 className="sm:hidden font-bold text-3xl text-center">Images</h2>
+        {project.images.length > 0 && (
+          <h2 className="sm:hidden font-bold text-3xl text-center">Images</h2>
+        )}
       </div>
-      <div className="flex flex-wrap gap-4 items-center pt-8 justify-center">
-        {project.images.map((image, i) => (
-          <a
-            href={image}
-            target="_blank"
-            rel="noreferrer"
-            key={i}
-            className="rounded-xl"
-          >
-            <img src={image} alt="" className="rounded-xl" />
-          </a>
-        ))}
+      <div className="flex flex-wrap gap-4 pt-8 justify-center h-fit sm:p-8">
+        {project.images.length > 0 &&
+          project.images.map((image, i) => (
+            <a
+              href={image}
+              target="_blank"
+              rel="noreferrer"
+              key={i}
+              className="rounded-box"
+            >
+              <img src={image} alt="" className="rounded-xl" />
+            </a>
+          ))}
       </div>
     </div>
   )

web/src/components/Project/ProjectCell/ProjectCell.tsx

@@ -1,9 +1,11 @@
 import type { FindProjectById, FindProjectByIdVariables } from 'types/graphql'
 
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
+import { routes } from '@redwoodjs/router'
+import {
+  type CellSuccessProps,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -40,5 +42,23 @@ export const Failure = ({
 export const Success = ({
   project,
 }: CellSuccessProps<FindProjectById, FindProjectByIdVariables>) => (
-  <Project project={project} />
+  <>
+    <Metadata
+      title={project.title}
+      og={{
+        title: project.title,
+        type: 'website',
+        image:
+          project.images.length > 0
+            ? {
+                url: project.images[0],
+                type: 'image/webp',
+                alt: 'Image 1',
+              }
+            : undefined,
+        url: routes.project({ id: project.id }),
+      }}
+    />
+    <Project project={project} />
+  </>
 )

web/src/components/Project/ProjectForm/ProjectForm.tsx

@@ -119,7 +119,7 @@ const ProjectForm = (props: ProjectFormProps) => {
     <Form<FormProject>
       onSubmit={onSubmit}
       error={props.error}
-      className="space-y-2 w-80"
+      className="space-y-2"
     >
       <Label name="title" className="form-control w-full">
         <Label
@@ -242,7 +242,14 @@ const ProjectForm = (props: ProjectFormProps) => {
                       <img src={fileId} alt={i.toString()} />
                     </figure>
                     <div className="card-body p-2 rounded-xl">
-                      <div className="card-actions rounded-md justify-end">
+                      <div
+                        className={`card-actions rounded-md ${i === 0 ? 'justify-between' : 'justify-end'}`}
+                      >
+                        {i === 0 && (
+                          <div className="btn btn-sm shadow-xl no-animation">
+                            Cover Image
+                          </div>
+                        )}
                         <button
                           type="button"
                           className="btn btn-square btn-sm btn-error shadow-xl"
@@ -261,9 +268,8 @@ const ProjectForm = (props: ProjectFormProps) => {
             {appendUploader && (
               <Uploader
                 onComplete={onUploadComplete}
-                width="20rem"
+                width="auto"
                 height="30rem"
-                className="flex justify-center"
                 maxFiles={10}
                 disabled={props.loading}
               />
@@ -272,9 +278,8 @@ const ProjectForm = (props: ProjectFormProps) => {
         ) : (
           <Uploader
             onComplete={onUploadComplete}
-            width="20rem"
+            width="auto"
             height="30rem"
-            className="flex justify-center pt-3"
             maxFiles={10}
             disabled={props.loading}
           />