Reorganize with mono theme

2025-08-01 00:51:20 -04:00
parent ace4ce4932
commit 9609ed7eef
20 changed files with 11541 additions and 8529 deletions
@@ -1,34 +1,44 @@
-import { Analytics } from "@vercel/analytics/react"
-import { SpeedInsights } from "@vercel/speed-insights/next"
-import { Footer } from "~/components/Footer"
-import { Navigation } from "~/components/Navigation"
-import { Sidebar } from "~/components/Sidebar"
-import { BreadcrumbWrapper } from "~/components/BreadcrumbWrapper"
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import { Footer } from "~/components/Footer";
+import { Navigation } from "~/components/Navigation";
+import { Sidebar } from "~/components/Sidebar";
+import { BreadcrumbWrapper } from "~/components/BreadcrumbWrapper";

-import { inter } from "~/lib/fonts"
+import { inter } from "~/lib/fonts";
 import { description, name } from "~/lib/data";
-import "~/styles/globals.css"
+import "~/styles/globals.css";

 export const metadata = {
  title: `${name[0]?.first} ${name[0]?.last}`,
  description: description,
  icons: [{ rel: "icon", url: "/favicon.ico" }],
-}
+};

 export default function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning>
+      <body
+        className="flex min-h-screen flex-col bg-background font-sans text-foreground"
+        suppressHydrationWarning
+      >
        <Analytics />
        <SpeedInsights />
        <Navigation />
-        <div className="flex-1">
-          <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex flex-col lg:flex-row lg:gap-12">
-              <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
-                <Sidebar />
-              </aside>
-              <main className="flex-1 overflow-y-auto py-8">
+        <div className="flex flex-1">
+          {/* Desktop sidebar - extends to edge */}
+          <aside className="hidden overflow-y-auto lg:sticky lg:top-16 lg:block lg:h-[calc(100vh-4rem)]">
+            <Sidebar />
+          </aside>
+
+          <div className="flex-1">
+            {/* Mobile sidebar - horizontal intro bar only on homepage */}
+            <div className="px-4 sm:px-6 lg:hidden lg:px-8">
+              <Sidebar />
+            </div>
+
+            <div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
+              <main className="py-8">
                <BreadcrumbWrapper />
                {children}
              </main>
@@ -38,5 +48,5 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
        <Footer />
      </body>
    </html>
-  )
+  );
 }
