Initial commit

This commit is contained in:
Akshay Kolli
2026-02-07 20:17:46 -05:00
parent 78111a5b61
commit 649d9c4555
86 changed files with 9530 additions and 100 deletions

5
app/api/health/route.ts Normal file
View File

@@ -0,0 +1,5 @@
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json({ status: 'ok', timestamp: new Date().toISOString() }, { status: 200 });
}

142
app/blog/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,142 @@
import { getPostBySlug } from '@/lib/mdx';
import { MDXRemote } from 'next-mdx-remote/rsc';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { format } from 'date-fns';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import { TableOfContents } from '@/components/mdx/TableOfContents';
import { SideNote } from '@/components/mdx/SideNote';
import { Citation, Bibliography } from '@/components/mdx/Citation';
import { MobileTableOfContents } from '@/components/mdx/MobileTableOfContents';
// Utility to ensure consistent IDs
const slugify = (text: any): string => {
if (!text) return '';
const str = typeof text === 'string' ? text : String(text);
return str
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '');
};
const components = {
h1: (props: any) => <h1 {...props} id={slugify(props.children)} className="text-3xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
h2: (props: any) => <h2 {...props} id={slugify(props.children)} className="text-2xl font-bold mt-8 mb-4 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
h3: (props: any) => <h3 {...props} id={slugify(props.children)} className="text-xl font-bold mt-6 mb-3 text-zinc-900 dark:text-zinc-50 scroll-mt-24" />,
p: (props: any) => <p {...props} className="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300" />,
ul: (props: any) => <ul {...props} className="list-disc pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
ol: (props: any) => <ol {...props} className="list-decimal pl-5 mb-4 space-y-2 text-zinc-700 dark:text-zinc-300" />,
blockquote: (props: any) => <blockquote {...props} className="border-l-4 border-zinc-200 dark:border-zinc-700 pl-4 italic my-6 text-zinc-600 dark:text-zinc-400" />,
code: (props: any) => <code {...props} className="bg-zinc-100 dark:bg-zinc-800 text-pink-600 dark:text-pink-400 px-1 py-0.5 rounded text-sm font-mono" />,
pre: (props: any) => <pre {...props} className="bg-zinc-900 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 text-sm font-mono" />,
a: (props: any) => <a {...props} className="text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all font-medium" />,
SideNote,
Citation,
Bibliography,
};
type Props = {
params: Promise<{ slug: string }>;
};
export async function generateMetadata({ params }: Props) {
const { slug } = await params;
try {
const { metadata } = getPostBySlug(slug);
return {
title: metadata.title,
description: metadata.description,
};
} catch {
return {
title: 'Post Not Found',
};
}
}
export default async function BlogPost({ params }: Props) {
const { slug } = await params;
let post;
try {
post = getPostBySlug(slug);
} catch {
notFound();
}
// Extract headings for TOC
const headingLines = post.content.match(/^#{2,3}\s+(.+)$/gm) || [];
const headings = headingLines.map((line) => {
const level = line.match(/^#+/)?.[0].length || 2;
const text = line.replace(/^#+\s+/, '').trim();
const id = slugify(text);
return { id, text, level };
});
return (
<div className="max-w-7xl mx-auto px-6 py-24 animate-fade-in relative">
<div className="grid grid-cols-1 xl:grid-cols-[250px_1fr] gap-12">
{/* Left Column: TOC */}
<aside className="hidden xl:block">
<div className="sticky top-32">
<TableOfContents headings={headings} />
</div>
</aside>
{/* Right Column: Content */}
<article className="max-w-3xl mx-auto xl:mx-0 w-full">
{/* Mobile TOC */}
<MobileTableOfContents headings={headings} />
<header className="mb-12 text-center sm:text-left">
<div className="flex items-center gap-3 text-sm text-zinc-400 dark:text-zinc-500 mb-4 justify-center sm:justify-start">
<time dateTime={post.metadata.date}>
{format(new Date(post.metadata.date), 'MMMM d, yyyy')}
</time>
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
<div className="flex gap-2">
{Array.isArray(post.metadata.tags) && post.metadata.tags.map((tag: string) => (
<span key={tag} className="text-xs uppercase tracking-wider">{tag}</span>
))}
</div>
</div>
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 mb-6 leading-tight">
{post.metadata.title}
</h1>
<p className="text-xl text-zinc-500 dark:text-zinc-400 font-light leading-relaxed">
{post.metadata.description}
</p>
</header>
<div className="prose prose-zinc dark:prose-invert prose-lg max-w-none relative">
<MDXRemote
source={post.content}
components={components}
options={{
mdxOptions: {
rehypePlugins: [
[rehypeAutolinkHeadings, { behavior: 'wrap' }]
]
}
}}
/>
</div>
<div className="mt-16 pt-8 border-t border-zinc-200 dark:border-zinc-800 flex justify-between items-center text-sm text-zinc-500">
<Link href="/blog" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
&larr; Back to all posts
</Link>
<a href="#" className="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
Scroll to top &uarr;
</a>
</div>
</article>
</div>
</div>
);
}

52
app/blog/page.tsx Normal file
View File

@@ -0,0 +1,52 @@
import Link from 'next/link';
import { getAllPosts } from '@/lib/mdx';
import { format } from 'date-fns';
export default function BlogIndex() {
const posts = getAllPosts();
return (
<div className="max-w-3xl mx-auto px-6 py-24 space-y-12 animate-fade-in">
<header className="space-y-4 text-center sm:text-left">
<h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Writing</h1>
<p className="text-zinc-500 dark:text-zinc-400 font-light">
Thoughts on software, design, and minimalism.
</p>
</header>
<div className="grid gap-10">
{posts.map((post) => (
<article key={post.slug} className="group relative flex flex-col space-y-3">
<div className="flex items-center gap-3 text-sm text-zinc-400 dark:text-zinc-500">
<time dateTime={post.date}>
{format(new Date(post.date), 'MMMM d, yyyy')}
</time>
<span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
<div className="flex gap-2">
{post.tags?.map(tag => (
<span key={tag} className="text-xs uppercase tracking-wider">{tag}</span>
))}
</div>
</div>
<Link href={`/blog/${post.slug}`} className="block">
<h2 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors">
{post.title}
</h2>
</Link>
<p className="text-zinc-600 dark:text-zinc-400 font-light leading-relaxed">
{post.description}
</p>
<div className="pt-2">
<Link href={`/blog/${post.slug}`} className="text-sm font-medium text-zinc-900 dark:text-zinc-100 underline decoration-zinc-300 dark:decoration-zinc-700 underline-offset-4 hover:decoration-zinc-900 dark:hover:decoration-zinc-100 transition-all">
Read more
</Link>
</div>
</article>
))}
</div>
</div>
);
}

View File

@@ -1,26 +1,47 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
:root {
--background: #ffffff;
--foreground: #171717;
@theme {
--font-sans: var(--font-inter);
--color-zinc-50: #fafafa;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
--color-zinc-300: #d4d4d8;
--color-zinc-400: #a1a1aa;
--color-zinc-500: #71717a;
--color-zinc-600: #52525b;
--color-zinc-700: #3f3f46;
--color-zinc-800: #27272a;
--color-zinc-900: #18181b;
--color-zinc-950: #09090b;
--animate-fade-in: fade-in 0.5s ease-in-out;
--animate-slide-up: slide-up 0.5s ease-in-out;
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
:root {
--background: var(--color-zinc-50);
--foreground: var(--color-zinc-900);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: var(--color-zinc-950);
--foreground: var(--color-zinc-50);
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-family: var(--font-inter), sans-serif;
}

View File

@@ -1,20 +1,18 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { Navbar } from "../components/layout/Navbar";
import { Footer } from "../components/layout/Footer";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
display: "swap",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Akshay Kolli",
description: "My personal website",
};
export default function RootLayout({
@@ -25,9 +23,13 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${inter.variable} antialiased flex flex-col min-h-screen`}
>
{children}
<Navbar />
<main className="flex-grow">
{children}
</main>
<Footer />
</body>
</html>
);

View File

@@ -1,65 +1,81 @@
import Image from "next/image";
export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
<div className="min-h-screen flex flex-col items-center p-8 sm:p-20 relative overflow-hidden bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-50 font-sans">
{/* Background decoration */}
<div className="fixed top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none opacity-30 dark:opacity-10">
<div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] rounded-full bg-linear-to-br from-zinc-200 to-transparent blur-3xl dark:from-zinc-800" />
<div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] rounded-full bg-linear-to-tl from-zinc-200 to-transparent blur-3xl dark:from-zinc-800" />
</div>
<main className="z-10 max-w-5xl w-full animate-fade-in mt-20 sm:mt-32 pb-24 px-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-center">
{/* Left Column: Text & Info */}
<section className="space-y-8 order-2 md:order-1">
<header className="space-y-4">
<h1 className="text-4xl sm:text-6xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 animate-slide-up" style={{ animationDelay: '0.1s' }}>
Akshay Kolli.
</h1>
<p className="text-xl text-zinc-600 dark:text-zinc-300 font-light tracking-wide animate-slide-up" style={{ animationDelay: '0.2s' }}>
CS PhD Student @ UMass Lowell
</p>
</header>
<div className="space-y-6 text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed font-light animate-slide-up" style={{ animationDelay: '0.3s' }}>
<p>
I am a PhD candidate at the University of Massachusetts, Lowell, focusing on <strong>World Models</strong>, <strong>Reinforcement Learning</strong>, and <strong>Multi-Agent Systems</strong>.
</p>
<p>
My work lies in building World Models for autonomous agents that can reason, adapt and learn in complex environments.
On the weekends I enjoy exercising, playing chess, listening to Jimi Hendrix, and playing video games.
</p>
</div>
<div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 animate-slide-up" style={{ animationDelay: '0.4s' }}>
<h3 className="text-xs font-bold uppercase tracking-widest text-zinc-900 dark:text-zinc-100 mb-4">Connect</h3>
<div className="flex gap-6 font-medium text-sm">
<a href="mailto:your.email@example.com" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
Email
</a>
<a href="https://github.com/profLepton" target="_blank" rel="noopener noreferrer" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
GitHub
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
Twitter
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
LinkedIn
</a>
</div>
</div>
{/* "Currently" - Answering "Anything else?" */}
<div className="pt-2 animate-slide-up" style={{ animationDelay: '0.5s' }}>
<p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
<span className="text-zinc-900 dark:text-zinc-100 mr-2">Currently:</span>
Writing about the architecture of personal sites. <a href="/blog/testing-layout" className="text-zinc-600 dark:text-zinc-400 underline decoration-zinc-300 dark:decoration-zinc-700 hover:text-zinc-900 dark:hover:text-zinc-100">Read latest &rarr;</a>
</p>
</div>
</section>
{/* Right Column: Photo */}
<div className="order-1 md:order-2 flex justify-center md:justify-end animate-slide-up" style={{ animationDelay: '0.2s' }}>
<div className="relative w-64 h-64 sm:w-80 sm:h-80 rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-900 shadow-2xl transition-transform duration-500 ease-out grayscale hover:grayscale-0">
{/* UNCOMMENT AFTER ADDING public/profile.jpg */}
{/* <Image src="/profile.jpg" alt="Akshay Kolli" fill className="object-cover" priority /> */}
{/* Placeholder */}
<div className="absolute inset-0 flex items-center justify-center text-zinc-300 dark:text-zinc-700 border-2 border-dashed border-zinc-200 dark:border-zinc-800 m-2 rounded-xl">
<span className="font-mono text-sm">profile.jpg</span>
</div>
</div>
</div>
</div>
</main>
</div>
);
}

126
app/resume/page.tsx Normal file
View File

@@ -0,0 +1,126 @@
export default function ResumePage() {
return (
<div className="max-w-3xl mx-auto px-6 py-24 space-y-12 animate-fade-in">
<header className="space-y-4">
<h1 className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">Resume</h1>
<p className="text-zinc-500 dark:text-zinc-400 font-light">
Academic and professional timeline.
</p>
</header>
{/* Timeline Section */}
<section className="space-y-12">
<h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 border-b border-zinc-200 dark:border-zinc-800 pb-4">
Experience & Education
</h2>
<div className="space-y-12 border-l border-zinc-200 dark:border-zinc-800 ml-8 pl-8 relative">
{/* PhD */}
<div className="relative">
<span className="absolute -left-[37px] top-1 h-4 w-4 rounded-full border-2 border-zinc-50 dark:border-zinc-950 bg-zinc-900 dark:bg-zinc-50" />
<div className="space-y-2">
<div className="flex justify-between items-baseline flex-wrap gap-2">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-zinc-100">PhD in Computer Science</h3>
<span className="text-sm font-mono text-zinc-500">Jan 2025 Present</span>
</div>
<p className="text-zinc-600 dark:text-zinc-400">University of Massachusetts</p>
</div>
</div>
{/* Research Assistant */}
<div className="relative">
<span className="absolute -left-[37px] top-1 h-4 w-4 rounded-full border-2 border-zinc-50 dark:border-zinc-950 bg-zinc-400 dark:bg-zinc-600" />
<div className="space-y-2">
<div className="flex justify-between items-baseline flex-wrap gap-2">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Research Assistant</h3>
<span className="text-sm font-mono text-zinc-500">Sep 2022 Present</span>
</div>
<p className="text-zinc-600 dark:text-zinc-400">Exalabs, University of Massachusetts</p>
<ul className="list-disc pl-5 space-y-1 text-sm text-zinc-500 dark:text-zinc-500 leading-relaxed marker:text-zinc-300">
<li>Designing state-of-the-art ML pipelines for graph properties & trajectory forecasting.</li>
<li>Reduced multi-agent simulation time by 1000x.</li>
</ul>
</div>
</div>
{/* Siemens */}
<div className="relative">
<span className="absolute -left-[37px] top-1 h-4 w-4 rounded-full border-2 border-zinc-50 dark:border-zinc-950 bg-zinc-300 dark:bg-zinc-700" />
<div className="space-y-2">
<div className="flex justify-between items-baseline flex-wrap gap-2">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-zinc-100">Software Engineering Intern</h3>
<span className="text-sm font-mono text-zinc-500">May 2023 Sep 2023</span>
</div>
<p className="text-zinc-600 dark:text-zinc-400">Siemens Healthineers</p>
<ul className="list-disc pl-5 space-y-1 text-sm text-zinc-500 dark:text-zinc-500 leading-relaxed marker:text-zinc-300">
<li>Created data analysis tool with Python for commercial blood testing machines.</li>
<li>Deployed 1DConv AutoEncoder (99.99% accuracy) on 700k+ dataset for real-time error detection.</li>
</ul>
</div>
</div>
{/* Masters */}
<div className="relative">
<span className="absolute -left-[37px] top-1 h-4 w-4 rounded-full border-2 border-zinc-50 dark:border-zinc-950 bg-zinc-200 dark:bg-zinc-800" />
<div className="space-y-2">
<div className="flex justify-between items-baseline flex-wrap gap-2">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-zinc-100">MSc Computer Science</h3>
<span className="text-sm font-mono text-zinc-500">Aug 2022 Dec 2024</span>
</div>
<p className="text-zinc-600 dark:text-zinc-400">University of Massachusetts</p>
</div>
</div>
{/* Bachelors */}
<div className="relative">
<span className="absolute -left-[37px] top-1 h-4 w-4 rounded-full border-2 border-zinc-50 dark:border-zinc-950 bg-zinc-100 dark:bg-zinc-900" />
<div className="space-y-2">
<div className="flex justify-between items-baseline flex-wrap gap-2">
<h3 className="font-semibold text-lg text-zinc-900 dark:text-zinc-100">BE Mechanical Engineering</h3>
<span className="text-sm font-mono text-zinc-500">Aug 2018 June 2022</span>
</div>
<p className="text-zinc-600 dark:text-zinc-400">Osmania University</p>
</div>
</div>
</div>
</section>
{/* Technical Skills */}
<section className="space-y-8">
<h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50 border-b border-zinc-200 dark:border-zinc-800 pb-4">
Technical Skills
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
<div>
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100 mb-3 block">Languages</h3>
<div className="flex flex-wrap gap-2 text-sm text-zinc-600 dark:text-zinc-400 font-mono">
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">Rust</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">Kotlin</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">Python</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">Go</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">C++</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">SQL</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">TypeScript</span>
<span className="px-2 py-1 bg-zinc-100 dark:bg-zinc-900 rounded">R</span>
</div>
</div>
<div>
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100 mb-3 block">Technologies</h3>
<div className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
React.js, Django, Flask, TensorFlow, PyTorch, Jax, Tauri, Android SDK, Docker, Kubernetes, GCP, MongoDB
</div>
</div>
<div>
<h3 className="font-semibold text-zinc-900 dark:text-zinc-100 mb-3 block">Concepts</h3>
<div className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
NLP, Transformers, Encryption, AI, Machine Learning, Distributed Systems
</div>
</div>
</div>
</section>
</div>
);
}