mirror of
https://github.com/timmypidashev/web.git
synced 2026-04-14 19:13:51 +00:00
migrate to vercel; bump version
This commit is contained in:
194
src/components/about/current-focus.tsx
Normal file
194
src/components/about/current-focus.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Code2, BookOpen, RocketIcon, Compass } from "lucide-react";
|
||||
|
||||
function AnimateIn({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [skip, setSkip] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
const inView = rect.top < window.innerHeight && rect.bottom > 0;
|
||||
const isReload = performance.getEntriesByType?.("navigation")?.[0]?.type === "reload";
|
||||
|
||||
if (inView && isReload) {
|
||||
setSkip(true);
|
||||
setVisible(true);
|
||||
return;
|
||||
}
|
||||
if (inView) {
|
||||
requestAnimationFrame(() => setVisible(true));
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true);
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.15 }
|
||||
);
|
||||
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={skip ? "" : "transition-all duration-700 ease-out"}
|
||||
style={skip ? {} : {
|
||||
transitionDelay: `${delay}ms`,
|
||||
opacity: visible ? 1 : 0,
|
||||
transform: visible ? "translateY(0)" : "translateY(24px)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CurrentFocus() {
|
||||
const recentProjects = [
|
||||
{
|
||||
title: "Darkbox",
|
||||
description: "My gruvbox theme, with a pure black background",
|
||||
href: "/projects/darkbox",
|
||||
tech: ["Neovim", "Lua"],
|
||||
},
|
||||
{
|
||||
title: "Revive Auto Parts",
|
||||
description: "A car parts listing site built for a client",
|
||||
href: "/projects/reviveauto",
|
||||
tech: ["Tanstack", "React Query", "Fastapi"],
|
||||
},
|
||||
{
|
||||
title: "Fhccenter",
|
||||
description: "Website made for a private school",
|
||||
href: "/projects/fhccenter",
|
||||
tech: ["Nextjs", "Typescript", "Prisma"],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center w-full">
|
||||
<div className="w-full max-w-6xl p-4 sm:px-6 py-6 sm:py-8">
|
||||
<AnimateIn>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-center text-yellow-bright mb-8 sm:mb-12">
|
||||
Current Focus
|
||||
</h2>
|
||||
</AnimateIn>
|
||||
|
||||
{/* Recent Projects Section */}
|
||||
<div className="mb-8 sm:mb-16">
|
||||
<AnimateIn delay={100}>
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
<Code2 className="text-yellow-bright" size={24} />
|
||||
<h3 className="text-xl font-bold text-foreground/90">Recent Projects</h3>
|
||||
</div>
|
||||
</AnimateIn>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 max-w-5xl mx-auto">
|
||||
{recentProjects.map((project, i) => (
|
||||
<AnimateIn key={project.title} delay={200 + i * 100}>
|
||||
<a
|
||||
href={project.href}
|
||||
className="block p-4 sm:p-6 rounded-lg border border-foreground/10 hover:border-yellow-bright/50
|
||||
transition-all duration-300 group bg-background/50 h-full"
|
||||
>
|
||||
<h4 className="font-bold text-lg group-hover:text-yellow-bright transition-colors">
|
||||
{project.title}
|
||||
</h4>
|
||||
<p className="text-foreground/70 mt-2 text-sm sm:text-base">{project.description}</p>
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{project.tech.map((tech) => (
|
||||
<span key={tech} className="text-xs px-2 py-1 rounded-full bg-foreground/5 text-foreground/60">
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
</AnimateIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Learning & Interests */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-5xl mx-auto">
|
||||
<AnimateIn delay={100}>
|
||||
<div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<BookOpen className="text-green-bright" size={24} />
|
||||
<h3 className="text-lg sm:text-xl font-bold text-foreground/90">Currently Learning</h3>
|
||||
</div>
|
||||
<ul className="space-y-3 text-sm sm:text-base text-foreground/70">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
|
||||
<span>Rust Programming</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
|
||||
<span>WebAssembly with Rust</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-bright flex-shrink-0" />
|
||||
<span>HTTP/3 & WebTransport</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AnimateIn>
|
||||
|
||||
<AnimateIn delay={200}>
|
||||
<div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<RocketIcon className="text-blue-bright" size={24} />
|
||||
<h3 className="text-lg sm:text-xl font-bold text-foreground/90">Project Interests</h3>
|
||||
</div>
|
||||
<ul className="space-y-3 text-sm sm:text-base text-foreground/70">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
|
||||
<span>AI Model Integration</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
|
||||
<span>Rust Systems Programming</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-bright flex-shrink-0" />
|
||||
<span>Cross-platform WASM Apps</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AnimateIn>
|
||||
|
||||
<AnimateIn delay={300}>
|
||||
<div className="space-y-4 p-4 sm:p-6 rounded-lg border border-foreground/10 bg-background/50 h-full">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Compass className="text-purple-bright" size={24} />
|
||||
<h3 className="text-lg sm:text-xl font-bold text-foreground/90">Want to Explore</h3>
|
||||
</div>
|
||||
<ul className="space-y-3 text-sm sm:text-base text-foreground/70">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
|
||||
<span>LLM Fine-tuning</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
|
||||
<span>Rust 2024 Edition</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-bright flex-shrink-0" />
|
||||
<span>Real-time Web Transport</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</AnimateIn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user