@@ -1,6 +1,12 @@
-import { ArrowUpRight, Code, FlaskConical, Users } from 'lucide-react';
+import { ArrowUpRight, Code, FlaskConical, Users, Star } from "lucide-react";
 import Link from "next/link";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
 import { projects, name } from "~/lib/data";

 export default function HomePage() {
@@ -9,11 +15,15 @@ export default function HomePage() {
      {/* About Section */}
      <section className="space-y-6">
        <div>
-          <h1 className="text-2xl font-bold">Hi! I'm {name[0]?.first}. 👋</h1>
-          <p className="text-lg text-muted-foreground mt-2">
-            I am a Computer Science and Engineering student at Bucknell University, passionate about robotics,
-            software development, and human-computer interaction. With a strong foundation in both academic
-            research and practical development, I bridge the gap between theoretical concepts and real-world applications.
+          <h1 className="flex items-center gap-2 text-2xl font-bold">
+            Hi! I'm {name[0]?.first}.
+          </h1>
+          <p className="mt-2 text-lg text-muted-foreground">
+            I am a Computer Science and Engineering student at Bucknell
+            University, passionate about robotics, software development, and
+            human-computer interaction. With a strong foundation in both
+            academic research and practical development, I bridge the gap
+            between theoretical concepts and real-world applications.
          </p>
        </div>

@@ -25,8 +35,11 @@ export default function HomePage() {
            </div>
          </CardHeader>
          <CardContent className="space-y-2">
-            <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
-              <li>Full-stack development with modern frameworks (React, Next.js, Node.js)</li>
+            <ul className="list-disc space-y-2 pl-5 text-muted-foreground">
+              <li>
+                Full-stack development with modern frameworks (React, Next.js,
+                Node.js)
+              </li>
              <li>Robotics development using ROS2 and C++</li>
              <li>Systems programming and architecture design</li>
              <li>Database design and optimization (SQL, PostgreSQL)</li>
@@ -43,7 +56,7 @@ export default function HomePage() {
            </div>
          </CardHeader>
          <CardContent className="space-y-2">
-            <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+            <ul className="list-disc space-y-2 pl-5 text-muted-foreground">
              <li>Human-Robot Interaction studies and experimental design</li>
              <li>Published researcher at IEEE RO-MAN 2024</li>
              <li>Development of experimental platforms for HRI research</li>
@@ -60,7 +73,7 @@ export default function HomePage() {
            </div>
          </CardHeader>
          <CardContent className="space-y-2">
-            <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
+            <ul className="list-disc space-y-2 pl-5 text-muted-foreground">
              <li>President of AIChE Chem-E-Car Competition Team</li>
              <li>Treasurer of Bucknell Coffee Society</li>
              <li>Teaching Assistant for Computer Science courses</li>
@@ -73,10 +86,13 @@ export default function HomePage() {
      {/* Featured Projects Section */}
      <section className="space-y-6">
        <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">Featured Projects 🌟</h2>
+          <h2 className="flex items-center gap-2 text-2xl font-bold">
+            <Star className="h-6 w-6" />
+            Featured Projects
+          </h2>
          <Link
            href="/projects"
-            className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
+            className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
          >
            View all projects
            <ArrowUpRight className="h-4 w-4" />
@@ -84,7 +100,7 @@ export default function HomePage() {
        </div>
        <div className="space-y-6">
          {projects
-            .filter(project => project.featured)
+            .filter((project) => project.featured)
            .slice(0, 2)
            .map((project, index) => (
              <Card key={index}>
@@ -102,7 +118,9 @@ export default function HomePage() {
                      </Link>
                    )}
                  </div>
-                  <CardDescription className="text-base">{project.description}</CardDescription>
+                  <CardDescription className="text-base">
+                    {project.description}
+                  </CardDescription>
                </CardHeader>
              </Card>
            ))}
@@ -1,11 +1,18 @@
-'use client';
+"use client";

 import { useEffect, useState } from "react";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "~/components/ui/card";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import Link from "next/link";
-import { ArrowUpRight, Play, BookOpen } from "lucide-react";
+import { ArrowUpRight, Play, BookOpen, Star } from "lucide-react";
 import { projects } from "~/lib/data";
 import Image from "next/image";
 import { CardSkeleton } from "~/components/ui/skeletons";
@@ -20,10 +27,13 @@ export default function ProjectsPage() {
  return (
    <div className="space-y-6">
      <section className="prose prose-zinc dark:prose-invert max-w-none">
-        <h1 className="text-2xl font-bold">Featured Projects 🌟</h1>
-        <p className="text-lg text-muted-foreground mt-2">
-          A selection of my academic and professional projects, focusing on robotics, 
-          web development, and embedded systems.
+        <h1 className="flex items-center gap-2 text-2xl font-bold">
+          <Star className="h-6 w-6" />
+          Featured Projects
+        </h1>
+        <p className="mt-2 text-lg text-muted-foreground">
+          A selection of my academic and professional projects, focusing on
+          robotics, web development, and embedded systems.
        </p>
      </section>

@@ -42,8 +52,8 @@ export default function ProjectsPage() {
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle>{project.title}</CardTitle>
-                      {project.link && !project.link.startsWith('/') && (
-                        <Link 
+                      {project.link && !project.link.startsWith("/") && (
+                        <Link
                          href={project.link}
                          target="_blank"
                          rel="noopener noreferrer"
@@ -53,13 +63,15 @@ export default function ProjectsPage() {
                        </Link>
                      )}
                    </div>
-                    <CardDescription className="text-base">{project.description}</CardDescription>
+                    <CardDescription className="text-base">
+                      {project.description}
+                    </CardDescription>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-sm text-muted-foreground">
                      {project.longDescription}
                    </p>
-                    <div className="flex flex-wrap gap-2 mt-4">
+                    <div className="mt-4 flex flex-wrap gap-2">
                      {project.tags.map((tag) => (
                        <Badge key={tag} variant="secondary">
                          {tag}
@@ -67,15 +79,11 @@ export default function ProjectsPage() {
                      ))}
                    </div>
                  </CardContent>
-                  
-                  {project.link && project.link.startsWith('/') && (
+
+                  {project.link && project.link.startsWith("/") && (
                    <CardFooter className="pt-0">
                      <Link href={project.link}>
-                        <Button 
-                          variant="default" 
-                          size="sm"
-                          className="mt-0"
-                        >
+                        <Button variant="default" size="sm" className="mt-0">
                          {project.title === "LaTeX Introduction Tutorial" ? (
                            <>
                              <Play className="mr-2 h-4 w-4" />
@@ -92,23 +100,32 @@ export default function ProjectsPage() {
                    </CardFooter>
                  )}
                </div>
-                
+
                {project.image && (
-                  <div className="px-6 pb-6 lg:py-6 lg:w-1/3 md:px-24 lg:px-6">
-                    <Link href={project.link?.startsWith('/') ? project.link : project.link || '#'}>
-                      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-md transition-all hover:opacity-90">
+                  <div className="px-6 pb-6 md:px-24 lg:w-1/3 lg:px-6 lg:py-6">
+                    <Link
+                      href={
+                        project.link?.startsWith("/")
+                          ? project.link
+                          : project.link || "#"
+                      }
+                    >
+                      <div className="relative aspect-[4/3] w-full overflow-hidden transition-all hover:opacity-90">
                        <Image
                          src={project.image}
                          alt={project.imageAlt || project.title}
                          width={400}
                          height={300}
-                          className="object-cover w-full h-full"
+                          className="h-full w-full object-cover"
                          priority={index === 0}
                        />
                        {project.title === "LaTeX Introduction Tutorial" && (
                          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                            <div className="rounded-full bg-white/80 p-3">
-                              <Play className="h-8 w-8 text-primary" fill="currentColor" />
+                            <div className="bg-white/80 p-3">
+                              <Play
+                                className="h-8 w-8 text-primary"
+                                fill="currentColor"
+                              />
                            </div>
                          </div>
                        )}