UI tweaks on admin side

.env.defaults

@@ -18,8 +18,15 @@ PRISMA_HIDE_UPDATE_MESSAGE=true
 FIRST_NAME=firstname
 LAST_NAME=lastname
 
-GMAIL=example@gmail.com
+COUNTRY=US
-GMAIL_SMTP_PASSWORD=chan geme xyza bcde
+
+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

.env.example

@@ -6,8 +6,15 @@
 FIRST_NAME=firstname
 LAST_NAME=lastname
 
-GMAIL=example@gmail.com
+COUNTRY=US
-GMAIL_SMTP_PASSWORD=chan geme xyza bcde
+
+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

Dockerfile

@@ -43,8 +43,13 @@ ARG ADDRESS_DEV
 ARG DOMAIN
 ARG API_DOMAIN
 ARG MAX_HTTP_CONNECTIONS_PER_MINUTE
-ARG GMAIL
+ARG SMTP_HOST
-ARG GMAIL_SMTP_PASSWORD
+ARG SMTP_PORT
+ARG SMTP_SECURE
+ARG SMTP_USER
+ARG SMTP_PASSWORD
+ARG EMAIL_FROM
+ARG EMAIL_TO
 ARG FIRST_NAME
 ARG LAST_NAME
 

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
+### SMTP
-1. Go to your Google [account dashboard](https://myaccount.google.com)
+You will need credentials to authorize sending Email, instructions vary depending on provider (Gmail, Hotmail, etc).
-2. Go to Security > 2-Step Verification > App Passwords > Create a new app password
-3. Copy the 16 character password
 ### [Docker Compose](./docker-compose.yml)
 ```yaml
 version: '3.8'
@@ -23,21 +21,29 @@ services:
       - 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
+      - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
-      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - 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
+      - 8910:8910                                           # Web
-      - '8911:8911' # API
+      - 8911:8911                                           # API
     depends_on:
       - db
+    volumes:
+      - files:/home/node/app/api/files_prod
     command: >
       /bin/sh -c "
       yarn rw build &&
@@ -50,23 +56,27 @@ services:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
-      POSTGRES_USER: redwood
+      - POSTGRES_USER=redwood
-      POSTGRES_PASSWORD: redwood
+      - POSTGRES_PASSWORD=changeme
-      POSTGRES_DB: portfolio
+      - POSTGRES_DB=portfolio
-    ports:
-      - '5432:5432'
     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
+  - If you correctly configured [SMTP](#smtp), you should receive an Email from [`EMAIL_FROM`](#docker-compose) to [`EMAIL_TO`](#docker-compose)
-  - It contains the link needed to change your password
+  - 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": "8.4.0",
-    "@redwoodjs/api-server": "8.3.0",
+    "@redwoodjs/api-server": "8.4.0",
-    "@redwoodjs/auth-dbauth-api": "8.3.0",
+    "@redwoodjs/auth-dbauth-api": "8.4.0",
-    "@redwoodjs/graphql-server": "8.3.0",
+    "@redwoodjs/graphql-server": "8.4.0",
     "@tus/file-store": "^1.4.0",
     "@tus/server": "^1.7.0",
+    "country-flag-icons": "^1.5.13",
     "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,
+    user: process.env.SMTP_USER,
-    pass: process.env.GMAIL_SMTP_PASSWORD,
+    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/server.ts

@@ -10,6 +10,13 @@ import { createServer } from '@redwoodjs/api-server'
 import { logger } from 'src/lib/logger'
 import { handleTusUpload } from 'src/lib/tus'
 ;(async () => {
+  const { hasFlag } = await import('country-flag-icons')
+
+  if (!hasFlag(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'
+    )
+
   const server = await createServer({
     logger,
     configureApiServer: async (server) => {

docker-compose.yml

@@ -9,21 +9,29 @@ services:
       - 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
+      - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
-      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - 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
+      - 8910:8910                                           # Web
-      - '8911:8911' # API
+      - 8911:8911                                           # API
     depends_on:
       - db
+    volumes:
+      - files:/home/node/app/api/files_prod
     command: >
       /bin/sh -c "
       yarn rw build &&
@@ -36,13 +44,12 @@ services:
     container_name: portfolio-db
     image: postgres:16-bookworm
     environment:
-      POSTGRES_USER: redwood
+      - POSTGRES_USER=redwood
-      POSTGRES_PASSWORD: redwood
+      - POSTGRES_PASSWORD=changeme
-      POSTGRES_DB: portfolio
+      - POSTGRES_DB=portfolio
-    ports:
-      - '5432:5432'
     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/auth-dbauth-setup": "8.4.0",
-    "@redwoodjs/core": "8.3.0",
+    "@redwoodjs/core": "8.4.0",
-    "@redwoodjs/project-config": "8.3.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", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
 [generate]
   tests = false
   stories = false

scripts/seed.ts

@@ -9,15 +9,15 @@ export default async () => {
   try {
     const admin = {
       username: 'admin',
-      email: process.env.GMAIL,
+      email: process.env.EMAIL_TO,
-      password: process.env.GMAIL_SMTP_PASSWORD,
+      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,6 +30,14 @@ 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()
 

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/auth-dbauth-web": "8.4.0",
-    "@redwoodjs/forms": "8.3.0",
+    "@redwoodjs/forms": "8.4.0",
-    "@redwoodjs/router": "8.3.0",
+    "@redwoodjs/router": "8.4.0",
-    "@redwoodjs/web": "8.3.0",
+    "@redwoodjs/web": "8.4.0",
-    "@redwoodjs/web-server": "8.3.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,6 +35,7 @@
     "@uppy/react": "^4.0.1",
     "@uppy/tus": "^4.0.0",
     "@uppy/webcam": "^4.0.1",
+    "country-flag-icons": "^1.5.13",
     "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
     "react": "18.3.1",
@@ -44,7 +45,7 @@
     "react-typed": "^2.0.12"
   },
   "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

@@ -35,7 +35,7 @@ const Routes = () => {
           <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/ColorPicker/ColorPicker.tsx

@@ -9,15 +9,12 @@ interface ColorPickerProps {
   setColor: React.Dispatch<React.SetStateAction<string>>
 }
 
-const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
+const ColorPicker = ({ color, setColor }: ColorPickerProps) => (
-  return (
+  <div className="flex flex-col space-y-2 bg-base-100 p-2 rounded-xl">
-    <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">
-      <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">
+      <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>
@@ -40,7 +37,13 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
         className="btn btn-square btn-sm"
         onClick={async () => {
           try {
-              setColor(await navigator.clipboard.readText())
+            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`)
           }
