Show HN: Open sourcing my developer portfolio

A modern, feature-rich portfolio template built with Next.js 15+ and TypeScript. This template serves as a starting point for developers looking to create their own personal portfolio website, featuring a blog, project showcase, and various interactive sections.

• Production-Ready: Built with best practices and modern web standards
• Fully Featured: Includes blog, projects, tech stack, and more
• Type-Safe: Built with TypeScript for better development experience
• Customizable: Easy to modify and extend to fit your needs
• Well-Documented: Comprehensive documentation and clear code structure
• Modern Stack: Uses Next.js App Router, Tailwind CSS, and MongoDB

• Personal portfolio with project showcase and tech stack
• Blog for articles, tutorials, and thoughts
• Responsive, accessible UI with dark mode
• SEO optimized with Open Graph, Twitter Card, and structured data
• Bookmark-style lists for projects and articles
• Modern navigation and animated header
• Loading, error, and empty states for a smooth UX
• TypeScript, Next.js App Router, Tailwind CSS

• Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS
• SEO: Next.js Metadata API, Open Graph, Twitter Card, JSON-LD
• Other: Lucide Icons, Google Favicon API

The project uses lint-staged to automatically format code with Prettier before commits. This ensures consistent code style across the project. The setup is minimal but extensible, allowing you to add more complex code quality checks as needed.

1. Installation

   This will automatically set up lint-staged.

2. Current Configuration

   { "lint-staged": { "*.{ts,tsx,js,jsx,json,md}": "prettier --write" } }

3. Skipping Formatting

   git commit -m "your message" --no-verify

   ⚠️ Use with caution - only skip checks when absolutely necessary.

The application uses a type-safe data layer built with MongoDB and TypeScript. The data layer is organized into two main components:

A reusable, type-safe foundation for database operations:

• Create: CreateOperations<T extends BaseDocument>

  • Handles single and bulk document creation
  • Type-safe document insertion
  • Automatic timestamp handling

• Read: ReadOperations<T extends BaseDocument>

  • Flexible querying with MongoDB filters
  • Projection support for optimized queries
  • Sorting and pagination capabilities

• Update: UpdateOperations<T extends BaseDocument>

  • Single and bulk document updates
  • Partial update support
  • Atomic operations

• Delete: DeleteOperations<T extends BaseDocument>

  • Single and bulk document deletion
  • Filter-based deletion
  • Safe deletion with type checking

Type-safe methods for each domain of the application:

• Blog: lib/data/blog.ts

  • Article management
  • Featured articles
  • Content organization

• Projects: lib/data/projects.ts

  • Project showcase
  • Technology stack
  • Project metadata

Each data method file:

• Extends the generic operations layer
• Provides domain-specific functionality
• Includes helper methods for common queries
• Implements seed operations for development
• Maintains type safety throughout

This architecture provides:

• Type safety across the entire data layer
• Reusable database operations
• Domain-specific functionality
• Consistent error handling
• Easy testing and mocking
• Clear separation of concerns

The application implements progressive loading states using Next.js's built-in loading UI feature. Each page has a corresponding loading.tsx file that shows a loading state while the page content is being fetched.

This approach provides a better user experience by:

• Showing static content immediately
• Using shimmer effects to indicate loading states
• Maintaining layout stability during loading
• Reducing perceived loading time

For more information about loading states in Next.js, see the official documentation.

The application implements a robust error handling system using Next.js 13+ error handling features:

• Located at app/error.tsx
• Handles runtime errors in the application
• Provides user-friendly error messages
• Includes "Try Again" and "Go back home" options
• Logs errors to console (can be extended to error reporting services)

• Located at app/not-found.tsx
• Handles 404 errors for non-existent routes
• Consistent styling with error page
• Clear navigation back to homepage

• All API routes include try-catch blocks
• Standardized error response format:
  { error: string; message: string; }

For more information about Next.js error handling, refer to the official documentation.

Certain API endpoints require a secret header for security. These endpoints are used for seeding and deleting data, and should only be accessible in development or through secure means.

The secret value should match the SECRET environment variable.

If the secret header is missing or incorrect, the API will return a 403 Forbidden response:

Contributions are welcome! Please read the Contributing Guide and Code of Conduct before submitting issues or pull requests.

• Open an Issue
• Submit a Pull Request

1. Clone the repo:
   git clone https://github.com/iamk3nnyt/kennyt.me.git cd kennyt.me
2. Install dependencies:
3. Set up environment variables:
   • Copy .env.example to .env.local and fill in any required values
4. Run the dev server:
5. Open http://localhost:3000 in your browser.

This project is MIT licensed.