toiloff

Imported from ilyhalight/toiloff (AGENTS.md). Install upstream with npx skills add ilyhalight/toiloff. Copyright stays with the author.

Project

Personal website frontend for Toiloff, built with Astro 7 and Bun.

Development

• Use Bun for package management and scripts.
• Required Node version: >=22.12.0.
• Install dependencies with bun install.
• Run production checks with bun run build.
• Preview production output with bun preview.

When starting the dev server, use Astro background mode:

bun astro dev --background --host

Manage the background server with bun astro dev stop, bun astro dev status, and bun astro dev logs.

Code Style

• Prefer for...of loops over .forEach() for iteration.

Architecture

• Main layout: src/layouts/Layout.astro.
• Pages live in src/pages/; current routes are / (index.astro), /about (about.astro), /blog (blog.astro), /blog/[slug] (blog/[slug].astro), and /404 (404.astro).
• Global reset, design tokens, utility classes, and shared button styles live in src/components/GlobalStyle.astro.
• Site title metadata comes from getEntry("settings", "settings"), backed by src/data/settings.json through src/content.config.ts.
• Layout.astro includes Header, Footer, global styles, the Poppins font, Astro ClientRouter, and fade transitions for route changes.
• Keep reusable section blocks in src/components/<Group>/<Name>.astro when a component belongs to a feature group.
• The icon directory is currently named src/components/Icones/; use the existing spelling unless deliberately renaming the whole folder.

Design

Styling

• Pure CSS with Astro scoped <style> blocks; no Tailwind, Bootstrap, or other CSS framework.
• Global tokens are CSS custom properties in :root and [data-theme="light"] inside GlobalStyle.astro.
• Dark-first theme: dark values are the default :root; light values are enabled with data-theme="light" on body.
• ThemeSwitcher.astro toggles document.body.dataset.theme; it is used in desktop preferences from Header.astro and in MobileNav.astro.
• Use BEM-like class names with kebab-case and __ for elements, e.g. .nav-list__item-link.
• Prefer existing utility classes: .button, .button_outline, .text-truncate, and .text-wrap.
• Do not add unused data-* attributes; every data hook should be read by CSS or JavaScript.
• Preserve the current rounded-card, glass-header, soft-gradient, dark-first visual language unless explicitly redesigning.

Design Tokens

Typography

• Poppins is configured through Astro's font provider in astro.config.mjs and exposed as --font-poppins.
• Fallback stack: "Inter", system-ui, sans-serif.
• Base size: 16px.

Layout

• .app is a centered flex column with max-width: 1280px and min-height: 100svh.
• main is a flex column with flex: 1.
• Header is fixed within a 100px header area, pill-shaped (border-radius: 1.75rem), glassmorphic (backdrop-filter: blur(64px)), and width: min-content on desktop.
• Mobile breakpoints are mostly 500px, with component-specific breakpoints where needed.

Components

Pages

• src/pages/index.astro: home page with hero, projects, stats, and guestbook sections.
• src/pages/about.astro: about page with profile cards, social links, and tech stack icons.
• src/pages/blog.astro: blog list page with API-shaped placeholder posts, hero search, tag filtering, and post cards.
• src/pages/blog/[slug].astro: blog detail page generated from placeholder post records.
• src/pages/404.astro: custom not-found page with image asset and home link.

Data And Content

• src/content.config.ts defines the settings collection using Astro's file() loader.
• src/data/settings.json stores defaultTitle and defaultDelimiter.
• Blog data currently uses local API-shaped placeholders in src/data/blog.ts; keep BlogPost and BlogPostDetail in src/components/Blog/types.ts aligned with the future API response.
• Guestbook data currently uses local API-shaped placeholders in src/data/guestbook.ts; keep GuestbookMessage aligned with the future API response.
• Keep structured site-wide settings in src/data/settings.json and update the schema in src/content.config.ts when adding fields.

Documentation

Full documentation: https://docs.astro.build

Consult these guides before working on related tasks:

• Adding pages, dynamic routes, or middleware
• Working with Astro components
• Using React, Vue, Svelte, or other framework components
• Adding or managing content
• Adding styles
• Supporting multiple languages