Skip to content

Build quartzdev.gg portfolio with TanStack Start - #1

Merged
QarthO merged 19 commits into
mainfrom
portfolio-tanstack-start
Oct 26, 2026
Merged

QarthO merged 19 commits into
mainfrom
portfolio-tanstack-start

Conversation

@QarthO

@QarthO QarthO commented Oct 25, 2026 •

Copy link
Copy Markdown
Owner

Replaces the legacy Docusaurus site with a one-page TanStack Start portfolio for Derek (QarthO) at quartzdev.gg.

Design. Black, grays, and a deep redstone red, set in Geist, with square corners throughout and a faint, grainy red glow in the background. "Derek" is the large name with "aka QarthO. Based in Atlanta." beneath it, followed by a short intro and links showing each handle with its brand-colored icon: GitHub (QarthO), X (quartzdevgg), and Discord (qartho, linking to the quartzdev.gg server). On the right, the quartzdev mark (a power button) sits at the top of a redstone line. On page load the signal runs down the line once, and each lamp lights up: Kiln in its orange, Marco and Minecraft Software in Marco green, and side projects as a bare red lamp.

Projects:

  • Kiln is featured first, in a larger lamp with its own panel: "The panel for everything.", a full-width description, a "Get Kiln" button (kiln.site), and a "Source code" link (github.com/kiln-site/kiln).
  • Marco links to getbacktobiz.com.
  • Minecraft Software links to the Modrinth profile and uses the Modrinth logo.
  • Side projects ("Cool tech I build for fun: homelab tools, games, and more.") links to the GitHub repositories, with a bare lamp instead of a logo.

Logos use their own colors: the quartzdev tile, Kiln's orange mark, Marco's green tile, and Modrinth green. Social icons come from Simple Icons.

SEO and link previews. Title "Derek (QarthO) | quartzdev.gg", a search description, and shorter link-preview copy. Open Graph and Twitter tags use a short 1200×480 card styled after the Kiln and Marco cards; pnpm social-card regenerates it (and the PNG icons) from the brand SVGs with Geist text outlined. JSON-LD describes the site, profile page, and Person. Includes /sitemap.xml, robots.txt pointing to it, a web manifest, and a 404 page that returns status 404 with noindex.

Also includes Docker Compose for development, a production Docker image, /api/health, and reduced-motion handling. No CMS or database.

Validation:

  • TypeScript, ESLint, Prettier, and the production build pass.
  • Checked in the T3 preview browser at 1440×900, 1366×768, 1280×720, 1024×768, 768×1024, 390×844, 375×812, and 360×740: no scrolling and nothing off-screen at any size.
  • The production Docker image builds and serves the page, logos, and /api/health.

Tailnet preview: https://s02.tail3e4733.ts.net/

🤖 Generated with Claude Code

@QarthO QarthO changed the title Build minimal TanStack Start portfolio for quartzdev.gg Build five compact portfolio designs with live layout switcher Oct 25, 2026
Redstone, Console, Inventory, Poster, and Card replace the previous five.
Each takes its palette from QarthO's Minecraft skin (black suit, red tie),
has its own typeface, and fits without scrolling from 1440x900 to 360x740.
The switcher now keeps the choice in ?design= so the server renders the
selected design directly, and [ and ] step through them.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@QarthO QarthO changed the title Build five compact portfolio designs with live layout switcher Build quartzdev.gg portfolio with five switchable designs Oct 26, 2026
Keep only the Redstone design. "Derek" is now the large name with QarthO
beneath it, set in Geist. The quartzdev mark powers the redstone line, and
each lamp lights in its project's brand color. Kiln gets a featured panel
with Get Kiln and source links. Minecraft plugins now point to Modrinth,
and qHotkeys is replaced by Minecraft server consulting. All corners are
square and the background grid spans the full width.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@QarthO QarthO changed the title Build quartzdev.gg portfolio with five switchable designs Build quartzdev.gg portfolio with TanStack Start Oct 26, 2026
QarthO and others added 15 commits October 26, 2026 05:36
Kiln's tagline is now "The panel for everything." with the new
description. The description and buttons span the full panel width under
the logo, name, and tagline, which now also shows on phones.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
…tware

The social buttons now show each handle (QarthO, quartzdevgg, qartho)
instead of the platform name, with the platform kept in the accessible
label. Discord's icon uses its blurple; GitHub and X stay white since
their marks are black. "Minecraft plugins" becomes "Minecraft Software".

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Their lamp borders, glow, and links now share one green; the logos keep
their own colors.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
The Minecraft server consultant entry becomes "Side projects", lit as a
bare red lamp with no logo. The redstone red is a shade darker, and the
background gains a faint red glow under a light film grain.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
The whole top section of the Kiln panel is now a single full-width link;
hovering it brightens the lamp and underlines the name.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Minecraft Software now reads "Building and maintaining popular plugins
like HuskHomes." and the intro calls Derek a business owner instead of
listing websites for small businesses. The meta description follows.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Under the name, a 2×2 list marked with redstone dots: Building cool
software, Business owner, Open source maintainer, Lifelong gamer.
Minecraft Software now says "projects" since HuskHomes is also a mod.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
- Title "Derek (QarthO) | quartzdev.gg", search description, and separate
  shorter copy for link previews.
- Open Graph and Twitter tags with a short 1200x480 card styled after the
  Kiln and Marco cards. scripts/social-card.mjs builds it (Geist text
  outlined) plus the apple-touch and manifest icons: pnpm social-card.
- JSON-LD graph: WebSite, ProfilePage, and Person (with Kiln and Marco).
- /sitemap.xml, robots.txt pointing to it, web manifest, and a 404 page
  that returns 404 with its own title and noindex.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
- .github/workflows/docker.yml builds the image on pull requests and
  publishes ghcr.io/<owner>/quartzdev-web (amd64 + arm64) on pushes to
  main and v* tags. The Dockerfile labels link the package to the repo.
- Side projects get a pixel-art redstone potion instead of a bare lamp.
- The quartzdev logo gets a 2px black border.
- Remove CLAUDE.md; AGENTS.md covers the same ground.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Updates the line under the name and the preview card, where the location
moves to its own line to stay clear of the divider.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
The card gains a row with GitHub @QarthO, X @quartzdevgg, and Discord
@QarthO, each with its icon. The Open Graph/Twitter description no longer
ends with "Based in Atlanta."

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Drops "aka QarthO" from the card; the handles row takes its place.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@QarthO
QarthO merged commit 8ac69c8 into main Oct 26, 2026
1 check passed
@QarthO
QarthO deleted the portfolio-tanstack-start branch October 27, 2026 10:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant