Skip to content

Commit 63225eb

Browse files
zmh-programzmh-program
committed
chore: update timeline
1 parent 2557820 commit 63225eb

3 files changed

Lines changed: 130 additions & 132 deletions

File tree

‎src/components/timeline.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { cn } from "@/lib/utils";
2+
3+
interface TimelineEvent {
4+
year: string;
5+
description: string;
6+
}
7+
8+
interface TimelineProps {
9+
events: TimelineEvent[];
10+
className?: string;
11+
}
12+
13+
export function Timeline({ events, className }: TimelineProps) {
14+
return (
15+
<div className={cn("relative space-y-0", className)}>
16+
<div className="absolute top-0 left-[3.25rem] w-[1px] h-full bg-border/60" />
17+
{events.map((event, index) => (
18+
<div
19+
key={index}
20+
className="group relative flex gap-4 items-center py-2 hover:bg-muted/50 rounded-md transition-all duration-300 px-1.5"
21+
>
22+
<div className="text-sm font-medium text-primary/80 w-12 flex-shrink-0 relative z-10 cursor-default">
23+
{event.year}
24+
</div>
25+
<div
26+
className="absolute left-[3.25rem] w-[1px] h-full bg-gradient-to-b from-transparent via-primary/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
27+
style={{
28+
transform: "translateX(-50%)",
29+
}}
30+
/>
31+
<p className="text-xs text-muted-foreground group-hover:text-foreground/80 transition-colors duration-300">
32+
{event.description}
33+
</p>
34+
</div>
35+
))}
36+
</div>
37+
);
38+
}

‎src/components/ui/background-decorations.tsx‎

Whitespace-only changes.

‎src/pages/index.tsx‎

Lines changed: 92 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
2121
import { TechStackCircles } from "@/components/orbiting-circles";
2222
import { PaperGrid } from "@/components/ui/paper-grid";
2323
import { ThemeToggle } from "@/components/theme-toggle";
24+
import { Timeline } from "@/components/timeline";
2425

