All Projects

Demo Project

A sample project showcasing the portfolio website capabilities with code snippets and reports.

typescriptnextjstailwindcss
Source CodeLive Demo

Overview

This is a demo project that demonstrates the features of this portfolio website. The project showcases how code snippets, reports, and project descriptions are rendered.

Features

  • Markdown Rendering: All content is written in Markdown and rendered beautifully
  • Syntax Highlighting: Code blocks are highlighted using Shiki (same engine as VS Code)
  • Responsive Design: Works on all devices

Architecture

The project follows a simple architecture:

  1. Content is stored as Markdown files in the content/ directory
  2. Build-time scripts read and parse the content
  3. Pages are statically generated for optimal performance

Getting Started

npm install
npm run dev

Code Snippets

utils.pypython
from typing import TypeVar, Callable

T = TypeVar("T")

def memoize(func: Callable[..., T]) -> Callable[..., T]:
    """A simple memoization decorator for pure functions."""
    cache: dict = {}

    def wrapper(*args):
        if args not in cache:
            cache[args] = func(*args)
        return cache[args]

    return wrapper


@memoize
def fibonacci(n: int) -> int:
    """Compute the nth Fibonacci number."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)


print(fibonacci(100))  # Computed instantly thanks to memoization
counter.tsxtsx
import { useState } from "react";

interface CounterProps {
  initialValue?: number;
}

export function Counter({ initialValue = 0 }: CounterProps) {
  const [count, setCount] = useState(initialValue);

  return (
    <div className="flex items-center gap-4">
      <button
        onClick={() => setCount((c) => c - 1)}
        className="rounded bg-gray-200 px-3 py-1 hover:bg-gray-300"
      >
        -
      </button>
      <span className="text-xl font-bold">{count}</span>
      <button
        onClick={() => setCount((c) => c + 1)}
        className="rounded bg-gray-200 px-3 py-1 hover:bg-gray-300"
      >
        +
      </button>
    </div>
  );
}

Reports

final-report.mdmd
View