Portfolio Website

Live-Website

A modern, accessible portfolio website built with Next.js, featuring a professional project showcase, responsive design, and optimized user experience.

---

Table of Contents

• Features
• Accessibility
• Technologies Used
• Getting Started
  • Code Formatting
• Testing
• Deployment
• Project Structure
• Contributing
• AI Agent Configuration
• License

---

Features

• Professional project portfolio with detailed descriptions and technology stacks
• Responsive and mobile-friendly layout
• Accessible navigation and semantic markup
• Contact options (Email, GitHub)
• Collapsible project list for improved UX

Accessibility

• Keyboard navigable and screen reader optimized
• ARIA labels and roles for all major components
• Skip to content and accessible navigation
• Color contrast and focus indicators

Technologies Used

• Next.js
• React
• Tailwind CSS
• TypeScript
• Bun

Getting Started

To run this project locally:

1. Clone the repository

   git clone https://github.com/kohld/kohld.github.io.git
   
   cd kohld.github.io

2. Install dependencies

   bun install

3. Start the development server

   bun run dev

4. Open your browser and visit http://localhost:3000

Code Formatting

This project uses Prettier for code formatting. To format all files:

bun run format

Note: Prettier is configured to run manually. Remember to format your code before committing changes to maintain consistent code style across the project.

---

Testing

This project uses Jest and React Testing Library for component testing.

Running Tests

To run all tests:

bun run test

To run tests in watch mode during development:

bun run test:watch

Test Coverage

All components are covered with tests to ensure functionality and accessibility:

• Component Tests (tests/components/)
  • about.test.tsx - About section rendering and skills display
  • contact.test.tsx - Contact links and accessibility
  • fade-in.test.tsx - Animation wrapper component
  • footer.test.tsx - Footer content and semantic structure
  • header.test.tsx - Navigation and mobile menu functionality
  • hero.test.tsx - Hero section and scroll interactions
  • projects.test.tsx - Project filtering and display logic
  • section-divider.test.tsx - Visual divider component

Current Status: 27 tests across 8 test suites, all passing ✅

Testing Best Practices

• Tests use semantic queries (getByRole, getByText) for better accessibility validation
• Interactive elements are tested with user events (fireEvent)
• ARIA attributes and roles are verified
• Components are tested in isolation with appropriate mocks

---

Deployment

This project is automatically deployed to GitHub Pages whenever a commit is pushed to the main branch.

The deployment process is handled by a GitHub Actions workflow defined in .github/workflows/deploy.yml. The workflow performs the following steps:

1. Environment: It sets up the Bun runtime.
2. Build: It builds the Next.js application into a static site.
3. Export: It exports the static files to the out directory.
4. Deploy: It deploys the contents of the out directory to the gh-pages branch, which is then served as the live site.

---

Project Structure

graph TD
    A[kohld.github.io] --> B[app/]
    A --> C[public/]
    A --> D[Configuration Files]

    B --> E[layout.tsx]
    B --> F[page.tsx]
    B --> G[globals.css]
    B --> H[components/]

    H --> I[header.tsx]
    H --> J[hero.tsx]
    H --> K[about.tsx]
    H --> L[projects.tsx]
    H --> M[contact.tsx]
    H --> N[footer.tsx]

    C --> O[favicon.svg]
    C --> P[Static Assets]

    D --> Q[next.config.ts]
    D --> R[tailwind.config.ts]
    D --> S[tsconfig.json]
    D --> T[package.json]

    F -.imports.-> I
    F -.imports.-> J
    F -.imports.-> K
    F -.imports.-> L
    F -.imports.-> M
    F -.imports.-> N

    E -.defines.-> U[Metadata & Layout]
    F -.renders.-> V[Main Page]

    style A fill:#007AFF,stroke:#0051D5,color:#fff
    style B fill:#1E1E1E,stroke:#007AFF,color:#fff
    style H fill:#1E1E1E,stroke:#007AFF,color:#fff
    style F fill:#2D2D2D,stroke:#007AFF,color:#fff

Loading

Accessible Project Structure Description

The project is structured as follows:

• The app/ directory forms the core of the Next.js application, containing:
  • layout.tsx: The main layout component.
  • page.tsx: The main page content, which imports all other components.
  • globals.css: Global stylesheets.
  • components/: A sub-directory with all the reusable React components like header.tsx, footer.tsx, projects.tsx, etc.
• The public/ directory holds all static assets like images and icons.
• The root directory contains configuration files like next.config.ts, tailwind.config.ts, and package.json.

---

Contributing

Contributions, issues, and feature requests are welcome. While this is a personal project, I'm open to feedback and suggestions for improvement.

Feel free to check the issues page. If you'd like to contribute, you can fork the repository and create a pull request, or open an issue with the tag "enhancement".

---

AI Agent Configuration

This project includes AI agent configuration files to ensure consistent behavior across different AI models and assistants:

Agent Configuration Files

• AGENTS.md - General agent configuration for portfolio development
• CLAUDE.md - Claude-specific agent configuration
• GEMINI.md - Gemini-specific agent configuration

Development Philosophy

The project follows the Karpathy Guidelines for AI-assisted development:

.agents/skills/karpathy-guidelines/SKILL.md

• Meta-principles for avoiding common LLM coding mistakes
• Think before coding, simplicity first, surgical changes, goal-driven execution

Key Principles

• Think Before Coding: State assumptions explicitly, present multiple interpretations, push back when warranted
• Simplicity First: Minimum code that solves the problem, no speculative features
• Surgical Changes: Touch only what you must, clean up only your own mess
• Goal-Driven Execution: Define success criteria, loop until verified

Integration in Development Process

AI agents are integrated as development assistants that support human contributors:

1. Code Generation - AI agents generate code based on project guidelines
2. Code Review - AI agents review code for consistency and best practices
3. Documentation - AI agents help maintain and update documentation
4. Testing - AI agents assist in writing and maintaining tests

Additional Resources

For more information about Bun APIs, read the documentation in node_modules/bun-types/docs/**.md.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.