2526
export default function Home() {
2627
return (
@@ -32,7 +33,7 @@ export default function Home() {
3233
>
3334
<ScrollArea className="w-full h-full">
3435
<PaperGrid
35-
className="fixed inset-0 z-0"
36+
className="fixed inset-0 z-0 pointer-events-none"
3637
gridSize={16}
3738
gridColor="hsla(var(--border) / 0.45)"
3839
/>
@@ -270,62 +271,6 @@ export default function Home() {
270271
</div>
271272
</section>
272273

273-
<section>
274-
<h2
275-
className={cn(
276-
GeistSans.className,
277-
"text-sm font-normal tracking-normal mb-4 flex items-center gap-2",
278-
)}
279-
>
280-
<span>Achievements</span>
281-
<div className="flex-1 h-[1px] bg-border/60" />
282-
</h2>
283-
<div className="grid grid-cols-1 sm:grid-cols-3 gap-1.5">
284-
{[
285-
{
286-
title: "China InnoForce 50",
287-
description: "Super Developer of the Year",
288-
detail: "GeekPark",
289-
year: "2025",
290-
},
291-
{
292-
title: "GitHub Trending",
293-
description: "#1 Repo Of The Day",
294-
detail: "CoAI.Dev",
295-
year: "2024",
296-
},
297-
{
298-
title: "Spark Lab S1",
299-
description: "Hackathon Champion",
300-
detail: "AI × Startup",
301-
year: "2024",
302-
},
303-
].map((achievement, index) => (
304-
<div key={index} className="paper-card p-2 text-xs">
305-
<div className="flex flex-col gap-0.5 group">
306-
<div className="flex items-center justify-between">
307-
<h3 className="font-medium text-foreground/80 relative">
308-
{achievement.title}
309-
<span className="absolute -bottom-[1px] left-0 w-0 h-[1px] bg-primary/20 group-hover:w-full duration-500 ease-out" />
310-
</h3>
311-
<span className="text-[10px] text-muted-foreground/50">
312-
{achievement.year}
313-
</span>
314-
</div>
315-
<div className="flex items-center justify-between text-[10px]">
316-
<span className="text-muted-foreground/70">
317-
{achievement.description}
318-
</span>
319-
<span className="text-muted-foreground/50 ml-1">
320-
{achievement.detail}
321-
</span>
322-
</div>
323-
</div>
324-
</div>
325-
))}
326-
</div>
327-
</section>
328-
329274
<section>
330275
<h2
331276
className={cn(
@@ -387,83 +332,98 @@ export default function Home() {
387332
<span>Timeline</span>
388333
<div className="flex-1 h-[1px] bg-border/60" />
389334
</h2>
390-
<div className="space-y-2">
391-
{[
392-
{
393-
year: "2014",
394-
description:
395-
"Started playing Minecraft, fascinated by redstone mechanics and command blocks",
396-
icon: <RiGamepadLine className="w-4 h-4" />,
397-
iconBg: "bg-emerald-500/20",
398-
},
399-
{
400-
year: "2016",
401-
description:
402-
"Joined school computer group, practiced typing and reached 200 CPM",
403-
icon: <RiKeyboardLine className="w-4 h-4" />,
404-
iconBg: "bg-blue-500/20",
405-
},
406-
{
407-
year: "2017",
408-
description:
409-
"Began learning programming with Python and basic Forge Modding",
410-
icon: <RiCodeSSlashLine className="w-4 h-4" />,
411-
iconBg: "bg-yellow-500/20",
412-
},
413-
{
414-
year: "2020",
415-
description:
416-
"Started exploring Java and Lua, attempted to build a TCP-based chat system",
417-
icon: <RiTerminalBoxLine className="w-4 h-4" />,
418-
iconBg: "bg-red-500/20",
419-
},
420-
{
421-
year: "2022",
422-
description:
423-
"Started learning Machine Learning basics and Full Stack Development",
424-
icon: <RiBrainLine className="w-4 h-4" />,
425-
iconBg: "bg-purple-500/20",
426-
},
427-
{
428-
year: "2023",
429-
description:
430-
"Launched Chat Nio (CoAI.Dev) and began commercial conversion",
431-
icon: <RiRocketLine className="w-4 h-4" />,
432-
iconBg: "bg-sky-500/20",
433-
},
434-
{
435-
year: "2024",
436-
description:
437-
"Achieved GitHub #1 trending, Chat Nio (CoAI.Dev) was acquired",
438-
icon: <RiGithubFill className="w-4 h-4" />,
439-
iconBg: "bg-slate-500/20",
440-
},
441-
{
442-
year: "2025",
443-
description:
444-
"GeekPark InnoForce 50 Super Developer of the Year",
445-
icon: <RiAwardLine className="w-4 h-4" />,
446-
iconBg: "bg-amber-500/20",
447-
},
448-
].map((event, index) => (
449-
<div
450-
key={index}
451-
className="paper-card p-2 relative overflow-hidden group"
452-
>
453-
<div className="absolute top-0 left-0 w-1 h-full bg-primary/20 group-hover:bg-primary/40 transition-colors" />
454-
<div className="flex gap-2 items-center">
455-
<div className="text-sm font-medium text-primary/80 w-12 flex-shrink-0">
456-
{event.year}
457-
</div>
458-
<div className={cn("p-1 rounded-md", event.iconBg)}>
459-
{event.icon}
335+
<div className="space-y-6">
336+
<Timeline
337+
events={[
338+
{
339+
year: "2014",
340+
description:
341+
"Started playing Minecraft, fascinated by redstone mechanics and command blocks",
342+
},
343+
{
344+
year: "2016",
345+
description:
346+
"Joined school computer group, practiced typing and reached 200 CPM",
347+
},
348+
{
349+
year: "2017",
350+
description:
351+
"Began learning programming with Python and basic Forge Modding",
352+
},
353+
{
354+
year: "2020",
355+
description:
356+
"Started exploring Java and Lua, attempted to build a TCP-based chat system",
357+
},
358+
{
359+
year: "2022",
360+
description:
361+
"Started learning Machine Learning basics and Full Stack Development",
362+
},
363+
{
364+
year: "2023",
365+
description:
366+
"Launched Chat Nio (CoAI.Dev) and began commercial conversion",
367+
},
368+
{
369+
year: "2024",
370+
description:
371+
"Achieved GitHub #1 trending, Chat Nio (CoAI.Dev) was acquired",
372+
},
373+
{
374+
year: "2025",
375+
description:
376+
"GeekPark InnoForce 50 Super Developer of the Year",
377+
},
378+
]}
379+
/>
380+
381+
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
382+
{[
383+
{
384+
title: "China InnoForce 50",
385+
description: "Super Developer of the Year",
386+
detail: "GeekPark",
387+
year: "2025",
388+
},
389+
{
390+
title: "GitHub Trending",
391+
description: "#1 Repo Of The Day",
392+
detail: "CoAI.Dev",
393+
year: "2024",
394+
},
395+
{
396+
title: "Spark Lab S1",
397+
description: "Hackathon Champion",
398+
detail: "AI × Startup",
399+
year: "2024",
400+
},
401+
].map((achievement, index) => (
402+
<div
403+
key={index}
404+
className="group px-2 py-1.5 shadow-sm hover:bg-muted/30 rounded-md transition-colors"
405+
>
406+
<div className="flex flex-col">
407+
<div className="flex items-center justify-between mb-0.5">
408+
<h3 className="text-xs font-medium text-foreground/90">
409+
{achievement.title}
410+
</h3>
411+
<span className="text-[10px] text-muted-foreground/60">
412+
{achievement.year}
413+
</span>
414+
</div>
415+
<div className="flex items-center justify-between">
416+
<span className="text-[10px] text-muted-foreground/80">
417+
{achievement.description}
418+
</span>
419+
<span className="text-[10px] text-muted-foreground/60">
420+
{achievement.detail}
421+
</span>
422+
</div>
460423
</div>
461-
<p className="text-xs text-muted-foreground">
462-
{event.description}
463-
</p>
464424
</div>
465-
</div>
466-
))}
425+
))}
426+
</div>
467427
</div>
468428
</section>
469429
</div>

0 commit comments

Comments
 (0)