kinoo.dev

Personal portfolio & freelance website.

Live Website · Design System

Getting Started

git clone https://github.com/yourusername/kinoo.dev.git
cd kinoo.dev

With Nix (recommended)

nix develop

Gives you bun, cog, git. Auto-runs bun install.

For auto-activate, use direnv:

direnv allow

Without Nix

Install Bun and Cocogitto manually, then:

bun install
bunx lefthook install

Commands

Command	Action
bun run dev	Dev server at localhost:4321
bun run build	Production build to dist/
bun run preview	Preview build
bun run lint	ESLint
bun run lint:fix	Fix lint issues
bunx astro check	Type check

About

My portfolio site, built with Astro + SolidJS. Static generation, animations with Anime.js, and a design system for component documentation.

Features

• Static site with Astro islands
• Animations (Anime.js)
• Design system with live component docs
• Responsive
• Form validation with Modular Forms
• SEO + sitemap

Event Bus

The site relies on animations while keeping components isolated. To decouple what triggers an animation from what actually animates, there's a one-shot event bus (src/lib/eventBus.ts).

Components import on and emit from a shared instance (src/lib/emitter.ts). Events use namespaced names like reveal:section:experiences. Each event fires once; late listeners are called immediately, so render order doesn't matter.

Tech Stack

Core: Astro, TypeScript, SolidJS

UI: Anime.js, Blaze Slider, Solid Toast

Dev: Bun, ESLint, Prettier, Lefthook, Cocogitto

Optional: Nix flake for reproducible dev environment

Design System

Contextual atomic design - components grouped by feature, shared ones in shared/.

src/components/
├── shared/
│   ├── atoms/          # Tag, Button, IconButton...
│   ├── molecules/      # Card/, Spotlight
│   └── organisms/
├── hero/
├── header/
├── realisations/
├── experiences/
├── formations/
├── contact/
└── sidebar/

Principles:

• Feature-first grouping
• Only move to shared/ when used by 2+ features
• Related components nest together (Card/)

View Design System →

Project Structure

src/
├── components/        # Contextual atomic design
├── layouts/
├── lib/               # Utils, animations, dom helpers
├── pages/
├── styles/            # CSS + design tokens
└── svgs/

CI/CD

feature/* → develop → main
              │         │
           CI tests   Release + Deploy

Follows standard Gitflow: feature branches merge into develop, develop merges into main for releases.

• feature → develop: squash merge
• develop → main: merge commit (preserves shared history between branches)
• After release, CI merges main back into develop to sync the version bump

TODO: set GitHub repo merge strategy — enable "Allow merge commits" for develop → main PRs (Settings → General → Pull Requests)

PRs to develop run lint + build. PRs to main create a GitHub release and deploy to Netlify.

Commits must follow Conventional Commits:

feat(ui): add dark mode
fix: nav overflow

Lefthook runs ESLint on pre-commit and validates commit messages.

Secrets needed: NETLIFY_AUTH_TOKEN, NETLIFY_SITE_ID

License

MIT