@@ -51,6 +54,5 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
     </div>
   </div>
 )
-}
 
 export default ColorPicker

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

@@ -1,12 +1,15 @@
 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 ContactCard = ({ portraitUrl, socials }: ContactCardProps) => {
   const [width, setWidth] = useState()
   const [height, setHeight] = useState()
 
@@ -68,7 +71,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
             </h2>
             <p className="p-2"></p>
             <div className="card-actions">
-              <SocialLinksCell />
+              <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,
+  ContactCardPortrait,
-  CellFailureProps,
+  ContactCardPortraitVariables,
-  CellSuccessProps,
+} 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,12 +16,20 @@ 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> =
+export const QUERY: TypedDocumentNode<
-  gql`
+  ContactCardPortrait,
+  ContactCardPortraitVariables
+> = gql`
   query ContactCardPortrait {
-      portrait: portrait {
+    portrait {
       fileId
     }
+    socials {
+      id
+      name
+      type
+      username
+    }
   }
 `
 
@@ -24,12 +37,28 @@ 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>) => (
+  socials,
-  <ContactCard portraitUrl={portrait.fileId} />
+}: 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,37 @@
+import { useState } from 'react'
+
+import { mdiAlertOutline } from '@mdi/js'
+import Icon from '@mdi/react'
+
 interface PDFProps {
   url: string
   form?: boolean
 }
 
-const PDF = ({ url, form = false }: PDFProps) => (
+const PDF = ({ url, form = false }: PDFProps) => {
-  <embed
+  const [error, setError] = useState<boolean>(false)
+
+  return error ? (
+    <div role="alert" className="alert alert-warning">
+      <Icon path={mdiAlertOutline} className="size-7" />
+      <span>
+        Could not load PDF, this is common in in-app browsers, try opening this
+        page in a regular browser
+      </span>
+    </div>
+  ) : (
+    <iframe
       src={url}
       title="PDF"
-    type="application/pdf"
       style={{
         width: 'calc(100vw - 1rem)',
         height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
       }}
       className="rounded-xl"
+      onError={() => setError(true)}
+      onLoad={() => setError(false)}
     />
   )
+}
 
 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"
+              width="auto"
-              height="34.5rem"
+              height="30rem"
-              className="flex justify-center"
             />
             <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) => (
@@ -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"
+                          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="flex mx-auto max-w-prose justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
+      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
-        <table className="table w-80">
+        <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="flex mx-auto max-w-prose justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
+      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
-        <table className="table w-80">
+        <table className="table">
           <thead className="bg-base-200 font-syne">
             <tr>
               <th>New Project</th>

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

@@ -69,10 +69,13 @@ const Project = ({ project }: Props) => {
             </div>
           </>
         )}
+        {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">
+      <div className="flex flex-wrap gap-4 pt-8 justify-center h-fit">
-        {project.images.map((image, i) => (
+        {project.images.length > 0 &&
+          project.images.map((image, i) => (
             <a
               href={image}
               target="_blank"

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

@@ -1,9 +1,11 @@
 import type { FindProjectById, FindProjectByIdVariables } from 'types/graphql'
 
-import type {
+import { routes } from '@redwoodjs/router'
-  CellSuccessProps,
+import {
-  CellFailureProps,
+  type CellSuccessProps,
-  TypedDocumentNode,
+  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>) => (
+  <>
+    <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
@@ -261,9 +261,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 +271,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}
           />

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

@@ -1,9 +1,11 @@
 import type { FindProjects, FindProjectsVariables } from 'types/graphql'
 
-import type {
+import { routes } from '@redwoodjs/router'
-  CellSuccessProps,
+import {
-  CellFailureProps,
+  type CellSuccessProps,
-  TypedDocumentNode,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -40,5 +42,16 @@ export const Failure = ({ error }: CellFailureProps<FindProjectsVariables>) => (
 export const Success = ({
   projects,
 }: CellSuccessProps<FindProjects, FindProjectsVariables>) => (
+  <>
+    <Metadata
+      title="Projects"
+      og={{
+        title: 'Projects',
+        type: 'website',
+        description: `${projects.length} projects`,
+        url: routes.projects(),
+      }}
+    />
     <ProjectsShowcase projects={projects} />
+  </>
 )

web/src/components/Resume/ResumeCell/ResumeCell.tsx

@@ -1,9 +1,11 @@
 import type { FindResume, FindResumeVariables } from 'types/graphql'
 
-import type {
+import { routes } from '@redwoodjs/router'
-  CellSuccessProps,
+import {
-  CellFailureProps,
+  type CellSuccessProps,
-  TypedDocumentNode,
+  type CellFailureProps,
+  type TypedDocumentNode,
+  Metadata,
 } from '@redwoodjs/web'
 
 import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
@@ -29,5 +31,15 @@ export const Failure = ({ error }: CellFailureProps<FindResumeVariables>) => (
 export const Success = ({
   resume,
 }: CellSuccessProps<FindResume, FindResumeVariables>) => (
+  <>
+    <Metadata
+      title="Contact"
+      og={{
+        title: 'Resume',
+        type: 'website',
+        url: routes.resume(),
+      }}
+    />
     <Resume resume={resume} />
+  </>
 )

web/src/components/Resume/ResumeForm/ResumeForm.tsx

@@ -123,14 +123,13 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
     )
   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"
+              width="auto"
-              height="11.5rem"
+              height="30rem"
-              className="flex justify-center"
               type="pdf"
             />
           </>

web/src/components/RichTextEditor/RichTextEditor.tsx

@@ -43,7 +43,8 @@ const RichTextEditor = ({ editor }: RichTextEditorProps) => {
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex flex-wrap gap-2 justify-center">
+      <div className="flex justify-center flex-wrap gap-2">
+        <div className="flex gap-2 h-min justify-center">
           <button
             type="button"
             className={`btn btn-sm btn-square ${editor.isActive('link') ? 'btn-primary' : ''}`}
@@ -97,7 +98,7 @@ const RichTextEditor = ({ editor }: RichTextEditorProps) => {
             <Icon path={mdiRedoVariant} className="size-5" />
           </button>
         </div>
-      <div className="flex flex-wrap gap-2 justify-center">
+        <div className="flex gap-2 h-min justify-center">
           <button
             type="button"
             className={`btn btn-sm btn-square ${editor.isActive('bold') ? 'btn-primary' : ''}`}
@@ -154,9 +155,10 @@ const RichTextEditor = ({ editor }: RichTextEditorProps) => {
             <Icon path={mdiFormatQuoteClose} className="size-5" />
           </button>
         </div>
+      </div>
       <EditorContent
         editor={editor}
-        className="textarea textarea-bordered font-normal prose"
+        className="textarea textarea-bordered font-normal prose max-w-full"
       />
     </div>
   )

web/src/components/Social/EditSocialCell/EditSocialCell.tsx

@@ -71,9 +71,9 @@ export const Success = ({ social }: CellSuccessProps<EditSocialById>) => {
   }
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
+      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
-        <table className="table w-80">
+        <table className="table">
           <thead className="bg-base-200 font-syne">
             <tr>
               <th className="w-0">Edit Social {social.id}</th>

web/src/components/Social/NewSocial/NewSocial.tsx

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

web/src/components/Social/Social/Social.tsx

@@ -44,31 +44,32 @@ const Social = ({ social }: Props) => {
   }
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
-      <div className="w-80">
+      <div className="w-full">
         <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
           <table className="table">
             <thead className="bg-base-200 font-syne">
-              <th className="w-0">
+              <tr>
+                <th colSpan={2}>
                   Social {social.id}: {social.name}
                 </th>
-              <th>&nbsp;</th>
+              </tr>
             </thead>
             <tbody>
               <tr>
-                <th>ID</th>
+                <th className="text-right">ID</th>
                 <td>{social.id}</td>
               </tr>
               <tr>
-                <th>Type</th>
+                <th className="text-right">Type</th>
                 <td>{getLogoComponent(social.type)}</td>
               </tr>
               <tr>
-                <th>Name</th>
+                <th className="text-right">Name</th>
                 <td>{social.name}</td>
               </tr>
               <tr>
-                <th>Username</th>
+                <th className="text-right">Username</th>
                 <td>{social.username}</td>
               </tr>
             </tbody>

web/src/components/Social/SocialCell/SocialCell.tsx

@@ -33,6 +33,6 @@ export const Failure = ({
 
 export const Success = ({
   social,
-}: CellSuccessProps<FindSocialById, FindSocialByIdVariables>) => {
+}: CellSuccessProps<FindSocialById, FindSocialByIdVariables>) => (
-  return <Social social={social} />
+  <Social social={social} />
-}
+)

web/src/components/Social/SocialForm/SocialForm.tsx

@@ -38,6 +38,7 @@ const types: FormSocial['type'][] = [
   'discord',
   'twitch',
   'linkedin',
+  'matrix',
   'github',
   'gitea',
   'forgejo',
@@ -52,6 +53,15 @@ const types: FormSocial['type'][] = [
 const urlHandles: FormSocial['type'][] = ['custom', 'gitea', 'forgejo']
 
 const SocialForm = (props: SocialFormProps) => {
+  const emailRegex =
+    /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)(\.[a-zA-Z]{2,5}){1,2}$/
+
+  const phoneRegex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/
+  const urlRegex =
+    /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i
+  const matrixRegex =
+    /^([#@][a-zA-Z0-9_\-\.]+):([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,})$/
+
   const [type, setType] = useState<FormSocial['type']>(
     props.social?.type ?? 'x'
   )
@@ -89,7 +99,7 @@ const SocialForm = (props: SocialFormProps) => {
     <Form<FormSocial>
       onSubmit={onSubmit}
       error={props.error}
-      className="h-128 max-w-80 space-y-2"
+      className="h-128 space-y-2"
     >
       <Label name="name" className="form-control w-full">
         <Label
@@ -177,17 +187,20 @@ const SocialForm = (props: SocialFormProps) => {
               pattern: {
                 value:
                   type == 'email'
-                    ? /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)(\.[a-zA-Z]{2,5}){1,2}$/
+                    ? emailRegex
                     : type == 'phone'
-                      ? /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/
+                      ? phoneRegex
-                      : urlHandles.includes(type) &&
+                      : urlHandles.includes(type)
-                        /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i,
+                        ? urlRegex
+                        : type == 'matrix' && matrixRegex,
                 message: `Invalid ${
                   urlHandles.includes(type)
                     ? 'URL'
                     : type == 'phone'
-                      ? 'Phone Number'
+                      ? 'phone number'
-                      : type == 'email' && 'Email'
+                      : type == 'email'
+                        ? 'Email'
+                        : type == 'matrix' && 'Matrix identifier'
                 }`,
               },
             }}

web/src/components/Social/SocialLinks/SocialLinks.tsx

@@ -1,8 +1,8 @@
-import { FindSocials } from 'types/graphql'
+import { ContactCardPortrait } from 'types/graphql'
 
 import { baseUrls, getLogoComponent, sortOrder } from 'src/lib/handle'
 
-const SocialLinks = ({ socials }: FindSocials) => (
+const SocialLinks = ({ socials }: ContactCardPortrait) => (
   <div className={`grid max-w-68 grid-cols-[repeat(auto-fit,3rem)] gap-2`}>
     {[...socials]
       .sort((a, b) => sortOrder.indexOf(a.type) - sortOrder.indexOf(b.type))

web/src/components/Social/SocialLinksCell/SocialLinksCell.tsx

@@ -1,35 +0,0 @@
-import type { FindSocials, FindSocialsVariables } from 'types/graphql'
-
-import type {
-  CellSuccessProps,
-  CellFailureProps,
-  TypedDocumentNode,
-} from '@redwoodjs/web'
-
-import CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
-import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
-import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
-import SocialLinks from 'src/components/Social/SocialLinks/SocialLinks'
-
-export const QUERY: TypedDocumentNode<FindSocials, FindSocialsVariables> = gql`
-  query SocialsQuery {
-    socials {
-      id
-      name
-      type
-      username
-    }
-  }
-`
-
-export const Loading = () => <CellLoading />
-
-export const Empty = () => <CellEmpty />
-
-export const Failure = ({ error }: CellFailureProps<FindSocials>) => (
-  <CellFailure error={error} />
-)
-
-export const Success = ({ socials }: CellSuccessProps<FindSocials>) => (
-  <SocialLinks socials={socials} />
-)

web/src/components/Tag/EditTagCell/EditTagCell.tsx

@@ -59,8 +59,8 @@ export const Success = ({ tag }: CellSuccessProps<EditTagById>) => {
     updateTag({ variables: { id, input } })
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
+      <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>

web/src/components/Tag/NewTag/NewTag.tsx

@@ -34,8 +34,8 @@ const NewTag = () => {
   const onSave = (input: CreateTagInput) => createTag({ variables: { input } })
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
-      <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
+      <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>

web/src/components/Tag/Tag/Tag.tsx

@@ -42,8 +42,8 @@ const Tag = ({ tag }: Props) => {
   }
 
   return (
-    <div className="flex w-full justify-center">
+    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
-      <div className="w-80">
+      <div className="w-full">
         <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
           <table className="table">
             <thead className="bg-base-200 font-syne">
@@ -54,15 +54,15 @@ const Tag = ({ tag }: Props) => {
             </thead>
             <tbody>
               <tr>
-                <th>ID</th>
+                <th className="text-right">ID</th>
                 <td>{tag.id}</td>
               </tr>
               <tr>
-                <th>Tag</th>
+                <th className="text-right">Tag</th>
                 <td>{tag.tag}</td>
               </tr>
               <tr>
-                <th>Color</th>
+                <th className="text-right">Color</th>
                 <td>
                   <div
                     className="badge whitespace-nowrap"

web/src/components/Tag/TagForm/TagForm.tsx

@@ -35,7 +35,7 @@ const TagForm = (props: TagFormProps) => {
     <Form<FormTag>
       onSubmit={onSubmit}
       error={props.error}
-      className="max-w-56 space-y-2"
+      className="space-y-2"
     >
       <Label name="tag" className="form-control w-full">
         <Label

web/src/components/Tag/Tags/Tags.tsx

@@ -50,7 +50,7 @@ const TagsList = ({ tags }: FindTags) => {
             <th className="w-0">&nbsp;</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody className="overflow-y-scroll">
           {tags.map((tag, i) => {
             const actionButtons = (
               <>

web/src/components/Tag/TagsSelector/TagsSelector.tsx

@@ -26,7 +26,7 @@ const TagsSelector = ({
   }, [selectedTags, _tags])
 
   return (
-    <div className="w-80 space-y-2">
+    <div className="space-y-2">
       {tags.length > 0 && (
         <>
           <p className="font-semibold">Tags</p>

web/src/components/Title/AdminTitlesCell/AdminTitlesCell.tsx

@@ -29,9 +29,10 @@ export const Failure = ({
 }: CellFailureProps<AdminTitlesQueryVariables>) => <CellFailure error={error} />
 
 export const Success = ({ titles }: CellSuccessProps<AdminTitlesQuery>) => (
-  <div className="flex w-full justify-center">
+  <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
+    <div className="w-full">
       <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
-      <table className="table w-80">
+        <table className="table">
           <thead className="bg-base-200 font-syne">
             <tr>
               <th className="w-0">Titles</th>
@@ -47,4 +48,5 @@ export const Success = ({ titles }: CellSuccessProps<AdminTitlesQuery>) => (
         </table>
       </div>
     </div>
+  </div>
 )

web/src/components/Title/TitlesForm/TitlesForm.tsx

@@ -55,9 +55,9 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
     })
 
   return (
-    <Form onSubmit={onSubmit} className="max-w-80 space-y-2">
+    <Form onSubmit={onSubmit} className="space-y-2">
       <p className="text-center opacity-70">
-        The first one gets displayed for longer
+        The first title gets displayed for longer
       </p>
       {Array.from({ length: MAX_TITLES }).map((_, i) => (
         <Label key={i} name={`title${i}`} className="form-control w-full">

web/src/entry.client.tsx

@@ -1,3 +1,4 @@
+import { hasFlag } from 'country-flag-icons'
 import { hydrateRoot, createRoot } from 'react-dom/client'
 
 import App from 'src/App'
@@ -15,6 +16,11 @@ if (!redwoodAppElement)
       "exists in your 'web/src/index.html' file."
   )
 
+if (!hasFlag(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 (redwoodAppElement.children?.length > 0)
   hydrateRoot(redwoodAppElement, <App />)
 else {

web/src/index.css

@@ -23,3 +23,7 @@
 .ProseMirror:focus {
   outline: none;
 }
+
+.w-full .react-colorful {
+  width: auto;
+}

web/src/lib/handle.tsx

@@ -8,6 +8,7 @@ import {
   SiTiktok,
   SiYoutube,
   SiLinkedin,
+  SiMatrix,
   SiGithub,
   SiGitea,
   SiLeetcode,
@@ -33,6 +34,7 @@ export const baseUrls: Record<Handle, string> = {
   discord: 'https://discord.gg/',
   twitch: 'https://www.twitch.tv/',
   linkedin: 'https://www.linkedin.com/in/',
+  matrix: 'https://matrix.to/#/',
   github: 'https://github.com/',
   gitea: '',
   forgejo: '',
@@ -61,6 +63,7 @@ const logoComponents: Record<Handle, ReactElement> = {
   linkedin: (
     <SiLinkedin className="text-linkedin-light dark:text-linkedin-dark" />
   ),
+  matrix: <SiMatrix className="text-matrix-light dark:text-matrix-dark" />,
   github: <SiGithub className="text-github-light dark:text-github-dark" />,
   gitea: <SiGitea className="text-gitea-light dark:text-gitea-dark" />,
   forgejo: <SiForgejo className="text-forgejo-light dark:text-forgejo-dark" />,
@@ -80,6 +83,7 @@ export const sortOrder: Social['type'][] = [
   'phone',
   'email',
   'custom',
+  'matrix',
   'linkedin',
   'leetcode',
   'github',

web/src/pages/ContactPage/ContactPage.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { Metadata } from '@redwoodjs/web'
-
 import ContactCardCell from 'src/components/ContactCard/ContactCardCell'
 
 const ContactPage = () => {
@@ -29,13 +27,9 @@ const ContactPage = () => {
   }, [width, height])
 
   return (
-    <>
-      <Metadata title="Contact" />
-
     <div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
       <ContactCardCell />
     </div>
-    </>
   )
 }
 

web/src/pages/HomePage/HomePage.tsx

@@ -1,5 +1,6 @@
 import { mdiCompass, mdiContacts } from '@mdi/js'
 import Icon from '@mdi/react'
+import getUnicodeFlagIcon from 'country-flag-icons/unicode'
 
 import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
@@ -9,7 +10,15 @@ import { getLogoComponent } from 'src/lib/handle'
 
 const HomePage = () => (
   <>
-    <Metadata title="Home" />
+    <Metadata
+      title="Home"
+      og={{
+        title: `${process.env.FIRST_NAME} ${process.env.LAST_NAME}`,
+        description: 'Check out my portfolio!',
+        type: 'website',
+        url: routes.home(),
+      }}
+    />
 
     <div className="hero min-h-[calc(100vh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
@@ -44,6 +53,11 @@ const HomePage = () => (
         {getLogoComponent('gitea')}
       </a>
     </div>
+    <div className="fixed bottom-2 right-2 z-10">
+      <p className="btn btn-square text-xl">
+        {getUnicodeFlagIcon(process.env.COUNTRY)}
+      </p>
+    </div>
   </>
 )
 

web/src/pages/Project/ProjectPage/ProjectPage.tsx

@@ -1,5 +1,3 @@
-import { Metadata } from '@redwoodjs/web'
-
 import ProjectCell from 'src/components/Project/ProjectCell'
 
 interface ProjectPageProps {
@@ -7,13 +5,7 @@ interface ProjectPageProps {
 }
 
 const ProjectPage = ({ id }: ProjectPageProps) => {
-  return (
+  return <ProjectCell id={id} />
-    <>
-      <Metadata title="Project" />
-
-      <ProjectCell id={id} />
-    </>
-  )
 }
 
 export default ProjectPage

web/src/pages/Project/ProjectsPage/ProjectsPage.tsx

@@ -1,14 +1,10 @@
 import mobile from 'is-mobile'
 
-import { Metadata } from '@redwoodjs/web'
-
 import ProjectsShowcaseCell from 'src/components/Project/ProjectsShowcaseCell'
 
 const ProjectsPage = () => {
   return (
     <>
-      <Metadata title="Projects" />
-
       <div className="hero min-h-64">
         <div className="hero-content">
           <div className="max-w-md text-center">

web/src/pages/Resume/ResumePage/ResumePage.tsx

@@ -1,15 +1,7 @@
-import { Metadata } from '@redwoodjs/web'
-
 import ResumeCell from 'src/components/Resume/ResumeCell'
 
 const ResumePage = () => {
-  return (
+  return <ResumeCell />
-    <>
-      <Metadata title="Resume" />
-
-      <ResumeCell />
-    </>
-  )
 }
 
 export default ResumePage