Skip to content

Commit b9b2f51

Browse files
Y-RyuZUclaude
andcommitted
feat: complete Minecraft-themed portfolio implementation
Assets & Resources: - Add Minecraft background images for different times of day - Add custom favicon and app icons - Update nameplate SVG UI Components: - Add remaining shadcn/ui components (tabs, sheet, tooltip, etc.) - Implement theme toggle functionality - Add aspect ratio and badge components Configuration: - Update global styles with Minecraft theme - Update layout with new provider structure - Configure proper meta tags and icons - Add .gitignore entry for .tmp directory Development: - Update devcontainer configuration - Add documentation files (AGENTS.md, IMPLEMENTATION_PLAN.md, etc.) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent b0b5e9f commit b9b2f51

43 files changed

Lines changed: 2551 additions & 237 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.claude/settings.local.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"permissions": {
3+
"allow": [
4+
"Bash(tree:*)",
5+
"Bash(yarn build)",
6+
"Bash(yarn lint)",
7+
"Bash(tsc --noEmit)",
8+
"mcp__serena__check_onboarding_performed",
9+
"mcp__serena__onboarding",
10+
"mcp__serena__list_dir",
11+
"mcp__serena__get_symbols_overview",
12+
"mcp__serena__find_file",
13+
"mcp__serena__find_symbol",
14+
"mcp__serena__search_for_pattern",
15+
"mcp__serena__write_memory",
16+
"mcp__serena__think_about_collected_information",
17+
"Bash(yarn typecheck)",
18+
"Bash(yarn tsc:*)",
19+
"mcp__serena__insert_after_symbol",
20+
"mcp__serena__replace_symbol_body",
21+
"Bash(for icon in \"diamond_pickaxe\" \"emerald\" \"compass\" \"map\" \"diamond_sword\" \"ender_eye\" \"command_block\" \"painting\" \"iron_block\" \"iron_ingot\")",
22+
"Bash(do ls public/images/minecraft/item/$icon.png)",
23+
"Bash(echo:*)",
24+
"Bash(done)",
25+
"Bash(convert:*)",
26+
"Bash(git add:*)",
27+
"Bash(git commit:*)"
28+
],
29+
"deny": [],
30+
"ask": []
31+
}
32+
}

