personal website
nekomimi.pet
1# CRUSH.md
2
3## Project Overview
4
5This is a personal portfolio website built with Bun, React, TypeScript, and Tailwind CSS. It uses the shadcn/ui component library and serves as both a portfolio and development environment for AT Protocol-related projects. The project demonstrates modern web development practices with a focus on decentralized technologies.
6
7## Development Commands
8
9### Core Commands
10- `bun install` - Install dependencies
11- `bun dev` - Start development server with hot reload and HMR
12- `bun start` - Run production server
13- `bun run build.ts` - Build for production (outputs to `dist/`)
14- `bun run build.ts --help` - Show all build options
15
16### Build System
17The custom build script (`build.ts`) supports various options:
18- `--outdir <path>` - Output directory (default: "dist")
19- `--minify` - Enable minification
20- `--sourcemap <type>` - Sourcemap type (none|linked|inline|external)
21- `--external <list>` - External packages (comma separated)
22
23The build automatically:
24- Processes all HTML files in `src/` as entrypoints
25- Copies `public/` folder to dist
26- Uses Tailwind plugin for CSS processing
27- Includes linked sourcemaps by default
28
29## Architecture
30
31### Project Structure
32```
33src/
34├── components/
35│ ├── ui/ # shadcn/ui components (Button, Card, Input, etc.)
36│ ├── sections/ # Main page sections (Header, Work, Connect)
37│ └── ... # Other React components
38├── data/
39│ └── portfolio.ts # Portfolio content and metadata
40├── hooks/ # Custom React hooks
41├── lib/ # Utility functions
42└── styles/ # Global CSS and Tailwind config
43```
44
45### Server Architecture
46- Uses Bun's built-in server (`src/index.ts`)
47- Serves React SPA with API routes
48- API routes use pattern matching (`/api/hello/:name`)
49- CORS headers configured for cross-origin requests
50- Development mode includes HMR and browser console echoing
51
52### Key Files
53- `src/index.ts` - Server entry point with API routes
54- `src/App.tsx` - Main React component with intersection observer animations
55- `src/data/portfolio.ts` - All portfolio content (personal info, work experience, skills)
56- `build.ts` - Custom build script with extensive CLI options
57- `styles/globals.css` - Tailwind imports, CSS variables, and custom animations
58
59## Code Conventions
60
61### TypeScript Configuration
62- Strict mode enabled with `noUncheckedIndexedAccess`
63- Path aliases: `@/*` maps to `./src/*`
64- JSX: `react-jsx` transform
65- Module resolution: `bundler` mode
66- Target: `ESNext` with DOM libraries
67
68### Component Patterns
69- Uses shadcn/ui component library with `class-variance-authority`
70- Utility function `cn()` combines `clsx` and `tailwind-merge`
71- Components follow Radix UI patterns for accessibility
72- File exports: Named exports for components, default for main App
73
74### Styling
75- Tailwind CSS v4 with custom CSS variables
76- Dark theme by default with light mode support
77- Glassmorphism effects with custom utilities
78- Custom animations: `fade-in-up`, `bounce-slow`
79- Fira Code monospace font throughout
80
81### Import Aliases (from components.json)
82```typescript
83"@/components" → "./src/components"
84"@/lib/utils" → "./src/lib/utils"
85"@/components/ui" → "./src/components/ui"
86"@/lib" → "./src/lib"
87"@/hooks" → "./src/hooks"
88```
89
90## UI Components
91
92### shadcn/ui Integration
93The project uses shadcn/ui with:
94- Style variant: "new-york"
95- Base color: "neutral"
96- Icon library: Lucide React
97- CSS variables enabled
98- Custom CSS location: `styles/globals.css`
99
100### Available UI Components
101- Button (multiple variants: default, destructive, outline, secondary, ghost, link)
102- Card
103- Input
104- Label
105- Select
106- Textarea
107
108### Custom Components
109- ThemeToggle (dark/light mode switching)
110- SectionNav (navigation between portfolio sections)
111- ProjectCard/WorkExperienceCard (portfolio item displays)
112- SocialLink (social media links with icons)
113
114## Content Management
115
116Portfolio data is centralized in `src/data/portfolio.ts`:
117- `personalInfo` - Name, title, description, availability, contact
118- `currentRole` - Current employment status
119- `skills` - Array of technical skills
120- `workExperience` - Array of work history with projects
121- `socialLinks` - Social media profiles
122- `sections` - Page section identifiers
123
124The description format supports rich text with bold styling and URLs:
125```typescript
126type DescriptionPart = {
127 text: string
128 bold?: boolean
129 url?: string
130}
131```
132
133## Deployment
134
135### Netlify Configuration
136- Static site hosting
137- CORS headers configured in `public/netlify.toml`
138- AT Protocol DID file at `public/.well-known/atproto-did`
139
140### Build Output
141- Production builds output to `dist/`
142- All HTML files in `src/` become entrypoints
143- Public assets copied automatically
144- Source maps linked for debugging
145
146## Development Notes
147
148### Hot Module Replacement
149- Development server includes HMR
150- Browser console logs echoed to server
151- Automatic reloading on file changes
152
153### Performance Features
154- Intersection Observer for scroll-triggered animations
155- Code splitting support in build configuration
156- Minification enabled by default in production
157- Lazy loading with `react` imports
158
159### AT Protocol Integration
160- Project showcases AT Protocol-related work
161- Uses `atproto-ui` component library
162- Bluesky and Tangled integration in portfolio
163
164## Gotchas
165
166### Build System
167- Custom build script requires Bun runtime (not Node.js)
168- HTML files in `src/` automatically become entrypoints
169- Must use `--external` flag for libraries that shouldn't be bundled
170
171### Styling
172- Dark mode is default styling approach
173- CSS variables are used extensively for theming
174- Custom glassmorphism effects require SVG filters (defined in CSS)
175
176### Server Routes
177- API routes use Bun's pattern matching syntax
178- All unmatched routes serve the main SPA (catch-all route)
179- CORS headers pre-configured for API access
180
181### Content Structure
182- Portfolio content is TypeScript data, not markdown
183- Rich text descriptions use specific object structure
184- Projects support multiple links (live demo, GitHub, etc.)