Development

Beyond design, I write code. Here's what I've been building and contributing to on GitHub.

GitHub Stats

—

Public Repos

—

Total Commits

—

Contributions (yr)

—

Languages

—

Followers

Tech Stack

React

▲

Next.js

TypeScript

JavaScript

Tailwind CSS

Python

⬢

Node.js

HTML/CSS

GitHub

▲

Vercel

Figma

{}

REST APIs

Code Showcase

Real code from this portfolio — built with Next.js, TypeScript, and Tailwind CSS.

Navigation.tsx

TypeScript

Responsive navigation with active route detection

export default function Navigation() {
  const pathname = usePathname();
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <nav className="sticky top-0 z-50
      bg-[rgba(18,18,23,0.95)] backdrop-blur-xl">
      <ul className="hidden md:flex gap-8">
        {links.map((link) => {
          const isActive = link.href === "/"
            ? pathname === "/"
            : pathname.startsWith(link.href);
          return (
            <Link href={link.href}
              className={isActive
                ? "text-text-primary"
                : "text-text-muted"}>
              {link.label}
            </Link>
          );
        })}
      </ul>
    </nav>
  );
}

GitHub API Integration

TypeScript

Fetching profile & repos with parallel requests

useEffect(() => {
  async function fetchGitHub() {
    try {
      const [profileRes, reposRes] = await Promise.all([
        fetch(`https://api.github.com/users/${USERNAME}`),
        fetch(`https://api.github.com/users/${USERNAME}
          /repos?sort=updated&per_page=12`),
      ]);
      if (profileRes.ok)
        setProfile(await profileRes.json());
      if (reposRes.ok)
        setRepos(await reposRes.json());
    } catch {
      // Handle rate limiting gracefully
    } finally {
      setLoading(false);
    }
  }
  fetchGitHub();
}, []);

Design System Tokens

CSS

Tailwind CSS theme configuration with custom tokens

@theme {
  --color-bg: #121217;
  --color-bg-card: rgba(255, 255, 255, 0.03);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-accent: #4a7fff;
  --color-accent-hover: #3a6fee;
  --color-accent-subtle: rgba(74, 127, 255, 0.12);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-heading: "Montserrat", system-ui;
}

About This Site

This portfolio is built with Next.js, TypeScript, and Tailwind CSS. Deployed on Vercel with automatic CI/CD. View the source code on GitHub.

Next.jsTypeScriptTailwind CSSVercel

View this project