feat: complete website redesign

.github/workflows/linting.yml

@@ -9,7 +9,16 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Biome
-        uses: biomejs/setup-biome@v2
-      - name: Run Biome
-        run: biome ci .
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Run oxlint
+        run: pnpm oxlint
+      - name: Run oxfmt
+        run: pnpm oxfmt

.impeccable.md

@@ -0,0 +1,29 @@
+## Design Context
+
+### Users
+
+A mixed audience of potential clients (gaming/Minecraft industry), employers, fellow developers, and the broader community. Visitors are evaluating Stella's work, personality, and technical ability. They want to quickly understand what she does, see compelling examples, and get a sense of who she is as a person.
+
+### Brand Personality
+
+**Warm, approachable, fun.** The site should feel like meeting someone genuinely enthusiastic about their craft. Not corporate, not cold — personality shines through in every detail. Think: a friend showing you their coolest work over coffee.
+
+### Aesthetic Direction
+
+- **Visual tone:** Portfolio showcase — image-heavy, visual storytelling, project cards that invite exploration
+- **Typography:** Instrument Serif for headings (editorial warmth), Switzer for body (clean readability)
+- **Color:** Purple primary (#9145FF) is the brand identity. Blue (#0085FF) and yellow (#FAC230) as playful accents. Both light and dark themes supported.
+- **References:** marijanapav.com (primary inspiration), raffi.zip, dzrgo.com, loganliffick.com, danielsun.space, emilkowal.ski, jakub.kr, benissen.com — all share: strong visual identity, personality-forward design, generous imagery, thoughtful typography, and layouts that feel curated rather than templated
+- **Anti-patterns:** Generic SaaS/template looks, overly minimal "developer portfolio" energy, cookie-cutter card grids without personality
+
+### Design Principles
+
+1. **Show, don't tell** — Lead with visuals. Images, videos, and interactive elements communicate more than paragraphs. Every section should have a strong visual anchor.
+
+2. **Personality in the details** — Small touches (twinkling stars, cat photos, playful copy) make the site memorable. Don't sand these away for "professionalism."
+
+3. **Warmth over polish** — Prefer designs that feel human and inviting over those that feel cold and perfect. Rounded edges, warm tones, approachable typography.
+
+4. **Curated, not comprehensive** — Show the best work prominently rather than listing everything equally. Quality of presentation over quantity of content.
+
+5. **Accessible by default** — WCAG AA minimum. Good contrast ratios, keyboard navigation, screen reader support. Accessibility is not optional.

.oxfmtrc.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "semi": true,
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "insertFinalNewline": true,
+  "sortTailwindcss": {
+    "stylesheet": "src/app/globals.css",
+    "functions": ["clsx", "cva", "cn"]
+  },
+  "ignorePatterns": [".claude", "**/.next", "**/.velite"]
+}

