- {/* Shader / gradient background */}
- {/* Dot grid overlay for texture */}
- {/* Content */}
- {/* Name with gradient */}
-
- {/* Bottom fade into content */}
)
diff --git a/src/components/SectionTabs.tsx b/src/components/SectionTabs.tsx
new file mode 100644
index 00000000..830f0fbc
--- /dev/null
+++ b/src/components/SectionTabs.tsx
@@ -0,0 +1,79 @@
+import { Download } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { cn } from '@/lib/utils'
+
+interface SectionTabsProps {
+ tabs: { key: string; label: string }[]
+ name: string
+ heroSentinelRef: React.RefObject
+}
+
+export function SectionTabs({ tabs, name, heroSentinelRef }: SectionTabsProps) {
+ const [collapsed, setCollapsed] = useState(false)
+ const headerRef = useRef(null)
+
+ useEffect(() => {
+ const sentinel = heroSentinelRef.current
+ if (!sentinel) return
+ const observer = new IntersectionObserver(
+ (entries) => setCollapsed(!entries[0].isIntersecting),
+ { threshold: 0 }
+ )
+ observer.observe(sentinel)
+ return () => observer.disconnect()
+ }, [heroSentinelRef])
+
+ return (
+
+
+ {collapsed && (
+
+ {name}
+
+ )}
+
+
+ {tabs.map((tab) => (
+
+ {tab.label}
+
+ ))}
+
+
+ {collapsed && (
+
+
+
+
+ )}
+
+ )
+}
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index f57e17f1..f6ecc494 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -1,4 +1,4 @@
-import { Download, Github, Linkedin, Mail, MapPin, MessageCircle } from 'lucide-react'
+import { Download, FileText, Github, Linkedin, Mail, MapPin, MessageCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
@@ -16,7 +16,6 @@ export function SiteFooter() {
- {/* Brand + Location */}
Jon Bogaty
@@ -30,7 +29,6 @@ export function SiteFooter() {
- {/* Connect */}
Connect
@@ -51,12 +49,17 @@ export function SiteFooter() {
- {/* Resume Downloads */}
diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
new file mode 100644
index 00000000..e37d5937
--- /dev/null
+++ b/src/components/sections/AboutSection.tsx
@@ -0,0 +1,39 @@
+import type resume from '@/content/resume.json'
+
+export function AboutSection({ data }: { data: typeof resume.about }) {
+ const paragraphs = Array.isArray(data.summary) ? data.summary : [data.summary]
+ return (
+
+ {paragraphs.map((p) => (
+
+ {p}
+
+ ))}
+
+
+
+
{data.summary}
+
+ {data.positions.map((pos) => (
+
+ {pos.position}
+
+ @ {pos.name} ({pos.year})
+
+
+ ))}
+
+
+ {items.map((edu) => (
+
+
+ {edu.studyType} — {edu.area}
+
+
+ {edu.institution} | {edu.startDate}–{edu.endDate}
+
+ {edu.honors && (
+
{edu.honors.join(' · ')}
+ )}
+
+ ))}
+
+
+ {jobs.map((job, i) => (
+ setSelected(i)}
+ className={cn(
+ 'flex flex-col items-start px-3 py-2.5 rounded-md text-left whitespace-nowrap md:whitespace-normal transition-colors hover:bg-secondary/60 min-w-fit',
+ selected === i
+ ? 'bg-secondary text-foreground border-l-2 border-primary'
+ : 'text-muted-foreground border-l-2 border-transparent'
+ )}
+ >
+ {job.name}
+
+ {formatDateRange(job.startDate, job.endDate)}
+
+
+ ))}
+
+
+
+
+
+
{active.name}
+
+ {active.position}
+
+
+ {formatDateRange(active.startDate, active.endDate)}
+
+
+ {(active.tech as string[]).map((t) => (
+
+ {t}
+
+ ))}
+
+ )}
+
+ {active.summary && (
+ {active.summary}
+ )}
+
+ {(active.highlights ?? []).length > 0 && (
+
+ {(active.highlights ?? []).map((h) => (
+
+ •
+ {h}
+
+ ))}
+
+ )}
+
+ {'departureContext' in active && active.departureContext && (
+
+ {active.departureContext as string}
+
+ )}
+
+
+
+ {items.map((project) => {
+ const accent = accentFor(project.name)
+ return (
+
+
+
+
+ {project.domain && (
+
+
+ )}
+
+
+
+
+ {project.name}
+
+
+ {project.tagline && (
+
+ {project.tagline}
+
+ )}
+
+
+ {project.description}
+ {project.tech && (
+
+ {project.tech.map((t) => (
+
+ {t}
+
+ ))}
+
+ )}
+ {project.packages && (
+
+
+
+
+
+
+ {project.packages.map((pkg) => (
+
+
+ {pkg.name}
+
+
+ {pkg.description}
+
+
+ ))}
+
+
+
+
+ )
+ })}
+
+ {headline.length > 0 && (
+
+ {headline.map((cat) => (
+
+
+ {cat.name}
+
+ {cat.keywords.map((kw) => (
+
+ {kw}
+
+ ))}
+
+
+
+ ))}
+
+ )}
+
+ {rest.length > 0 && (
+
+ {rest.map((cat) => (
+
+
+
+ {cat.name}
+
+
+ {cat.keywords.map((kw) => (
+
+ {kw}
+
+ ))}
+
+
+
+ ))}
+
+ )}
+
{title}
+ {pageTitle}
+
+
+ ← jonbogaty.com
+
+