steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

auto intendation

Browse Source
This commit is contained in:
Steffen Illium
2025-09-28 20:37:27 +02:00
parent 6a2bc6659f
commit 9f3722753c
3 changed files with 79 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/page.tsx
View File

@@ -14,28 +14,40 @@ const BLUR_FADE_DELAY = 0.01;
export default function Page() { export default function Page() {
const posts = getSortedPostsData().slice(0, 6); const posts = getSortedPostsData().slice(0, 6);
return ( return (
<main className="flex flex-col min-h-[100dvh] space-y-10"> <main className="flex flex-col min-h-[100dvh] space-y-12">
<section id="hero"> <section id="hero">
<div className="mx-auto w-full max-w-2xl space-y-8"> <div className="mx-auto w-full max-w-2xl">
<div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between">
<div className="flex-col flex flex-1 space-y-1.5 items-center sm:items-start"> <div className="flex-col flex flex-1 space-y-1.5 items-center sm:items-start">
<TextAnimate delay={BLUR_FADE_DELAY} className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left"> <TextAnimate
delay={BLUR_FADE_DELAY}
className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none text-center sm:text-left">
{`Hi, I'm ${DATA.name.split(" ")[0]}`} {`Hi, I'm ${DATA.name.split(" ")[0]}`}
</TextAnimate> </TextAnimate>
<TextAnimate className="max-w-[400px] md:text-xl text-center sm:text-left" delay={BLUR_FADE_DELAY}> <TextAnimate
className="max-w-[400px] md:text-xl text-center sm:text-left"
delay={BLUR_FADE_DELAY}>
AI Consultant & Researcher with a PhD in Computer Science. AI Consultant & Researcher with a PhD in Computer Science.
</TextAnimate> </TextAnimate>
</div> </div>
<div className="flex flex-col items-center gap-y-2"> <div className="flex flex-col items-center gap-y-4">
<BlurFade delay={BLUR_FADE_DELAY}> <BlurFade delay={BLUR_FADE_DELAY}>
<Avatar className="size-28 border"> <Avatar className="size-28 border">
<AvatarImage alt={DATA.name} src={DATA.avatarUrl} fetchPriority="high" /> <AvatarImage
alt={DATA.name}
src={DATA.avatarUrl}
fetchPriority="high"
/>
<AvatarFallback>{DATA.initials}</AvatarFallback> <AvatarFallback>{DATA.initials}</AvatarFallback>
</Avatar> </Avatar>
</BlurFade> </BlurFade>
<BlurFade delay={BLUR_FADE_DELAY * 2}> <BlurFade delay={BLUR_FADE_DELAY * 2}>
<TrackedLink href="/illium_cv_censored.pdf" eventName="cv-download" className="w-full" download> <TrackedLink
<Badge className="flex gap-2 px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]"> href="/illium_cv_censored.pdf"
eventName="cv-download"
className="w-full"
download>
<Badge className="flex px-3 py-1 text-sm shadow-sm transition-all duration-300 ease-out hover:shadow-lg dark:shadow-[var(--shadow-glow)] dark:hover:shadow-[var(--shadow-glow-hover)]">
Download CV Download CV
</Badge> </Badge>
</TrackedLink> </TrackedLink>
@@ -48,10 +60,10 @@ export default function Page() {
<BlurFade delay={BLUR_FADE_DELAY * 3}> <BlurFade delay={BLUR_FADE_DELAY * 3}>
<h2 className="text-xl font-bold">About</h2> <h2 className="text-xl font-bold">About</h2>
</BlurFade> </BlurFade>
<BlurFade delay={BLUR_FADE_DELAY * 4} className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert"> <BlurFade
<Markdown > delay={BLUR_FADE_DELAY * 4}
{DATA.summary} className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
</Markdown> <Markdown>{DATA.summary}</Markdown>
</BlurFade> </BlurFade>
</section> </section>
<section id="projects"> <section id="projects">
@@ -66,7 +78,8 @@ export default function Page() {
Check out my latest work Check out my latest work
</h2> </h2>
<p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
I&apos;ve worked on a variety of projects, from scientific research to managing projects. Here are a few of my latest. I&apos;ve worked on a variety of projects, from scientific
research to managing projects. Here are a few of my latest.
</p> </p>
</div> </div>
</div> </div>
@@ -75,23 +88,22 @@ export default function Page() {
{posts {posts
.filter((post) => post.title) .filter((post) => post.title)
.map((post, id) => ( .map((post, id) => (
<BlurFade <BlurFade
key={post.title}
delay={BLUR_FADE_DELAY * 12 + id * 0.05}
>
<ProjectCard
href={post.href}
key={post.title} key={post.title}
title={post.title!} delay={BLUR_FADE_DELAY * 12 + id * 0.05}>
description={post.excerpt || ""} <ProjectCard
dates={post.date} href={post.href}
tags={post.tags} key={post.title}
image={post.image || ""} title={post.title!}
video={post.video} description={post.excerpt || ""}
links={[]} dates={post.date}
/> tags={post.tags}
</BlurFade> image={post.image || ""}
))} video={post.video}
links={[]}
/>
</BlurFade>
))}
</div> </div>
</div> </div>
</section> </section>
@@ -108,7 +120,9 @@ export default function Page() {
</BlurFade> </BlurFade>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{skills.map((skill, id) => ( {skills.map((skill, id) => (
<BlurFade key={skill} delay={BLUR_FADE_DELAY * 10 + id * 0.05}> <BlurFade
key={skill}
delay={BLUR_FADE_DELAY * 10 + id * 0.05}>
<Badge key={skill}>{skill}</Badge> <Badge key={skill}>{skill}</Badge>
</BlurFade> </BlurFade>
))} ))}
@@ -126,8 +140,7 @@ export default function Page() {
{DATA.work.map((work, id) => ( {DATA.work.map((work, id) => (
<BlurFade <BlurFade
key={work.company} key={work.company}
delay={BLUR_FADE_DELAY * 8 + id * 0.05} delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
>
<ResumeCard <ResumeCard
key={work.company} key={work.company}
href={work.href} href={work.href}
@@ -149,8 +162,7 @@ export default function Page() {
{DATA.education.map((education, id) => ( {DATA.education.map((education, id) => (
<BlurFade <BlurFade
key={education.school} key={education.school}
delay={BLUR_FADE_DELAY * 8 + id * 0.05} delay={BLUR_FADE_DELAY * 8 + id * 0.05}>
>
<ResumeCard <ResumeCard
key={education.school} key={education.school}
href={education.href} href={education.href}
@@ -166,23 +178,31 @@ export default function Page() {
</section> </section>
<section id="contact"> <section id="contact">
<div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12"> <div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12">
<BlurFade delay={BLUR_FADE_DELAY * 16}> <BlurFade delay={BLUR_FADE_DELAY * 16}>
<div className="space-y-3"> <div className="space-y-3">
<div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm"> <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
Contact Contact
</div> </div>
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Get in Touch</h2> <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
<p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed"> Get in Touch
Want to collaborate or have a question?<br/>I&apos;d love to hear from you. </h2>
</p> <p className="mx-auto max-w-[800px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
</div> Want to collaborate or have a question?
</BlurFade> <br />
I&apos;d love to hear from you.
</p>
</div>
</BlurFade>
<BlurFade delay={BLUR_FADE_DELAY * 18}> <BlurFade delay={BLUR_FADE_DELAY * 18}>
<div className="flex flex-wrap gap-2 justify-center"> <div className="flex flex-wrap gap-2 justify-center">
{Object.entries(DATA.contact.social) {Object.entries(DATA.contact.social)
//.filter(([_, social]) => !social.pub) //.filter(([_, social]) => !social.pub)
.map(([name, social]) => ( .map(([name, social]) => (
<TrackedLink href={social.url} key={name} className="group" eventName={`${name}-social`}> <TrackedLink
href={social.url}
key={name}
className="group"
eventName={`${name}-social`}>
<Badge className="cards flex gap-2 px-3 py-1 text-sm"> <Badge className="cards flex gap-2 px-3 py-1 text-sm">
<social.icon className="size-4" /> <social.icon className="size-4" />
{name} {name}

20
components/card-research.tsx
View File

@@ -1,10 +1,6 @@
"use client"; "use client";
import { import { Card, CardHeader, CardTitle } from "@/components/ui/card";
Card,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ChevronRightIcon } from "lucide-react"; import { ChevronRightIcon } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
@@ -35,7 +31,9 @@ export function ResearchCard({
className, className,
}: Props) { }: Props) {
return ( return (
<Link href={href} className={cn("block rounded-xl h-full cards", className)}> <Link
href={href}
className={cn("block rounded-xl h-full cards", className)}>
<Card className="py-2 px-0 group flex h-full flex-col overflow-hidden border transition-shadow duration-300 ease-out hover:shadow-lg"> <Card className="py-2 px-0 group flex h-full flex-col overflow-hidden border transition-shadow duration-300 ease-out hover:shadow-lg">
{video && ( {video && (
<video <video
@@ -66,18 +64,18 @@ export function ResearchCard({
<ChevronRightIcon className="size-4 shrink-0 translate-x-0 transform opacity-0 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:opacity-100" /> <ChevronRightIcon className="size-4 shrink-0 translate-x-0 transform opacity-0 transition-all duration-300 ease-out group-hover:translate-x-1 group-hover:opacity-100" />
</CardTitle> </CardTitle>
<div className="flex items-center gap-x-2 text-xs text-muted-foreground mt-1"> <div className="flex items-center gap-x-2 text-xs text-muted-foreground mt-1">
{venue && <span className="font-semibold text-primary">{venue}</span>} {venue && (
<span className="font-semibold text-primary">{venue}</span>
)}
{venue && <span>•</span>} {venue && <span>•</span>}
<time>{dates}</time> <time>{dates}</time>
</div> </div>
<div className="prose max-w-full text-pretty font-sans text-xs text-muted-foreground dark:prose-invert"> <div className="prose max-w-full text-pretty font-sans text-xs text-muted-foreground dark:prose-invert">
<Markdown> <Markdown>{description}</Markdown>
{description}
</Markdown>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
</Card> </Card>
</Link> </Link>
); );
} }

7
components/providers.tsx
View File

@@ -9,12 +9,9 @@ import { TooltipProvider } from "@/components/ui/tooltip";
export function Providers({ children }: { children: React.ReactNode }) { export function Providers({ children }: { children: React.ReactNode }) {
return ( return (
<ThemeProvider attribute="class" defaultTheme="light"> <ThemeProvider attribute="class" defaultTheme="light">
{/* MotionConfig is the key fix for the animation issues */}
<MotionConfig reducedMotion="user"> <MotionConfig reducedMotion="user">
<TooltipProvider delayDuration={0}> <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
{children}
</TooltipProvider>
</MotionConfig> </MotionConfig>
</ThemeProvider> </ThemeProvider>
); );
} }