.devcontainer/devcontainer.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"name": "React Portfolio Dev Container",
44
"dockerComposeFile": "docker-compose.yaml",
55
"service": "react-portfolio",
6+
"containerUser": "node",
67
"features": {
78
"ghcr.io/devcontainers/features/docker-outside-of-docker:1": {},
89
"ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,3 +180,4 @@ sketch
180180
# typescript
181181
next-env.d.ts
182182

183+
.tmp/

.serena/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/cache
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Code Style and Conventions
2+
3+
## TypeScript Configuration
4+
- **Strict mode**: Enabled
5+
- **Target**: ES2017
6+
- **Module**: ESNext with bundler resolution
7+
- **Path alias**: `@/*` maps to `./src/*`
8+
- **JSX**: Preserve mode for Next.js
9+
10+
## Component Conventions
11+
12+
### File Naming
13+
- React components: PascalCase (e.g., `HeroSection.tsx`)
14+
- Utilities/hooks: camelCase (e.g., `useTheme.ts`)
15+
- Configuration: lowercase with extensions (e.g., `tailwind.config.ts`)
16+
17+
### Component Structure
18+
```tsx
19+
// Default function export pattern
20+
export default function ComponentName() {
21+
return (
22+
<element>
23+
{/* Content */}
24+
</element>
25+
);
26+
}
27+
```
28+
29+
### Styling Approach
30+
- **Tailwind CSS** for utility classes
31+
- **CSS variables** for theming (HSL color format)
32+
- **Class Variance Authority (CVA)** for component variants
33+
- **cn() utility** (clsx + tailwind-merge) for conditional classes
34+
35+
### Import Organization
36+
1. External packages
37+
2. Internal components/utilities with `@/` alias
38+
3. Relative imports
39+
4. Type imports
40+
41+
### Radix UI Pattern
42+
- Use Radix primitives for accessible components
43+
- Apply styling through Tailwind classes
44+
- Maintain composition pattern
45+
46+
## CSS/Styling Conventions
47+
48+
### Color System
49+
- HSL-based CSS variables
50+
- Semantic naming: `--background`, `--foreground`, `--primary`, etc.
51+
- Dark mode via `class` strategy
52+
53+
### Spacing
54+
- Use Tailwind spacing utilities
55+
- Consistent padding/margin scales
56+
57+
### Responsive Design
58+
- Mobile-first approach
59+
- Tailwind breakpoint system
60+
61+
## Best Practices
62+
- No console.logs in production code
63+
- Avoid inline styles except for dynamic values
64+
- Use semantic HTML elements
65+
- Keep components focused and single-purpose
66+
- Extract reusable logic to custom hooks
67+
- Type all props and return values
68+
- Avoid `any` type
69+
- Use ESLint rules from Next.js config
70+
71+
## File Organization
72+
- Group related components in directories
73+
- Keep component files close to where they're used
74+
- Shared components in `components/shared/`
75+
- UI primitives in `components/ui/`
76+
- Page-specific components in respective page directories
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# React Portfolio Project Overview
2+
3+
## Project Purpose
4+
A personal portfolio website for RyuZU (Atsuki Katayama), a university student and engineer with 10 years of programming experience. The portfolio showcases skills, projects, and professional journey from starting with Minecraft in elementary school to becoming a full-stack engineer.
5+
6+
## Tech Stack
7+
- **Framework**: Next.js 15.1.3 with App Router
8+
- **Language**: TypeScript 5
9+
- **Styling**:
10+
- Tailwind CSS 3.4.1
11+
- Radix UI components
12+
- Framer Motion for animations
13+
- CSS-in-JS with Kuma UI
14+
- **UI Library**: Custom components using Radix UI primitives
15+
- **Icons**: Lucide React, React Icons, Iconify
16+
- **Forms**: React Hook Form with Zod validation
17+
- **Themes**: next-themes for dark mode support
18+
- **Backend Integration**: Directus SDK for CMS
19+
20+
## Project Structure
21+
```
22+
src/
23+
├── app/ # Next.js app router pages
24+
│ ├── about/ # About page
25+
│ ├── works/ # Portfolio works
26+
│ ├── blog/ # Blog section
27+
│ ├── contact/ # Contact page
28+
│ └── debug/ # Debug utilities
29+
├── components/ # React components
30+
│ ├── sections/ # Page sections (hero, etc.)
31+
│ ├── skills/ # Skills components
32+
│ ├── ui/ # UI primitives
33+
│ └── shared/ # Shared components
34+
├── config/ # Configuration files
35+
├── lib/ # Utility functions and constants
36+
└── assets/ # Static assets
37+
```
38+
39+
## Key Features
40+
- Responsive design with mobile-first approach
41+
- Dark mode support
42+
- Minecraft-inspired visual elements (pixel art, grid patterns)
43+
- Skill showcase with categorized tech stack
44+
- Project portfolio grid
45+
- Blog integration
46+
- Contact form
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# Suggested Commands for Development
2+
3+
## Development Server
4+
```bash
5+
# Start development server with Turbopack (fast refresh)
6+
yarn dev
7+
# or
8+
npm run dev
9+
```
10+
Opens at http://localhost:3000
11+
12+
## Build & Production
13+
```bash
14+
# Create production build
15+
yarn build
16+
17+
# Start production server
18+
yarn start
19+
```
20+
21+
## Code Quality
22+
```bash
23+
# Run ESLint for code linting
24+
yarn lint
25+
# or
26+
npm run lint
27+
```
28+
29+
## Package Management
30+
This project uses Yarn as the package manager:
31+
```bash
32+
# Install dependencies
33+
yarn install
34+
35+
# Add new dependency
36+
yarn add <package-name>
37+
38+
# Add dev dependency
39+
yarn add -D <package-name>
40+
```
41+
42+
## TypeScript
43+
```bash
44+
# Type checking (no dedicated script, but TypeScript is checked during build)
45+
yarn build
46+
```
47+
48+
## Git Commands (Linux)
49+
```bash
50+
# Check status
51+
git status
52+
53+
# Stage changes
54+
git add .
55+
56+
# Commit
57+
git commit -m "message"
58+
59+
# Push to remote
60+
git push origin main
61+
```
62+
63+
## File Navigation (Linux)
64+
```bash
65+
# List files
66+
ls -la
67+
68+
# Change directory
69+
cd <directory>
70+
71+
# Create directory
72+
mkdir <directory>
73+
74+
# Remove file/directory
75+
rm -rf <path>
76+
```
77+
78+
## Important Notes
79+
- The project uses **Yarn** as the primary package manager
80+
- Development runs with **Turbopack** for faster HMR
81+
- No test runner is currently configured
82+
- ESLint is configured with Next.js rules
83+
- No prettier configuration found (formatting handled by ESLint)
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# Task Completion Checklist
2+
3+
When completing any coding task in this project, ensure you:
4+
5+
## 1. Code Quality Checks
6+
- [ ] Run linting to catch any issues:
7+
```bash
8+
yarn lint
9+
```
10+
- [ ] Ensure TypeScript types are correct (checked during build):
11+
```bash
12+
yarn build
13+
```
14+
- [ ] Fix any linting errors or warnings before considering task complete
15+
16+
## 2. Visual Verification
17+
- [ ] Start dev server and verify changes work as expected:
18+
```bash
19+
yarn dev
20+
```
21+
- [ ] Test in both light and dark modes
22+
- [ ] Check responsive behavior (mobile, tablet, desktop)
23+
24+
## 3. Code Review
25+
- [ ] Follow existing code patterns and conventions
26+
- [ ] No console.log statements left in code
27+
- [ ] Props and return types are properly typed
28+
- [ ] Imports use `@/` alias where applicable
29+
- [ ] Component follows single responsibility principle
30+
31+
## 4. Style Consistency
32+
- [ ] Using Tailwind utilities instead of inline styles
33+
- [ ] Following the HSL color variable system
34+
- [ ] Maintaining consistent spacing
35+
- [ ] CSS classes use cn() utility for conditional styling
36+
37+
## 5. Final Build Test
38+
- [ ] Ensure production build completes successfully:
39+
```bash
40+
yarn build
41+
```
42+
- [ ] No TypeScript errors
43+
- [ ] No build warnings that need addressing
44+
45+
## 6. Git Readiness (if committing)
46+
- [ ] All changes are intentional
47+
- [ ] No temporary/debug code included
48+
- [ ] Commit message clearly describes changes
49+
50+
## Important Notes
51+
- Since no test suite exists, manual verification is crucial
52+
- Always run `yarn lint` before considering work complete
53+
- Build process will catch TypeScript errors
54+
- Development server with Turbopack provides fast feedback

.serena/project.yml

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
2+
# * For C, use cpp
3+
# * For JavaScript, use typescript
4+
# Special requirements:
5+
# * csharp: Requires the presence of a .sln file in the project folder.
6+
language: typescript
7+
8+
# whether to use the project's gitignore file to ignore files
9+
# Added on 2025-04-07
10+
ignore_all_files_in_gitignore: true
11+
# list of additional paths to ignore
12+
# same syntax as gitignore, so you can use * and **
13+
# Was previously called `ignored_dirs`, please update your config if you are using that.
14+
# Added (renamed) on 2025-04-07
15+
ignored_paths: []
16+
17+
# whether the project is in read-only mode
18+
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
19+
# Added on 2025-04-18
20+
read_only: false
21+
22+
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
23+
# Below is the complete list of tools for convenience.
24+
# To make sure you have the latest list of tools, and to view their descriptions,
25+
# execute `uv run scripts/print_tool_overview.py`.
26+
#
27+
# * `activate_project`: Activates a project by name.
28+
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
29+
# * `create_text_file`: Creates/overwrites a file in the project directory.
30+
# * `delete_lines`: Deletes a range of lines within a file.
31+
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
32+
# * `execute_shell_command`: Executes a shell command.
33+
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
34+
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
35+
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
36+
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
37+
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
38+
# * `initial_instructions`: Gets the initial instructions for the current project.
39+
# Should only be used in settings where the system prompt cannot be set,
40+
# e.g. in clients you have no control over, like Claude Desktop.
41+
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
42+
# * `insert_at_line`: Inserts content at a given line in a file.
43+
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
44+
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
45+
# * `list_memories`: Lists memories in Serena's project-specific memory store.
46+
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
47+
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
48+
# * `read_file`: Reads a file within the project directory.
49+
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
50+
# * `remove_project`: Removes a project from the Serena configuration.
51+
# * `replace_lines`: Replaces a range of lines within a file with new content.
52+
# * `replace_symbol_body`: Replaces the full definition of a symbol.
53+
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
54+
# * `search_for_pattern`: Performs a search for a pattern in the project.
55+
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
56+
# * `switch_modes`: Activates modes by providing a list of their names
57+
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
58+
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
59+
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
60+
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
61+
excluded_tools: []
62+
63+
# initial prompt for the project. It will always be given to the LLM upon activating the project
64+
# (contrary to the memories, which are loaded on demand).
65+
initial_prompt: ""
66+
67+
project_name: "ReactPortfolio"

0 commit comments

Comments
 (0)