soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-15 08:14:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: fix linting and typechecking errors

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-11 19:41:36 -05:00
parent 962f2ad7ee
commit 4f9602a242
35 changed files with 768 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

4
public/pdf.worker.min.js vendored
View File

@@ -30356,7 +30356,6 @@ class PostScriptLexer {
;
(t = this.nextChar()) >= 0 &&
((t >= 65 && t <= 90) || (t >= 97 && t <= 122));
)
i.push(String.fromCharCode(t));
const a = i.join("");
@@ -30378,7 +30377,6 @@ class PostScriptLexer {
;
(e = this.nextChar()) >= 0 &&
((e >= 48 && e <= 57) || 45 === e || 46 === e);
)
t.push(String.fromCharCode(e));
const i = parseFloat(t.join(""));
@@ -37773,7 +37771,6 @@ class XMLParserBase {
for (
;
a < e.length && !isWhitespace(e, a) && ">" !== e[a] && "/" !== e[a];
)
++a;
const s = e.substring(t, a);
@@ -37810,7 +37807,6 @@ class XMLParserBase {
">" !== e[i] &&
"?" !== e[i] &&
"/" !== e[i];
)
++i;
const a = e.substring(t, i);

2
src/app/api/publications/[filename]/route.ts
View File

@@ -1,4 +1,4 @@
import { NextRequest, NextResponse } from "next/server";
import { type NextRequest, NextResponse } from "next/server";
import { readFile } from "fs/promises";
import { join } from "path";

6
src/app/articles/page.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { ArrowUpRight, Newspaper } from "lucide-react";
import { Button } from "~/components/ui/button";
import Link from "next/link";
import {
Card,
@@ -22,12 +22,12 @@ export default function ArticlesPage() {
await new Promise((resolve) => setTimeout(resolve, 0));
setLoading(false);
};
fetchArticles();
void fetchArticles();
}, []);
return (
<div className="space-y-6">
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<Newspaper className="h-8 w-8 text-primary" />
<div>

116
src/app/blog/[slug]/page.tsx
View File

@@ -1,82 +1,92 @@
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import fs from "fs";
import path from "path";
import { BreadcrumbUpdater } from "~/components/BreadcrumbUpdater";
interface BlogPostMetadata {
title: string;
publishedAt: string;
tags?: string[];
summary?: string;
image?: string;
}
interface PageProps {
params: Promise<{ slug: string }>;
params: Promise<{ slug: string }>;
}
export async function generateStaticParams() {
const contentDir = path.join(process.cwd(), "src/content/blog");
const files = fs.readdirSync(contentDir);
const contentDir = path.join(process.cwd(), "src/content/blog");
const files = fs.readdirSync(contentDir);
return files
.filter((file) => file.endsWith(".mdx"))
.map((file) => ({
slug: file.replace(".mdx", ""),
}));
return files
.filter((file) => file.endsWith(".mdx"))
.map((file) => ({
slug: file.replace(".mdx", ""),
}));
}
export async function generateMetadata({ params }: PageProps) {
const { slug } = await params;
try {
const { metadata } = await import(`~/content/blog/${slug}.mdx`);
return metadata;
} catch (e) {
return {
title: "Post Not Found",
};
}
const { slug } = await params;
try {
const { metadata } = (await import(`~/content/blog/${slug}.mdx`)) as {
metadata: BlogPostMetadata;
};
return metadata;
} catch {
return {
title: "Post Not Found",
};
}
}
export default async function BlogPost({ params }: PageProps) {
const { slug } = await params;
let Post;
let metadata;
const { slug } = await params;
let Post;
let metadata;
try {
const content = await import(`~/content/blog/${slug}.mdx`);
Post = content.default;
metadata = content.metadata;
} catch (e) {
notFound();
}
try {
const content = (await import(`~/content/blog/${slug}.mdx`)) as {
default: React.ComponentType;
metadata: BlogPostMetadata;
};
Post = content.default;
metadata = content.metadata;
} catch {
notFound();
}
return (
<article className="animate-fade-in-up space-y-8">
<BreadcrumbUpdater title={metadata.title} />
<div className="mb-8">
{/* <Button variant="ghost" asChild className="-ml-4 text-muted-foreground mb-4">
return (
<article className="animate-fade-in-up space-y-8">
<BreadcrumbUpdater title={metadata.title} />
<div className="mb-8">
{/* <Button variant="ghost" asChild className="-ml-4 text-muted-foreground mb-4">
<Link href="/blog">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Blog
</Link>
</Button> */}
<h1 className="text-3xl font-bold mb-4">{metadata.title}</h1>
<h1 className="mb-4 text-3xl font-bold">{metadata.title}</h1>
<div className="flex flex-wrap gap-4 items-center text-muted-foreground mb-6">
<time dateTime={metadata.publishedAt}>{metadata.publishedAt}</time>
{metadata.tags && (
<div className="flex flex-wrap gap-2">
{metadata.tags.map((tag: string) => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</div>
)}
</div>
<div className="mb-6 flex flex-wrap items-center gap-4 text-muted-foreground">
<time dateTime={metadata.publishedAt}>{metadata.publishedAt}</time>
{metadata.tags && (
<div className="flex flex-wrap gap-2">
{metadata.tags.map((tag: string) => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</div>
)}
</div>
</div>
<div className="prose prose-zinc dark:prose-invert max-w-none">
<Post />
</div>
</article>
);
<div className="prose prose-zinc max-w-none dark:prose-invert">
<Post />
</div>
</article>
);
}

158
src/app/blog/page.tsx
View File

@@ -1,87 +1,107 @@
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "~/components/ui/card";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { BookOpen } from "lucide-react";
import fs from "fs";
import path from "path";
interface BlogPost {
title: string;
publishedAt: string;
summary: string;
tags?: string[];
slug: string;
}
// Helper to get blog posts
async function getBlogPosts() {
const contentDir = path.join(process.cwd(), "src/content/blog");
const files = fs.readdirSync(contentDir);
async function getBlogPosts(): Promise<BlogPost[]> {
const contentDir = path.join(process.cwd(), "src/content/blog");
const files = fs.readdirSync(contentDir);
const posts = await Promise.all(
files
.filter((file) => file.endsWith(".mdx"))
.map(async (file) => {
const slug = file.replace(".mdx", "");
// Dynamic import to get metadata
const { metadata } = await import(`~/content/blog/${file}`);
return {
slug,
...metadata,
};
})
);
const posts = await Promise.all(
files
.filter((file) => file.endsWith(".mdx"))
.map(async (file) => {
const slug = file.replace(".mdx", "");
// Dynamic import to get metadata
const { metadata } = (await import(`~/content/blog/${file}`)) as {
metadata: Omit<BlogPost, "slug">;
};
return {
slug,
...metadata,
};
}),
);
return posts.sort((a, b) => {
if (new Date(a.publishedAt) > new Date(b.publishedAt)) {
return -1;
}
return 1;
});
return posts.sort((a, b) => {
if (new Date(a.publishedAt) > new Date(b.publishedAt)) {
return -1;
}
return 1;
});
}
export const metadata = {
title: "Blog",
description: "Thoughts, tutorials, and project deep-dives.",
title: "Blog",
description: "Thoughts, tutorials, and project deep-dives.",
};
export default async function BlogPage() {
const posts = await getBlogPosts();
const posts = await getBlogPosts();
return (
<div className="space-y-8">
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<div className="flex items-start gap-3">
<BookOpen className="h-8 w-8 text-primary" />
<div>
<h1 className="mb-2 text-2xl font-bold">Blog</h1>
</div>
</div>
<p className="mt-2 text-lg text-muted-foreground">
Deep dives into my projects, tutorials, and thoughts on technology.
</p>
</section>
<div className="grid gap-6 animate-fade-in-up-delay-2">
{posts.map((post) => (
<Link key={post.slug} href={`/blog/${post.slug}`} className="block card-hover">
<Card className="h-full transition-colors hover:bg-muted/50">
<CardHeader>
<div className="flex justify-between items-start">
<CardTitle className="text-xl mb-2">{post.title}</CardTitle>
<span className="text-sm text-muted-foreground whitespace-nowrap ml-4">
{post.publishedAt}
</span>
</div>
<CardDescription className="text-base">
{post.summary}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{post.tags?.map((tag: string) => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</div>
</CardContent>
</Card>
</Link>
))}
</div>
return (
<div className="space-y-8">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<BookOpen className="h-8 w-8 text-primary" />
<div>
<h1 className="mb-2 text-2xl font-bold">Blog</h1>
</div>
</div>
);
<p className="mt-2 text-lg text-muted-foreground">
Deep dives into my projects, tutorials, and thoughts on technology.
</p>
</section>
<div className="animate-fade-in-up-delay-2 grid gap-6">
{posts.map((post) => (
<Link
key={post.slug}
href={`/blog/${post.slug}`}
className="card-hover block"
>
<Card className="h-full transition-colors hover:bg-muted/50">
<CardHeader>
<div className="flex items-start justify-between">
<CardTitle className="mb-2 text-xl">{post.title}</CardTitle>
<span className="ml-4 whitespace-nowrap text-sm text-muted-foreground">
{post.publishedAt}
</span>
</div>
<CardDescription className="text-base">
{post.summary}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{post.tags?.map((tag: string) => (
<Badge key={tag} variant="secondary">
{tag}
</Badge>
))}
</div>
</CardContent>
</Card>
</Link>
))}
</div>
</div>
);
}

12
src/app/cv/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useRef, useEffect, useCallback } from "react";
import { useState, useRef, useEffect } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
import {
Card,
@@ -22,8 +22,6 @@ import {
ChevronRight,
AlertCircle,
Loader2,
Maximize2,
Minimize2,
Eye,
} from "lucide-react";
import Link from "next/link";
@@ -116,7 +114,7 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
}
};
loadPDF();
void loadPDF();
}, [url, isClient]);
useEffect(() => {
@@ -177,7 +175,7 @@ function PDFViewer({ url, title, type }: PDFViewerProps) {
}
};
renderPage();
void renderPage();
}, [pdfDoc, pageNum, scale, rotation]);
const nextPage = () => {
@@ -481,7 +479,7 @@ export default function CVPage() {
return (
<div className="space-y-6">
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<FileText className="h-8 w-8 text-primary" />
<div>
@@ -520,8 +518,6 @@ export default function CVPage() {
</TabsContent>
</Tabs>
</div>
</div>
);
}

4
src/app/experience/page.tsx
View File

@@ -55,7 +55,7 @@ export default function ExperiencePage() {
const renderExperienceSection = (
title: string,
experiences: typeof researchExperience,
delay: number = 1,
delay = 1,
) => (
<section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">{title}</h2>
@@ -118,7 +118,7 @@ export default function ExperiencePage() {
return (
<div className="space-y-12">
{/* Header */}
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<Building className="h-8 w-8 text-primary" />
<div>

13
src/app/layout.tsx
View File

@@ -1,4 +1,3 @@
import Script from "next/script";
import type { Metadata } from "next";
import { env } from "~/env";
@@ -26,20 +25,20 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
suppressHydrationWarning
>
<body
className="flex min-h-screen flex-col bg-background font-sans text-foreground relative"
className="relative flex min-h-screen flex-col bg-background font-sans text-foreground"
suppressHydrationWarning
>
{/* Background Elements */}
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
<div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
<div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
</div>
{env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
<Script
defer
src={
env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ||
env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ??
"https://analytics.umami.is/script.js"
}
data-website-id={env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
@@ -48,9 +47,9 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
<BreadcrumbProvider>
<Navigation />
<div className="flex flex-1 pt-24 flex-col lg:flex-row">
<div className="flex flex-1 flex-col pt-24 lg:flex-row">
<Sidebar />
<div className="flex-1 min-w-0 lg:pl-96">
<div className="min-w-0 flex-1 lg:pl-96">
<div className="mx-auto max-w-screen-xl px-6 sm:px-8 lg:pl-0 lg:pr-8">
<main className="pb-8 pt-4">
<BreadcrumbWrapper />

27
src/app/page.tsx
View File

@@ -1,19 +1,20 @@
import {
ArrowUpRight,
Code,
FlaskConical,
Users,
GraduationCap,
Building,
MapPin,
Mail,
ExternalLink,
BookOpen,
School,
Award,
Calendar,
BookOpen,
Building,
Code,
ExternalLink,
FlaskConical,
GraduationCap,
Mail,
MapPin,
School,
Users
} from "lucide-react";
import Link from "next/link";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import {
Card,
CardContent,
@@ -21,9 +22,7 @@ import {
CardHeader,
CardTitle,
} from "~/components/ui/card";
import { Button } from "~/components/ui/button";
import { Badge } from "~/components/ui/badge";
import { researchInterests, education, experiences, awards } from "~/lib/data";
import { awards, education, experiences, researchInterests } from "~/lib/data";
export default function HomePage() {
const researchExperience = experiences.filter(

383
src/app/projects/page.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { useEffect, useState } from "react";
import {
Card,
CardHeader,
@@ -14,21 +13,14 @@ import Link from "next/link";
import { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react";
import { projects } from "~/lib/data";
import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
import { CardSkeleton } from "~/components/ui/skeletons";
export default function ProjectsPage() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, []);
const featuredProjects = projects.filter((p) => p.featured);
const otherProjects = projects.filter((p) => !p.featured);
return (
<div className="space-y-8">
<section className="prose prose-zinc dark:prose-invert max-w-none">
<section className="prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<FolderGit2 className="h-8 w-8 text-primary" />
<div>
@@ -45,87 +37,207 @@ export default function ProjectsPage() {
<section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Featured Work</h2>
<div className="space-y-8">
{loading ? (
<>
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</>
) : (
featuredProjects.map((project, index) => (
{featuredProjects.map((project, index) => (
<div
key={index}
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
>
<Card className="overflow-hidden">
<div className="flex flex-col lg:flex-row">
{/* Project Image */}
{project.image && (
<div className="lg:w-1/3">
<div className="flex items-center justify-center p-4 lg:h-full">
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt ?? project.title}
width={400}
height={300}
className="h-auto w-full object-contain"
containerClassName="w-full rounded-xl shadow-md overflow-hidden"
priority={index === 0}
/>
</div>
</div>
)}
{/* Project Content */}
<div className="card-content-stretch flex flex-1 flex-col p-6">
<div className="flex-1 space-y-4">
<div>
<CardTitle className="break-words text-xl leading-tight">
{project.title}
</CardTitle>
<CardDescription className="mt-2 break-words text-base leading-relaxed">
{project.description}
</CardDescription>
</div>
<p className="break-words leading-relaxed text-muted-foreground">
{project.longDescription}
</p>
</div>
<div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div className="flex flex-wrap gap-2">
{project.tags.map((tag) => (
<Badge
key={tag}
variant="secondary"
className="break-words"
>
{tag}
</Badge>
))}
</div>
<div className="flex gap-2 sm:flex-shrink-0">
{project.link && project.link.startsWith("/") && (
<Button
variant="outline"
asChild
className="button-hover"
>
<Link href={project.link}>
{project.title ===
"LaTeX Introduction Tutorial" ? (
<>
<Play className="mr-2 h-4 w-4" />
Watch Tutorial
</>
) : (
<>
<BookOpen className="mr-2 h-4 w-4" />
Learn More
</>
)}
</Link>
</Button>
)}
{project.websiteLink && (
<Button
variant="outline"
asChild
className="button-hover"
>
<Link
href={project.websiteLink}
target="_blank"
rel="noopener noreferrer"
>
<ArrowUpRight className="mr-2 h-4 w-4" />
Visit Site
</Link>
</Button>
)}
{project.gitLink && (
<Button
variant="outline"
asChild
className="button-hover"
>
<Link
href={project.gitLink}
target="_blank"
rel="noopener noreferrer"
>
<Github className="mr-2 h-4 w-4" />
View Code
</Link>
</Button>
)}
{project.link &&
!project.link.startsWith("/") &&
!project.websiteLink &&
!project.gitLink && (
<Button
variant="outline"
asChild
className="button-hover"
>
<Link
href={project.link}
target="_blank"
rel="noopener noreferrer"
>
<ArrowUpRight className="mr-2 h-4 w-4" />
View Project
</Link>
</Button>
)}
</div>
</div>
</div>
</div>
</Card>
</div>
))}
</div>
</section>
{/* Other Projects */}
{otherProjects.length > 0 && (
<section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Additional Projects</h2>
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
{otherProjects.map((project, index) => (
<div
key={index}
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
>
<Card className="overflow-hidden">
<div className="flex flex-col lg:flex-row">
{/* Project Image */}
{project.image && (
<div className="lg:w-1/3">
<div className="flex items-center justify-center p-4 lg:h-full">
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt || project.title}
width={400}
height={300}
className="h-auto w-full object-contain"
containerClassName="w-full rounded-xl shadow-md overflow-hidden"
priority={index === 0}
/>
</div>
</div>
)}
<Card className="card-full-height flex flex-col">
{project.image && (
<div className="flex h-48 items-center justify-center p-4">
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt ?? project.title}
width={400}
height={250}
className="h-auto max-h-full w-full object-contain"
containerClassName="w-full h-full flex items-center justify-center rounded-xl shadow-md overflow-hidden"
/>
</div>
)}
{/* Project Content */}
<div className="card-content-stretch flex flex-1 flex-col p-6">
<div className="flex-1 space-y-4">
<div className="flex flex-1 flex-col p-6">
<div className="flex flex-1 flex-col">
<CardHeader className="p-0">
<div>
<CardTitle className="break-words text-xl leading-tight">
<CardTitle className="break-words text-lg leading-tight">
{project.title}
</CardTitle>
<CardDescription className="mt-2 break-words text-base leading-relaxed">
{project.description}
</CardDescription>
</div>
<CardDescription className="mt-2 break-words leading-relaxed">
{project.description}
</CardDescription>
</CardHeader>
<p className="break-words leading-relaxed text-muted-foreground">
{project.longDescription}
</p>
</div>
<div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<CardContent className="flex flex-1 flex-col p-0 pt-4">
<div className="flex flex-wrap gap-2">
{project.tags.map((tag) => (
<Badge
key={tag}
variant="secondary"
className="break-words"
className="break-words text-xs"
>
{tag}
</Badge>
))}
</div>
<div className="flex gap-2 sm:flex-shrink-0">
<div className="mt-auto flex gap-2 pt-4">
{project.link && project.link.startsWith("/") && (
<Button
variant="outline"
asChild
className="button-hover"
className="button-hover sm:flex-shrink-0"
>
<Link href={project.link}>
{project.title ===
"LaTeX Introduction Tutorial" ? (
<>
<Play className="mr-2 h-4 w-4" />
Watch Tutorial
</>
) : (
<>
<BookOpen className="mr-2 h-4 w-4" />
Learn More
</>
)}
<BookOpen className="mr-2 h-4 w-4" />
Learn More
</Link>
</Button>
)}
@@ -134,7 +246,7 @@ export default function ProjectsPage() {
<Button
variant="outline"
asChild
className="button-hover"
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.websiteLink}
@@ -151,7 +263,7 @@ export default function ProjectsPage() {
<Button
variant="outline"
asChild
className="button-hover"
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.gitLink}
@@ -171,7 +283,7 @@ export default function ProjectsPage() {
<Button
variant="outline"
asChild
className="button-hover"
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.link}
@@ -184,147 +296,12 @@ export default function ProjectsPage() {
</Button>
)}
</div>
</div>
</CardContent>
</div>
</div>
</Card>
</div>
))
)}
</div>
</section>
{/* Other Projects */}
{otherProjects.length > 0 && (
<section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Additional Projects</h2>
<div className="grid-equal-height grid gap-6 md:grid-cols-2">
{loading ? (
<>
<CardSkeleton />
<CardSkeleton />
</>
) : (
otherProjects.map((project, index) => (
<div
key={index}
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
>
<Card className="card-full-height flex flex-col">
{project.image && (
<div className="flex h-48 items-center justify-center p-4">
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt || project.title}
width={400}
height={250}
className="h-auto max-h-full w-full object-contain"
containerClassName="w-full h-full flex items-center justify-center rounded-xl shadow-md overflow-hidden"
/>
</div>
)}
<div className="flex flex-1 flex-col p-6">
<div className="flex flex-1 flex-col">
<CardHeader className="p-0">
<div>
<CardTitle className="break-words text-lg leading-tight">
{project.title}
</CardTitle>
</div>
<CardDescription className="mt-2 break-words leading-relaxed">
{project.description}
</CardDescription>
</CardHeader>
<CardContent className="flex flex-1 flex-col p-0 pt-4">
<div className="flex flex-wrap gap-2">
{project.tags.map((tag) => (
<Badge
key={tag}
variant="secondary"
className="break-words text-xs"
>
{tag}
</Badge>
))}
</div>
<div className="mt-auto flex gap-2 pt-4">
{project.link && project.link.startsWith("/") && (
<Button
variant="outline"
asChild
className="button-hover sm:flex-shrink-0"
>
<Link href={project.link}>
<BookOpen className="mr-2 h-4 w-4" />
Learn More
</Link>
</Button>
)}
{project.websiteLink && (
<Button
variant="outline"
asChild
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.websiteLink}
target="_blank"
rel="noopener noreferrer"
>
<ArrowUpRight className="mr-2 h-4 w-4" />
Visit Site
</Link>
</Button>
)}
{project.gitLink && (
<Button
variant="outline"
asChild
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.gitLink}
target="_blank"
rel="noopener noreferrer"
>
<Github className="mr-2 h-4 w-4" />
View Code
</Link>
</Button>
)}
{project.link &&
!project.link.startsWith("/") &&
!project.websiteLink &&
!project.gitLink && (
<Button
variant="outline"
asChild
className="button-hover sm:flex-shrink-0"
>
<Link
href={project.link}
target="_blank"
rel="noopener noreferrer"
>
<ArrowUpRight className="mr-2 h-4 w-4" />
View Project
</Link>
</Button>
)}
</div>
</CardContent>
</div>
</div>
</Card>
</div>
))
)}
))}
</div>
</section>
)}

8
src/app/publications/page.tsx
View File

@@ -5,7 +5,6 @@ import {
BookOpenText,
FileText,
Presentation,
BookOpen,
Monitor,
} from "lucide-react";
import Link from "next/link";
@@ -18,7 +17,6 @@ import {
CardHeader,
CardTitle,
} from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton";
import { CardSkeleton } from "~/components/ui/skeletons";
import type { Publication } from "~/lib/bibtex";
import { parseBibtex } from "~/lib/bibtex";
@@ -27,10 +25,10 @@ import { parseBibtex } from "~/lib/bibtex";
export default function PublicationsPage() {
const [publications, setPublications] = useState<Publication[]>([]);
const [loading, setLoading] = useState(true);
const tagsToStrip = ["paperUrl", "posterUrl"];
useEffect(() => {
fetch("/publications.bib")
void fetch("/publications.bib")
.then((res) => res.text())
.then((text) => {
const pubs = parseBibtex(text);
@@ -85,7 +83,7 @@ export default function PublicationsPage() {
return (
<div className="space-y-6">
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<BookOpenText className="h-8 w-8 text-primary" />
<div>

6
src/app/travel/page.tsx
View File

@@ -26,7 +26,7 @@ export default function TripsPage() {
return (
<div className="space-y-6">
<section className="animate-fade-in-up prose prose-zinc dark:prose-invert max-w-none">
<section className="animate-fade-in-up prose prose-zinc max-w-none dark:prose-invert">
<div className="flex items-start gap-3">
<Plane className="h-8 w-8 text-primary" />
<div>
@@ -63,9 +63,7 @@ export default function TripsPage() {
<ImageWithSkeleton
src={image}
alt={
trip.alts && trip.alts[imgIndex]
? trip.alts[imgIndex]
: `${trip.title} - image ${imgIndex + 1}`
trip.alts?.[imgIndex] ?? `${trip.title} - image ${imgIndex + 1}`
}
width={250}
height={200}

4
src/components/AccessibleVideo.tsx
View File

@@ -80,7 +80,7 @@ export function AccessibleVideo({
controls
src={src}
aria-label={title}
title={posterAlt || title}
title={posterAlt ?? title}
>
{captionSrc && (
<track
@@ -148,7 +148,7 @@ export function AccessibleVideo({
View Full Transcript
</summary>
<div className="mt-2 rounded-md bg-muted p-4">
<div className="prose prose-sm dark:prose-invert max-w-none">
<div className="prose prose-sm max-w-none dark:prose-invert">
<div dangerouslySetInnerHTML={{ __html: transcript }} />
</div>
</div>

14
src/components/BreadcrumbUpdater.tsx
View File

@@ -4,13 +4,13 @@ import { useEffect } from "react";
import { useBreadcrumb } from "~/context/BreadcrumbContext";
export function BreadcrumbUpdater({ title }: { title: string }) {
const { setCustomTitle } = useBreadcrumb();
const { setCustomTitle } = useBreadcrumb();
// Use effect to set title on mount and clear on unmount
useEffect(() => {
setCustomTitle(title);
return () => setCustomTitle(null);
}, [title, setCustomTitle]);
// Use effect to set title on mount and clear on unmount
useEffect(() => {
setCustomTitle(title);
return () => setCustomTitle(null);
}, [title, setCustomTitle]);
return null;
return null;
}

354
src/components/ColorPalette.tsx
View File

@@ -5,189 +5,217 @@ import { cn } from "~/lib/utils";
// Helper to convert HSL string (e.g., "0 0% 100%") to Hex
function hslToHex(hsl: string) {
const [h = 0, s = 0, l = 0] = hsl.split(" ").map((val) => parseFloat(val));
const [h = 0, s = 0, l = 0] = hsl.split(" ").map((val) => parseFloat(val));
const hDecimal = h / 360;
const sDecimal = s / 100;
const lDecimal = l / 100;
const hDecimal = h / 360;
const sDecimal = s / 100;
const lDecimal = l / 100;
let r, g, b;
let r, g, b;
if (s === 0) {
r = g = b = lDecimal; // achromatic
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;
const p = 2 * lDecimal - q;
r = hue2rgb(p, q, hDecimal + 1 / 3);
g = hue2rgb(p, q, hDecimal);
b = hue2rgb(p, q, hDecimal - 1 / 3);
}
const toHex = (x: number) => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? "0" + hex : hex;
if (s === 0) {
r = g = b = lDecimal; // achromatic
} else {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
const q =
lDecimal < 0.5
? lDecimal * (1 + sDecimal)
: lDecimal + sDecimal - lDecimal * sDecimal;
const p = 2 * lDecimal - q;
r = hue2rgb(p, q, hDecimal + 1 / 3);
g = hue2rgb(p, q, hDecimal);
b = hue2rgb(p, q, hDecimal - 1 / 3);
}
const toHex = (x: number) => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}
const THEME_COLORS = {
light: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
"card-foreground": "240 10% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
primary: "240 5.9% 10%",
"primary-foreground": "0 0% 98%",
secondary: "240 4.8% 90%",
"secondary-foreground": "240 5.9% 10%",
muted: "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
accent: "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "240 10% 3.9%",
},
dark: {
background: "240 10% 3.9%",
foreground: "0 0% 98%",
card: "240 10% 3.9%",
"card-foreground": "0 0% 98%",
popover: "240 10% 3.9%",
"popover-foreground": "0 0% 98%",
primary: "0 0% 98%",
"primary-foreground": "240 5.9% 10%",
secondary: "240 3.7% 20%",
"secondary-foreground": "0 0% 98%",
muted: "240 3.7% 15.9%",
"muted-foreground": "240 5% 64.9%",
accent: "240 3.7% 15.9%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "240 4.9% 83.9%",
},
light: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
"card-foreground": "240 10% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
primary: "240 5.9% 10%",
"primary-foreground": "0 0% 98%",
secondary: "240 4.8% 90%",
"secondary-foreground": "240 5.9% 10%",
muted: "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
accent: "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "240 10% 3.9%",
},
dark: {
background: "240 10% 3.9%",
foreground: "0 0% 98%",
card: "240 10% 3.9%",
"card-foreground": "0 0% 98%",
popover: "240 10% 3.9%",
"popover-foreground": "0 0% 98%",
primary: "0 0% 98%",
"primary-foreground": "240 5.9% 10%",
secondary: "240 3.7% 20%",
"secondary-foreground": "0 0% 98%",
muted: "240 3.7% 15.9%",
"muted-foreground": "240 5% 64.9%",
accent: "240 3.7% 15.9%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "240 4.9% 83.9%",
},
};
const ColorSwatch = ({ hsl, title }: { hsl: string; title: string }) => {
const [copied, setCopied] = useState(false);
const hex = hslToHex(hsl);
const [copied, setCopied] = useState(false);
const hex = hslToHex(hsl);
const copyToClipboard = () => {
navigator.clipboard.writeText(hex);
setCopied(true);
setTimeout(() => setCopied(false), 1000);
};
const copyToClipboard = () => {
void navigator.clipboard.writeText(hex);
setCopied(true);
setTimeout(() => setCopied(false), 1000);
};
return (
<div className="group relative flex flex-col items-center">
<div
className={cn(
"h-12 w-12 flex-shrink-0 rounded-lg shadow-sm cursor-pointer transition-transform active:scale-95 border border-border/20",
)}
style={{ backgroundColor: hex }}
onClick={copyToClipboard}
title={`${title} (${hex})`}
/>
<div className="absolute -bottom-8 opacity-0 group-hover:opacity-100 transition-opacity bg-popover text-popover-foreground text-xs px-2 py-1 rounded shadow-md whitespace-nowrap z-10 pointer-events-none border border-border">
{copied ? "Copied!" : hex}
</div>
</div>
);
return (
<div className="group relative flex flex-col items-center">
<div
className={cn(
"h-12 w-12 flex-shrink-0 cursor-pointer rounded-lg border border-border/20 shadow-sm transition-transform active:scale-95",
)}
style={{ backgroundColor: hex }}
onClick={copyToClipboard}
title={`${title} (${hex})`}
/>
<div className="pointer-events-none absolute -bottom-8 z-10 whitespace-nowrap rounded border border-border bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 shadow-md transition-opacity group-hover:opacity-100">
{copied ? "Copied!" : hex}
</div>
</div>
);
};
const ColorSection = ({ mode, colors }: { mode: "light" | "dark"; colors: typeof THEME_COLORS.light }) => {
return (
<div className="space-y-4">
<h4 className="font-heading font-bold capitalize text-lg">{mode} Mode</h4>
const ColorSection = ({
mode,
colors,
}: {
mode: "light" | "dark";
colors: typeof THEME_COLORS.light;
}) => {
return (
<div className="space-y-4">
<h4 className="font-heading text-lg font-bold capitalize">{mode} Mode</h4>
{/* Backgrounds */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="w-24 text-sm font-medium">Backgrounds</div>
<div className="flex gap-2 flex-wrap">
<ColorSwatch hsl={colors.background} title="background" />
<ColorSwatch hsl={colors.card} title="card" />
<ColorSwatch hsl={colors.popover} title="popover" />
<ColorSwatch hsl={colors.muted} title="muted" />
<ColorSwatch hsl={colors.secondary} title="secondary" />
</div>
</div>
{/* Foregrounds */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="w-24 text-sm font-medium">Foregrounds</div>
<div className="flex gap-2 flex-wrap">
<ColorSwatch hsl={colors.foreground} title="foreground" />
<ColorSwatch hsl={colors["card-foreground"]} title="card-foreground" />
<ColorSwatch hsl={colors["popover-foreground"]} title="popover-foreground" />
<ColorSwatch hsl={colors["muted-foreground"]} title="muted-foreground" />
<ColorSwatch hsl={colors["secondary-foreground"]} title="secondary-foreground" />
</div>
</div>
{/* Primary */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="w-24 text-sm font-medium">Primary</div>
<div className="flex gap-2 flex-wrap">
<ColorSwatch hsl={colors.primary} title="primary" />
<ColorSwatch hsl={colors["primary-foreground"]} title="primary-foreground" />
</div>
</div>
{/* Destructive */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="w-24 text-sm font-medium">Destructive</div>
<div className="flex gap-2 flex-wrap">
<ColorSwatch hsl={colors.destructive} title="destructive" />
<ColorSwatch hsl={colors["destructive-foreground"]} title="destructive-foreground" />
</div>
</div>
{/* UI Elements */}
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="w-24 text-sm font-medium">UI Elements</div>
<div className="flex gap-2 flex-wrap">
<ColorSwatch hsl={colors.border} title="border" />
<ColorSwatch hsl={colors.input} title="input" />
<ColorSwatch hsl={colors.ring} title="ring" />
</div>
</div>
{/* Backgrounds */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<div className="w-24 text-sm font-medium">Backgrounds</div>
<div className="flex flex-wrap gap-2">
<ColorSwatch hsl={colors.background} title="background" />
<ColorSwatch hsl={colors.card} title="card" />
<ColorSwatch hsl={colors.popover} title="popover" />
<ColorSwatch hsl={colors.muted} title="muted" />
<ColorSwatch hsl={colors.secondary} title="secondary" />
</div>
);
</div>
{/* Foregrounds */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<div className="w-24 text-sm font-medium">Foregrounds</div>
<div className="flex flex-wrap gap-2">
<ColorSwatch hsl={colors.foreground} title="foreground" />
<ColorSwatch
hsl={colors["card-foreground"]}
title="card-foreground"
/>
<ColorSwatch
hsl={colors["popover-foreground"]}
title="popover-foreground"
/>
<ColorSwatch
hsl={colors["muted-foreground"]}
title="muted-foreground"
/>
<ColorSwatch
hsl={colors["secondary-foreground"]}
title="secondary-foreground"
/>
</div>
</div>
{/* Primary */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<div className="w-24 text-sm font-medium">Primary</div>
<div className="flex flex-wrap gap-2">
<ColorSwatch hsl={colors.primary} title="primary" />
<ColorSwatch
hsl={colors["primary-foreground"]}
title="primary-foreground"
/>
</div>
</div>
{/* Destructive */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<div className="w-24 text-sm font-medium">Destructive</div>
<div className="flex flex-wrap gap-2">
<ColorSwatch hsl={colors.destructive} title="destructive" />
<ColorSwatch
hsl={colors["destructive-foreground"]}
title="destructive-foreground"
/>
</div>
</div>
{/* UI Elements */}
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
<div className="w-24 text-sm font-medium">UI Elements</div>
<div className="flex flex-wrap gap-2">
<ColorSwatch hsl={colors.border} title="border" />
<ColorSwatch hsl={colors.input} title="input" />
<ColorSwatch hsl={colors.ring} title="ring" />
</div>
</div>
</div>
);
};
export function ColorPalette() {
return (
<div className="space-y-12 not-prose my-8">
<div>
<h3 className="text-lg font-bold mb-4">Scales</h3>
<p className="text-muted-foreground mb-6">
The system uses semantic color scales that adapt to the current theme. Hover to see hex codes.
</p>
return (
<div className="not-prose my-8 space-y-12">
<div>
<h3 className="mb-4 text-lg font-bold">Scales</h3>
<p className="mb-6 text-muted-foreground">
The system uses semantic color scales that adapt to the current theme.
Hover to see hex codes.
</p>
<div className="grid gap-12 lg:grid-cols-2">
<ColorSection mode="light" colors={THEME_COLORS.light} />
<div className="h-px bg-border/50 lg:hidden" />
<ColorSection mode="dark" colors={THEME_COLORS.dark} />
</div>
</div>
<div className="grid gap-12 lg:grid-cols-2">
<ColorSection mode="light" colors={THEME_COLORS.light} />
<div className="h-px bg-border/50 lg:hidden" />
<ColorSection mode="dark" colors={THEME_COLORS.dark} />
</div>
);
</div>
</div>
);
}

8
src/components/Navigation.tsx
View File

@@ -14,7 +14,7 @@ import {
} from "lucide-react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useState } from "react";
const navItems = [
{ href: "/", label: "About", icon: Home },
@@ -34,13 +34,13 @@ export function Navigation() {
return (
<>
<nav
className={`fixed top-4 left-4 right-4 z-[51] rounded-2xl border bg-background/80 backdrop-blur-md shadow-sm transition-all duration-200 ${isOpen ? "border-transparent" : "border-border/60"
className={`fixed left-4 right-4 top-4 z-[51] rounded-2xl border bg-background/80 shadow-sm backdrop-blur-md transition-all duration-200 ${isOpen ? "border-transparent" : "border-border/60"
}`}
>
<div className="relative px-8">
<div className="flex h-16 items-center justify-between">
<Link href="/" className="flex items-center py-2">
<span className="text-xl font-semibold font-heading tracking-tight transition-colors hover:text-primary">
<span className="font-heading text-xl font-semibold tracking-tight transition-colors hover:text-primary">
Sean O&apos;Connor
</span>
</Link>
@@ -87,7 +87,7 @@ export function Navigation() {
aria-hidden="true"
/>
<div
className={`fixed left-4 right-4 top-24 z-50 overflow-hidden rounded-2xl border border-border/50 bg-background/80 backdrop-blur-md shadow-sm transition-all duration-300 lg:hidden ${isOpen ? "max-h-[calc(100vh-8rem)] opacity-100" : "max-h-0 opacity-0"
className={`fixed left-4 right-4 top-24 z-50 overflow-hidden rounded-2xl border border-border/50 bg-background/80 shadow-sm backdrop-blur-md transition-all duration-300 lg:hidden ${isOpen ? "max-h-[calc(100vh-8rem)] opacity-100" : "max-h-0 opacity-0"
}`}
>
<div className="flex flex-col space-y-2 p-4">

1
src/components/PageBreadcrumb.tsx
View File

@@ -4,7 +4,6 @@ import * as React from "react";
import { usePathname } from "next/navigation";
import {
Home,
ChevronRight,
FolderGit2,
BookOpenText,
Newspaper,

2
src/components/Sidebar.tsx
View File

@@ -70,7 +70,7 @@ export function Sidebar() {
)}
{/* Desktop layout - clean and elegant sidebar */}
<div className="hidden fixed top-24 left-4 bottom-4 w-80 rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl lg:block overflow-hidden">
<div className="fixed bottom-4 left-4 top-24 hidden w-80 overflow-hidden rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl lg:block">
<div className="flex h-full flex-col">
{/* Profile Section */}
<div className="flex-shrink-0 border-b border-border/50 px-8 py-8">

146
src/components/mdx/Cards.tsx
View File

@@ -4,92 +4,100 @@ import Link from "next/link";
import { cn } from "~/lib/utils";
interface CardGridProps {
children: React.ReactNode;
className?: string;
cols?: 2 | 3;
children: React.ReactNode;
className?: string;
cols?: 2 | 3;
}
export function CardGrid({ children, className, cols = 2 }: CardGridProps) {
return (
<div
className={cn(
"grid gap-6 my-6",
cols === 2 ? "md:grid-cols-2" : "md:grid-cols-3",
className
)}
>
{children}
</div>
);
return (
<div
className={cn(
"my-6 grid gap-6",
cols === 2 ? "md:grid-cols-2" : "md:grid-cols-3",
className,
)}
>
{children}
</div>
);
}
interface FeatureCardProps {
title: string;
icon: LucideIcon;
children: React.ReactNode;
className?: string;
title: string;
icon: LucideIcon;
children: React.ReactNode;
className?: string;
}
export function FeatureCard({ title, icon: Icon, children, className }: FeatureCardProps) {
return (
<Card className={cn("h-full", className)}>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2">
<Icon className="h-5 w-5" />
{title}
</CardTitle>
</CardHeader>
<CardContent className="pt-0 text-sm text-muted-foreground">
{children}
</CardContent>
</Card>
);
export function FeatureCard({
title,
icon: Icon,
children,
className,
}: FeatureCardProps) {
return (
<Card className={cn("h-full", className)}>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2">
<Icon className="h-5 w-5" />
{title}
</CardTitle>
</CardHeader>
<CardContent className="pt-0 text-sm text-muted-foreground">
{children}
</CardContent>
</Card>
);
}
interface ResourceCardProps {
title: string;
subtitle: string;
icon: LucideIcon;
href: string;
title: string;
subtitle: string;
icon: LucideIcon;
href: string;
}
export function ResourceCard({ title, subtitle, icon: Icon, href }: ResourceCardProps) {
return (
<Card className="h-full group cursor-pointer transition-colors hover:bg-accent">
<Link
href={href}
target="_blank"
rel="noopener noreferrer"
className="block p-4"
>
<CardContent className="p-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Icon className="h-6 w-6 text-primary" />
<div>
<div className="font-medium">{title}</div>
<div className="text-sm text-muted-foreground">{subtitle}</div>
</div>
</div>
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
</div>
</CardContent>
</Link>
</Card>
);
export function ResourceCard({
title,
subtitle,
icon: Icon,
href,
}: ResourceCardProps) {
return (
<Card className="group h-full cursor-pointer transition-colors hover:bg-accent">
<Link
href={href}
target="_blank"
rel="noopener noreferrer"
className="block p-4"
>
<CardContent className="p-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Icon className="h-6 w-6 text-primary" />
<div>
<div className="font-medium">{title}</div>
<div className="text-sm text-muted-foreground">{subtitle}</div>
</div>
</div>
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
</div>
</CardContent>
</Link>
</Card>
);
}
interface InfoCardProps {
children: React.ReactNode;
className?: string;
children: React.ReactNode;
className?: string;
}
export function InfoCard({ children, className }: InfoCardProps) {
return (
<Card className={cn("my-6", className)}>
<CardContent className="p-6 space-y-4">
{children}
</CardContent>
</Card>
);
return (
<Card className={cn("my-6", className)}>
<CardContent className="space-y-4 p-6">{children}</CardContent>
</Card>
);
}

3
src/components/ui/badge.tsx
View File

@@ -24,7 +24,8 @@ const badgeVariants = cva(
);
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
extends
React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {

5
src/components/ui/button.tsx
View File

@@ -35,8 +35,9 @@ const buttonVariants = cva(
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
extends
React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}

2
src/components/ui/card.tsx
View File

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
"rounded-3xl border border-border/60 bg-background/80 backdrop-blur-xl text-card-foreground shadow-sm overflow-hidden",
"overflow-hidden rounded-3xl border border-border/60 bg-background/80 text-card-foreground shadow-sm backdrop-blur-xl",
className,
)}
{...props}

4
src/components/ui/dropdown-menu.tsx
View File

@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-xl border border-border/50 bg-background/80 backdrop-blur-md p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-xl border border-border/50 bg-background/80 p-1 text-popover-foreground shadow-lg backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
@@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-border/50 bg-background/80 backdrop-blur-md p-1 text-popover-foreground shadow-md",
"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-border/50 bg-background/80 p-1 text-popover-foreground shadow-md backdrop-blur-md",
"origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}

52
src/components/ui/image-with-skeleton.tsx
View File

@@ -1,37 +1,41 @@
"use client";
import { useState } from "react";
import Image, { ImageProps } from "next/image";
import Image, { type ImageProps } from "next/image";
import { Skeleton } from "~/components/ui/skeleton";
import { cn } from "~/lib/utils";
interface ImageWithSkeletonProps extends ImageProps {
containerClassName?: string;
containerClassName?: string;
}
export function ImageWithSkeleton({
className,
containerClassName,
onLoad,
...props
className,
containerClassName,
onLoad,
alt,
...props
}: ImageWithSkeletonProps) {
const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
return (
<div className={cn("relative overflow-hidden", containerClassName)}>
{isLoading && <Skeleton className="absolute inset-0 h-full w-full" />}
<Image
className={cn(
"duration-700 ease-in-out",
isLoading ? "scale-110 blur-2xl grayscale" : "scale-100 blur-0 grayscale-0",
className
)}
onLoad={(e) => {
setIsLoading(false);
if (onLoad) onLoad(e);
}}
{...props}
/>
</div>
);
return (
<div className={cn("relative overflow-hidden", containerClassName)}>
{isLoading && <Skeleton className="absolute inset-0 h-full w-full" />}
<Image
alt={alt}
className={cn(
"duration-700 ease-in-out",
isLoading
? "scale-110 blur-2xl grayscale"
: "scale-100 blur-0 grayscale-0",
className,
)}
onLoad={(e) => {
setIsLoading(false);
if (onLoad) onLoad(e);
}}
{...props}
/>
</div>
);
}

2
src/components/ui/tabs.tsx
View File

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-9 items-center justify-center rounded-xl bg-background/80 backdrop-blur-md border border-border/50 shadow-sm p-1 text-muted-foreground",
"inline-flex h-9 items-center justify-center rounded-xl border border-border/50 bg-background/80 p-1 text-muted-foreground shadow-sm backdrop-blur-md",
className,
)}
{...props}

10
src/content/blog/accessibility.mdx
View File

@@ -5,9 +5,10 @@ import Link from "next/link";
export const metadata = {
title: "Accessibility Features",
publishedAt: "2024-11-01",
summary: "A deep dive into the process of building an inclusive web experience, from semantic HTML to custom accessible components.",
summary:
"A deep dive into the process of building an inclusive web experience, from semantic HTML to custom accessible components.",
tags: ["Accessibility", "WCAG", "Inclusive Design", "Web Standards"],
image: "/images/accessibility.png"
image: "/images/accessibility.png",
};
# Building an Inclusive Web Experience
@@ -21,22 +22,27 @@ For me, the motivation was twofold. Professionally, I wanted to demonstrate that
## The Implementation Process
### Starting with the Basics
The journey began with the fundamentals: **Semantic HTML**. I ensured that the site uses a logical heading hierarchy (`h1` through `h6`) so that screen reader users can easily navigate the document structure. I also made sure to use appropriate semantic elements like `<article>`, `<nav>`, and `<main>` instead of just wrapping everything in `div`s.
### Visual Accessibility
Color and contrast were next on my list. I carefully selected a color palette that meets **WCAG AA standards** for contrast, ensuring that text is readable for users with visual impairments. I also implemented a system-aware dark mode, which isn't just a cool feature—it's essential for users with light sensitivity.
I also built a strict **Image Alt System**. Every image on the site is required to have descriptive alt text. This ensures that users who rely on screen readers don't miss out on the context that images provide.
### Interactive Elements
One of the biggest challenges was ensuring **Keyboard Navigation**. I tested every interactive element—buttons, links, form inputs—to make sure they could be reached and operated using only a keyboard. This involved managing focus states and ensuring that the tab order was logical.
## Overcoming Technical Challenges
### The Hydration Problem
Working with Next.js presented a unique challenge: **Hydration**. The split between server-side rendering (SSR) and client-side interactivity can sometimes cause issues with accessibility tools if the HTML structure changes during hydration. To solve this, I created client-side wrapper components for complex interactive features. This allowed me to keep the performance benefits of SSR while ensuring a stable, accessible experience on the client.
### Video Accessibility
I didn't want to just embed a standard video player. I built a custom **AccessibleVideo** component that includes closed captions with a toggle, a full transcript, and keyboard-accessible controls. This ensures that my video content is accessible to users who are deaf or hard of hearing, as well as those who prefer reading over watching.
## Ongoing Commitment

46
src/content/blog/design-system.mdx
View File

@@ -1,9 +1,10 @@
export const metadata = {
title: "Designing My System: Soft, Translucent, and Alive",
publishedAt: "2025-12-10",
summary: "A deep dive into the design philosophy behind my personal website's new theme, moving from rigid boxes to organic, living layers.",
summary:
"A deep dive into the design philosophy behind my personal website's new theme, moving from rigid boxes to organic, living layers.",
tags: ["Design", "UI/UX", "TailwindCSS", "Frontend"],
image: "/images/design-system.png"
image: "/images/design-system.png",
};
## The Philosophy: Soft, Translucent, and Alive
@@ -22,9 +23,9 @@ The heartbeat of this theme is the background. Instead of a flat color or a stat
```tsx
// src/app/layout.tsx
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
<div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px)...] bg-[size:24px_24px]"></div>
<div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
<div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
</div>
```
@@ -36,10 +37,10 @@ One of the biggest structural changes was detaching the navigation and sidebar f
In a traditional layout, the sidebar is stuck to the left, and the navbar is stuck to the top. In this system, they are **floating cards**.
- **Navbar**: Fixed `top-4`, `left-4`, `right-4`.
- **Sidebar**: Fixed `top-24`, `left-4`, `bottom-4`.
- **Navbar**: Fixed `top-4`, `left-4`, `right-4`.
- **Sidebar**: Fixed `top-24`, `left-4`, `bottom-4`.
This creates a sense of layering. The UI elements aren't *part* of the window; they are tools floating *above* the content.
This creates a sense of layering. The UI elements aren't _part_ of the window; they are tools floating _above_ the content.
## Design Tokens
@@ -47,9 +48,9 @@ This creates a sense of layering. The UI elements aren't *part* of the window; t
I chose a base radius of `1rem` (16px) because it strikes the perfect balance between friendly and professional.
- **Cards**: `rounded-3xl` (24px). Large containers need softer corners to feel less imposing.
- **Buttons**: `rounded-xl` (12px). Tactile and clickable.
- **Icons**: `rounded-full`.
- **Cards**: `rounded-3xl` (24px). Large containers need softer corners to feel less imposing.
- **Buttons**: `rounded-xl` (12px). Tactile and clickable.
- **Icons**: `rounded-full`.
This softness extends to interaction states. When you hover over a card, the `overflow-hidden` property ensures that any inner content (like images or background fills) respects these curves perfectly.
@@ -57,9 +58,9 @@ This softness extends to interaction states. When you hover over a card, the `ov
Instead of heavy drop shadows to show depth, I rely on **Glassmorphism**.
- **Surface**: `bg-background/80` with `backdrop-blur-md`. This allows the "Living Blob" to bleed through, tinting the UI with the background color.
- **Border**: `border-border/60`. A subtle, semi-transparent border defines the edges.
- **Shadow**: `shadow-sm`. A very light lift, just enough to separate the layer.
- **Surface**: `bg-background/80` with `backdrop-blur-md`. This allows the "Living Blob" to bleed through, tinting the UI with the background color.
- **Border**: `border-border/60`. A subtle, semi-transparent border defines the edges.
- **Shadow**: `shadow-sm`. A very light lift, just enough to separate the layer.
### 3. Color Palette
@@ -75,21 +76,21 @@ For typography, I wanted to blend the readability of a digital product with the
### The Serif: Playfair Display
<p className="text-4xl font-heading mb-6">Playfair Display</p>
<p className="mb-6 font-heading text-4xl">Playfair Display</p>
I chose **Playfair Display** for all headings (`h1`–`h6`). It's a transitional serif typeface with high contrast strokes and delicate hairlines.
* **Why Serif?** Serifs feel "human", "established", and "emotional". They break the sterile "tech" vibe common in developer portfolios.
* **Why Playfair?** Its high contrast makes it perfect for large display sizes. It commands attention and adds a layer of sophistication that a sans-serif simply cannot achieve.
- **Why Serif?** Serifs feel "human", "established", and "emotional". They break the sterile "tech" vibe common in developer portfolios.
- **Why Playfair?** Its high contrast makes it perfect for large display sizes. It commands attention and adds a layer of sophistication that a sans-serif simply cannot achieve.
### The Sans: Inter
<p className="text-4xl font-sans mb-6">Inter</p>
<p className="mb-6 font-sans text-4xl">Inter</p>
I chose **Inter** for the body text. It is the gold standard for screen readability.
* **Why Sans?** Sans-serif fonts are "rational", "clean", and "invisible". They reduce cognitive load, making long-form reading (like this blog post) effortless.
* **Why Inter?** It was designed specifically for computer screens, with a tall x-height that remains legible even at small sizes.
- **Why Sans?** Sans-serif fonts are "rational", "clean", and "invisible". They reduce cognitive load, making long-form reading (like this blog post) effortless.
- **Why Inter?** It was designed specifically for computer screens, with a tall x-height that remains legible even at small sizes.
### Implementation
@@ -109,7 +110,12 @@ theme: {
```css
/* src/styles/globals.css */
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-heading; /* Playfair Display */
}

9
src/content/blog/eceg431.mdx
View File

@@ -1,9 +1,10 @@
export const metadata = {
title: "ECEG 431 E-Portfolio",
publishedAt: "2025-12-01",
summary: "E-Portfolio and reflection for the Nand2Tetris course, covering the journey from NAND gates to a high-level compiler.",
summary:
"E-Portfolio and reflection for the Nand2Tetris course, covering the journey from NAND gates to a high-level compiler.",
tags: ["Simulation", "Compilers", "Python", "Assembly", "VM", "OS"],
image: "/images/nand2tetris.png"
image: "/images/nand2tetris.png",
};
## Assignment Prompt
@@ -71,7 +72,7 @@ The "oh crap" moment. A dark figure from the past comes to haunt you; a love is
For the course, this could be lots of things. Work piling up? Concepts getting hard? Confusion setting in? Difficulty asking for help? Reliance on LLMs piling on? Not coming to class? Or maybe something entirely external to the course. What was it for you? There seems to be a common theme that happens to all of us in this course---we set out strong, start doing well with big dreams, but we typically all go through something and our original plans for the course start to crumble. What were those moments for you?
**[Project 5: The CPU](https://github.com/soconnor0919/eceg431/blob/main/05/CPU.hdl)**. This is where the "just wrapping logic gates" theory fell apart. It wasn't just logic anymore; it was *timing*. It was *control*. Decoding instructions was fine, but managing the control flow was a nightmare.
**[Project 5: The CPU](https://github.com/soconnor0919/eceg431/blob/main/05/CPU.hdl)**. This is where the "just wrapping logic gates" theory fell apart. It wasn't just logic anymore; it was _timing_. It was _control_. Decoding instructions was fine, but managing the control flow was a nightmare.
```hdl
// projects/05/CPU.hdl
@@ -83,7 +84,7 @@ Not(in=aInstr, out=cInstr); // cInstr = 1 when instruction[15] = 1
Mux16(a=instruction, b=aluOut, sel=cInstr, out=aRegIn);
```
As I wrote in my reflection: *"The problem was taking the instruction and turning it into something the ALU could handle... I just repeatedly hit my head against a wall."* (Project 5 Reflection). The fix wasn't more code. I had to stop coding and start drawing. I couldn't "hack" my way through a hardware definition. I had to understand the signals.
As I wrote in my reflection: _"The problem was taking the instruction and turning it into something the ALU could handle... I just repeatedly hit my head against a wall."_ (Project 5 Reflection). The fix wasn't more code. I had to stop coding and start drawing. I couldn't "hack" my way through a hardware definition. I had to understand the signals.
> There are three steps to solving a problem. Write down what you know, Think really hard, Write down the answer. You're at step 2.

7
src/content/blog/latex-intro.mdx
View File

@@ -6,9 +6,10 @@ import Link from "next/link";
export const metadata = {
title: "Getting Started with LaTeX",
publishedAt: "2024-10-15",
summary: "A guide to my 5-minute introduction to LaTeX, explaining why it's the gold standard for academic writing and how to get started.",
summary:
"A guide to my 5-minute introduction to LaTeX, explaining why it's the gold standard for academic writing and how to get started.",
tags: ["LaTeX", "Tutorial", "Accessibility", "Education", "Overleaf"],
image: "/latex-thumbnail.jpg"
image: "/latex-thumbnail.jpg",
};
export const transcript = `
@@ -30,7 +31,7 @@ export const transcript = `
In the world of engineering and science, clear communication is just as important as the technical work itself. I created this tutorial because I noticed many students struggling to format their mathematical equations and technical reports using standard word processors. **LaTeX** is the solution to that problem.
It's the gold standard for academic and technical document preparation, especially in mathematics, computer science, and physics. Once you get past the initial learning curve, it allows you to focus entirely on the *content* of your work, trusting the system to handle the *presentation* professionally.
It's the gold standard for academic and technical document preparation, especially in mathematics, computer science, and physics. Once you get past the initial learning curve, it allows you to focus entirely on the _content_ of your work, trusting the system to handle the _presentation_ professionally.
## The Tutorial

36
src/context/BreadcrumbContext.tsx
View File

@@ -3,26 +3,32 @@
import React, { createContext, useContext, useState } from "react";
interface BreadcrumbContextType {
customTitle: string | null;
setCustomTitle: (title: string | null) => void;
customTitle: string | null;
setCustomTitle: (title: string | null) => void;
}
const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(undefined);
const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(
undefined,
);
export function BreadcrumbProvider({ children }: { children: React.ReactNode }) {
const [customTitle, setCustomTitle] = useState<string | null>(null);
export function BreadcrumbProvider({
children,
}: {
children: React.ReactNode;
}) {
const [customTitle, setCustomTitle] = useState<string | null>(null);
return (
<BreadcrumbContext.Provider value={{ customTitle, setCustomTitle }}>
{children}
</BreadcrumbContext.Provider>
);
return (
<BreadcrumbContext.Provider value={{ customTitle, setCustomTitle }}>
{children}
</BreadcrumbContext.Provider>
);
}
export function useBreadcrumb() {
const context = useContext(BreadcrumbContext);
if (context === undefined) {
throw new Error("useBreadcrumb must be used within a BreadcrumbProvider");
}
return context;
const context = useContext(BreadcrumbContext);
if (context === undefined) {
throw new Error("useBreadcrumb must be used within a BreadcrumbProvider");
}
return context;
}

20
src/lib/bibtex.ts
View File

@@ -37,7 +37,7 @@ function parseAuthors(authorString: string): string[] {
function parseBibTeXEntry(entry: string): BibTeXEntry | null {
// Match the entry type and content
const typeMatch = entry.match(/^(\w+)\s*{\s*([\w\d-_]+)\s*,/);
const typeMatch = /^(\w+)\s*{\s*([\w\d-_]+)\s*,/.exec(entry);
if (!typeMatch) return null;
const type = typeMatch[1]!.toLowerCase();
@@ -55,7 +55,7 @@ function parseBibTeXEntry(entry: string): BibTeXEntry | null {
if (!trimmedLine || trimmedLine === "}") continue;
// Try to match a new field
const fieldMatch = trimmedLine.match(/(\w+)\s*=\s*{(.+?)},?$/);
const fieldMatch = /(\w+)\s*=\s*{(.+?)},?$/.exec(trimmedLine);
if (fieldMatch?.[1] && fieldMatch?.[2]) {
// Save previous field if exists
if (currentField) {
@@ -103,15 +103,15 @@ export function parseBibtex(bibtex: string): Publication[] {
})();
return {
title: entry.fields.title?.replace(/[{}]/g, "") || "",
authors: parseAuthors(entry.fields.author || ""),
title: entry.fields.title?.replace(/[{}]/g, "") ?? "",
authors: parseAuthors(entry.fields.author ?? ""),
venue:
entry.fields.booktitle ||
entry.fields.journal ||
entry.fields.organization ||
entry.fields.school ||
entry.fields.booktitle ??
entry.fields.journal ??
entry.fields.organization ??
entry.fields.school ??
"",
year: parseInt(entry.fields.year || "0", 10),
year: parseInt(entry.fields.year ?? "0", 10),
doi: entry.fields.doi,
url: entry.fields.url,
paperUrl: entry.fields.paperurl,
@@ -120,7 +120,7 @@ export function parseBibtex(bibtex: string): Publication[] {
abstract: entry.fields.abstract,
citationType: entry.type,
citationKey: entry.citationKey,
notes: entry.fields.note || entry.fields.notes,
notes: entry.fields.note ?? entry.fields.notes,
address: entry.fields.address,
type: publicationType,
};

12
src/lib/data.ts
View File

@@ -414,14 +414,7 @@ export const projects: Project[] = [
"A complete implementation of a general-purpose computer system, from NAND gates to a high-level object-oriented compiler.",
longDescription:
"Built a complete computer system from the ground up as part of the Nand2Tetris course (ECEG 431). Starting with a single NAND gate, I designed and simulated all hardware components including logic gates, ALU, RAM, and the CPU. On the software side, I developed an assembler, a virtual machine translator, and a compiler for a high-level object-oriented language, culminating in a fully functional Operating System. This project provided a deep, demystified understanding of how computers actually work under the hood.",
tags: [
"Simulation",
"Compilers",
"Python",
"Assembly",
"VM",
"OS",
],
tags: ["Simulation", "Compilers", "Python", "Assembly", "VM", "OS"],
link: "/blog/eceg431",
gitLink: "https://github.com/soconnor0919/eceg431",
image: "/images/nand2tetris.png",
@@ -443,8 +436,7 @@ export const projects: Project[] = [
},
{
title: "PDF2MD",
description:
"A web application that converts PDFs to Markdown files.",
description: "A web application that converts PDFs to Markdown files.",
longDescription:
"Uses OCR and PDF parsing to extract text and convert it to Markdown, for easy editing and formatting.",
tags: ["PDF", "Markdown", "OCR"],

6
src/mdx-components.tsx
View File

@@ -1,7 +1,7 @@
import type { MDXComponents } from "mdx/types";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
return {
...components,
};
}

4
tailwind.config.ts
View File

@@ -1,5 +1,7 @@
import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
import typography from "@tailwindcss/typography";
import tailwindAnimate from "tailwindcss-animate";
export default {
darkMode: "media",
@@ -64,5 +66,5 @@ export default {
},
},
},
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
plugins: [tailwindAnimate, typography],
} satisfies Config;