.oxlintrc.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["nextjs", "typescript", "react", "jsx-a11y", "import", "unicorn", "oxc", "promise", "node"],
+  "categories": {
+    "correctness": "warn",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "builtin": true
+  },
+  "options": {
+    "reportUnusedDisableDirectives": "warn"
+  },
+  "ignorePatterns": [".claude", ".next/**", ".velite/**", "out/**", "build/**", "dist/**"],
+  "rules": {
+    // TypeScript
+    "typescript/consistent-type-definitions": ["error", "type"],
+    "typescript/no-explicit-any": "error",
+    "typescript/no-inferrable-types": "error",
+    "typescript/no-duplicate-enum-values": "error",
+    "typescript/no-import-type-side-effects": "error",
+    "typescript/prefer-includes": "error",
+    "typescript/only-throw-error": "error",
+    "typescript/return-await": "error",
+    "typescript/no-deprecated": "warn",
+
+    // Correctness
+    "no-unused-vars": "warn",
+    "react-hooks/exhaustive-deps": "warn",
+    "array-callback-return": "error",
+    "no-self-compare": "error",
+    "no-constructor-return": "error",
+    "no-promise-executor-return": "error",
+    "eqeqeq": "error",
+    "react/rules-of-hooks": "error",
+
+    // Suspicious
+    "no-alert": "error",
+    "no-template-curly-in-string": "error",
+    "no-shadow-restricted-names": "error",
+    "no-unused-expressions": "error",
+    "no-empty": "error",
+    "no-proto": "error",
+    "no-return-assign": "error",
+    "no-multi-assign": "error",
+    "unicorn/no-document-cookie": "error",
+
+    // Unicorn
+    "unicorn/prefer-set-has": "error",
+    "unicorn/no-new-array": "warn",
+    "unicorn/no-useless-spread": "warn",
+    "unicorn/no-single-promise-in-promise-methods": "warn",
+    "unicorn/prefer-node-protocol": "error",
+    "unicorn/no-typeof-undefined": "error",
+    "unicorn/no-useless-promise-resolve-reject": "error",
+    "unicorn/prefer-array-some": "error",
+    "unicorn/no-object-as-default-parameter": "warn",
+
+    // Noisy rules - disable
+    "no-shadow": "off",
+    "no-await-in-loop": "off",
+    "unicorn/no-array-sort": "off",
+    "unicorn/prefer-add-event-listener": "off",
+    "unicorn/require-post-message-target-origin": "off",
+    "import/no-unassigned-import": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "typescript/no-unsafe-type-assertion": "off",
+
+    // File size
+    "max-lines": ["warn", { "max": 300, "skipBlankLines": true, "skipComments": true }],
+
+    // Performance
+    "oxc/no-barrel-file": "error",
+    "import/no-cycle": "off",
+
+    // Next.js
+    "@next/next/no-html-link-for-pages": "error",
+    "@next/next/no-sync-scripts": "error",
+    "@next/next/inline-script-id": "error",
+    "@next/next/no-assign-module-variable": "error",
+    "@next/next/no-document-import-in-page": "error",
+    "@next/next/no-duplicate-head": "error",
+    "@next/next/no-head-import-in-document": "error",
+    "@next/next/no-script-component-in-head": "error",
+    "@next/next/no-img-element": "off",
+
+    // React
+    "react/jsx-no-target-blank": "off",
+    "react/no-unknown-property": "off",
+    "react/no-unsafe": "off",
+    "react/react-in-jsx-scope": "off",
+
+    // jsx-a11y
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/aria-props": "warn",
+    "jsx-a11y/aria-proptypes": "warn",
+    "jsx-a11y/aria-unsupported-elements": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "warn"
+  }
+}

README.md

@@ -1,4 +1,3 @@
 # koding.dev
 
 Hello, world!
-

content/clients/lilypad/meta.json

@@ -2,7 +2,9 @@
   "slug": "lilypad",
   "name": "Lilypad.gg",
   "description": "Development of the Lilypad.gg website, billing panel & dashboard. Built with NextJS, Prisma, NextAuth, and TailwindCSS.",
+  "role": "Web Developer",
   "href": "https://lilypad.gg",
+  "wordmark": "./wordmark.svg",
   "avatar": "./avatar.png",
   "banner": "./banner.png",
   "start": "Jul 2024",

content/clients/netherite/meta.json

@@ -2,6 +2,7 @@
   "slug": "netherite",
   "name": "Netherite",
   "description": "Highly-scalable, high-throughput Minecraft development, built with Kubernetes & a microservice architecture.",
+  "role": "Full Stack Developer",
   "href": "https://netherite.gg",
   "avatar": "./avatar.png",
   "banner": "./banner.png",

content/clients/partyhat/meta.json

@@ -2,6 +2,7 @@
   "slug": "partyhat",
   "name": "Partyhat Productions",
   "description": "Lead server developer for the Masayoshi Games Twitch Rivals event, and an accompanying Minecraft network.",
+  "role": "Game Server Developer",
   "href": "https://partyhat.dev",
   "avatar": "./avatar.png",
   "banner": "./banner.png",