351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import SafeImage from "./SafeImage";
|
|
|
|
interface Task {
|
|
name: string;
|
|
description: string;
|
|
status: string;
|
|
technologies: string[];
|
|
}
|
|
|
|
interface ProjectLink {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
interface Project {
|
|
name: string;
|
|
description: string;
|
|
logo?: string;
|
|
links?: ProjectLink[];
|
|
tasks: Task[];
|
|
}
|
|
|
|
interface ProjectsProps {
|
|
projects: Project[];
|
|
}
|
|
|
|
function ProjectRow({
|
|
project,
|
|
index,
|
|
isOpen,
|
|
onToggle
|
|
}: {
|
|
project: Project;
|
|
index: number;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
}) {
|
|
const allTechs = Array.from(
|
|
new Set(project.tasks.flatMap((t) => t.technologies))
|
|
);
|
|
const doneCount = project.tasks.filter((t) => t.status === "Done").length;
|
|
|
|
return (
|
|
<div
|
|
className="project-row"
|
|
style={{
|
|
borderBottom: "1px solid #1c1f26",
|
|
}}
|
|
>
|
|
{/* Header bar (always visible) */}
|
|
<button
|
|
onClick={onToggle}
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
padding: "2rem 0",
|
|
background: "transparent",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
textAlign: "left",
|
|
transition: "all 0.3s ease",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget.querySelector(".project-title") as HTMLElement).style.color = "#c8a96e";
|
|
(e.currentTarget.querySelector(".toggle-icon") as HTMLElement).style.transform = isOpen ? "rotate(180deg) scale(1.1)" : "scale(1.1)";
|
|
(e.currentTarget.querySelector(".toggle-icon") as HTMLElement).style.color = "#c8a96e";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget.querySelector(".project-title") as HTMLElement).style.color = isOpen ? "#c8a96e" : "#e2e4e9";
|
|
(e.currentTarget.querySelector(".toggle-icon") as HTMLElement).style.transform = isOpen ? "rotate(180deg) scale(1)" : "scale(1)";
|
|
(e.currentTarget.querySelector(".toggle-icon") as HTMLElement).style.color = "#4a5060";
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: "2rem" }}>
|
|
<span
|
|
className="font-mono"
|
|
style={{
|
|
fontFamily: "var(--font-jetbrains), monospace",
|
|
fontSize: "0.85rem",
|
|
color: "#4a5060",
|
|
letterSpacing: "0.1em",
|
|
}}
|
|
>
|
|
{String(index + 1).padStart(2, "0")}
|
|
</span>
|
|
|
|
<h3
|
|
className="project-title font-display"
|
|
style={{
|
|
fontFamily: "var(--font-bebas), sans-serif",
|
|
fontSize: "clamp(2rem, 5vw, 4rem)",
|
|
letterSpacing: "0.02em",
|
|
color: isOpen ? "#c8a96e" : "#e2e4e9",
|
|
transition: "color 0.3s ease",
|
|
margin: 0,
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{project.name}
|
|
</h3>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", alignItems: "center", gap: "2rem" }}>
|
|
<div
|
|
className="toggle-icon"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "40px",
|
|
height: "40px",
|
|
borderRadius: "50%",
|
|
border: "1px solid #1c1f26",
|
|
color: "#4a5060",
|
|
transition: "all 0.3s ease",
|
|
transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
|
|
}}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Expandable Content */}
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateRows: isOpen ? "1fr" : "0fr",
|
|
transition: "grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
}}
|
|
>
|
|
<div style={{ overflow: "hidden" }}>
|
|
<div style={{ paddingBottom: "3rem", paddingTop: "0.5rem" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
|
|
|
|
{/* Top part: Description & Links & Techs */}
|
|
<div style={{ display: "flex", flexWrap: "wrap", gap: "3rem", justifyContent: "space-between", alignItems: "flex-start" }}>
|
|
|
|
<div style={{ flex: "1 1 500px" }}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1.5rem" }}>
|
|
{project.logo && (
|
|
<SafeImage
|
|
src={project.logo}
|
|
alt={project.name}
|
|
width={48}
|
|
height={48}
|
|
fallbackLabel={project.name.slice(0, 2).toUpperCase()}
|
|
style={{ width: "36px", height: "36px", objectFit: "contain", filter: "brightness(0.9)" }}
|
|
/>
|
|
)}
|
|
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
|
{project.links?.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
fontFamily: "var(--font-jetbrains), monospace",
|
|
fontSize: "0.65rem",
|
|
letterSpacing: "0.1em",
|
|
textTransform: "uppercase",
|
|
padding: "6px 14px",
|
|
border: "1px solid #1c1f26",
|
|
color: "#c8a96e",
|
|
textDecoration: "none",
|
|
transition: "all 0.2s",
|
|
borderRadius: "2px",
|
|
background: "rgba(200, 169, 110, 0.03)"
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLElement).style.background = "rgba(200, 169, 110, 0.1)";
|
|
(e.currentTarget as HTMLElement).style.borderColor = "#c8a96e";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLElement).style.background = "rgba(200, 169, 110, 0.03)";
|
|
(e.currentTarget as HTMLElement).style.borderColor = "#1c1f26";
|
|
}}
|
|
>
|
|
↗ {link.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<p
|
|
style={{
|
|
fontFamily: "var(--font-lora), serif",
|
|
fontSize: "1.05rem",
|
|
lineHeight: 1.8,
|
|
color: "#9ca3af",
|
|
maxWidth: "700px",
|
|
}}
|
|
>
|
|
{project.description}
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "2rem" }}>
|
|
{allTechs.map((tech) => (
|
|
<span key={tech} className="tech-tag" style={{ border: "1px solid #2a2e38", background: "#0e1014" }}>
|
|
{tech}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ flex: "0 0 auto", pointerEvents: "none" }}>
|
|
<div style={{ display: "inline-flex", flexDirection: "column", padding: "1.5rem", background: "#0e1014", border: "1px solid #1c1f26", borderRadius: "8px" }}>
|
|
<span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.6rem", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.15em", marginBottom: "0.5rem" }}>
|
|
Development Status
|
|
</span>
|
|
<span style={{ fontFamily: "var(--font-bebas), sans-serif", fontSize: "2.5rem", color: "#e2e4e9", lineHeight: 1 }}>
|
|
{doneCount}<span style={{ color: "#4a5060" }}>/{project.tasks.length}</span>
|
|
</span>
|
|
<span style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.7rem", color: "#3a7a5a", marginTop: "0.2rem" }}>
|
|
Tasks Completed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom part: Tasks Grid */}
|
|
<div style={{ marginTop: "1rem" }}>
|
|
<h4 style={{ fontFamily: "var(--font-jetbrains), monospace", fontSize: "0.75rem", letterSpacing: "0.15em", color: "#6b7280", textTransform: "uppercase", marginBottom: "1.5rem", borderBottom: "1px solid #1c1f26", paddingBottom: "1rem" }}>
|
|
Project Milestones
|
|
</h4>
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
|
gap: "2rem",
|
|
}}
|
|
>
|
|
{project.tasks.map((task) => (
|
|
<div
|
|
key={task.name}
|
|
style={{
|
|
display: "flex",
|
|
gap: "1rem",
|
|
alignItems: "flex-start",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: "8px",
|
|
height: "8px",
|
|
borderRadius: "50%",
|
|
background: task.status === "Done" ? "#3a7a5a" : "#c8954a",
|
|
marginTop: "6px",
|
|
flexShrink: 0,
|
|
boxShadow: task.status === "Done" ? "0 0 10px rgba(58,122,90,0.5)" : "0 0 10px rgba(200,149,74,0.3)",
|
|
}}
|
|
/>
|
|
<div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "0.5rem" }}>
|
|
<span
|
|
style={{
|
|
fontFamily: "var(--font-jetbrains), monospace",
|
|
fontSize: "0.85rem",
|
|
color: "#e2e4e9",
|
|
letterSpacing: "0.02em",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{task.name}
|
|
</span>
|
|
<span className={task.status === "Done" ? "status-done" : "status-progress"} style={{ fontSize: "0.5rem", padding: "3px 6px" }}>
|
|
{task.status}
|
|
</span>
|
|
</div>
|
|
<p style={{ fontFamily: "var(--font-lora), serif", fontSize: "0.85rem", color: "#6b7280", lineHeight: 1.6, margin: 0 }}>
|
|
{task.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Projects({ projects }: ProjectsProps) {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
|
|
|
return (
|
|
<section id="projects" style={{ padding: "8rem 0" }}>
|
|
<div style={{ maxWidth: "1200px", margin: "0 auto", padding: "0 2rem" }}>
|
|
{/* Section header */}
|
|
<div style={{ marginBottom: "6rem" }}>
|
|
<div className="section-label" style={{ marginBottom: "0.75rem" }}>
|
|
Selected Work
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: "1.5rem" }}>
|
|
<h2
|
|
className="font-display"
|
|
style={{
|
|
fontFamily: "var(--font-bebas), sans-serif",
|
|
fontSize: "clamp(2.5rem, 6vw, 5rem)",
|
|
letterSpacing: "0.04em",
|
|
color: "#e2e4e9",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
Projects
|
|
</h2>
|
|
<span
|
|
className="font-mono"
|
|
style={{
|
|
fontFamily: "var(--font-jetbrains), monospace",
|
|
fontSize: "0.7rem",
|
|
color: "#4a5060",
|
|
letterSpacing: "0.12em",
|
|
}}
|
|
>
|
|
{String(projects.length).padStart(2, "0")} total
|
|
</span>
|
|
</div>
|
|
<div style={{ width: "48px", height: "1px", background: "#c8a96e", marginTop: "1rem" }} />
|
|
</div>
|
|
|
|
{/* List */}
|
|
<div style={{ borderTop: "1px solid #1c1f26" }}>
|
|
{projects.map((project, i) => (
|
|
<ProjectRow
|
|
key={project.name}
|
|
project={project}
|
|
index={i}
|
|
isOpen={openIndex === i}
|
|
onToggle={() => setOpenIndex(openIndex === i ? null : i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|