alex/daichendt.one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more project sectioning

Browse source
This commit is contained in:
Alexander Daichendt 2025-08-14 22:20:44 +02:00
parent 16e9bb1147
commit 2943ace31b
5 changed files with 401 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/components/ProjectSection.astro
View file

@ -1,6 +1,8 @@
---
import { Picture } from "astro:assets";
import { Icon } from "astro-icon/components";
import { projects } from "../consts";
import Carousel from "./Carousel.astro";
import ThreeColumnSection from "./ThreeColumnSection.astro";
---
<section class="py-16 bg-mytheme-200/70 dark:bg-mytheme-700/50">
@ -10,31 +12,95 @@ import { projects } from "../consts";
Software I developed
</h2>
<div
class="max-w-7xl mx-auto
grid grid-cols-1 lg:grid-cols-[auto,1fr,auto]
items-center md:items-start
gap-8
py-8 md:py-12"
>
<div class="w-72 md:block">project details</div>
<div class="space-y-16">
{
projects.map((project) => (
<ThreeColumnSection maxWidth="8xl" py="py-8">
{/* ---------- LEFT: Project details ---------- */}
<div
slot="left"
class="max-w-xs justify-self-center lg:justify-self-end"
>
<article class="space-y-4">
{/* Title + optional company */}
<h3 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">
{project.title}
<div class="max-w-2xl px-4 order-2 md:order-none">
{
projects.map((project, index) => (
<div class="">
-- TODO: make it rotate through images, create new component for
this
<Picture
src={project.images[0].src}
alt={project.images[0].alt}
class="w-full"
/>
{/* Duration */}
<p class="text-sm text-slate-500 dark:text-slate-400 flex items-center mt-1">
<Icon name="mdi:calendar" class="mr-2" />
{project.duration}
</p>
</h3>
{/* Description */}
<p class="text-base text-slate-800 dark:text-slate-200">
{project.description}
</p>
{/* Tech stack */}
<div class="flex flex-wrap gap-2 mt-2">
{project.tech_stack.map((tech) => (
<span class="px-2 py-0.5 text-xs font-medium bg-slate-200 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded">
{tech}
</span>
))}
</div>
{/* Deliverables (optional) */}
{project.deliverables?.length && (
<ul class="list-disc list-inside text-sm text-slate-700 dark:text-slate-300 mt-3">
{project.deliverables.map((item) => (
<li class="mb-1">{item}</li>
))}
</ul>
)}
{/* Links */}
<div class="flex space-x-4 mt-4">
{project.live_url && (
<a
href={project.live_url}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
transition-colors duration-150
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
focus-visible:outline-offset-2 focus-visible:outline-slate-500
dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
>
<Icon name="mdi:aspect-ratio" /> Live
</a>
)}
{project.repo_url && (
<a
href={project.repo_url}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
transition-colors duration-150
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
focus-visible:outline-offset-2 focus-visible:outline-slate-500
dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
>
<Icon name="mdi:github" /> Repo
</a>
)}
</div>
</article>
</div>
))
}
</div>
<div class="w-48 md-w-64 md:block hidden"></div>
{/* ---------- CENTER: Carousel ---------- */}
<div slot="center" class="w-full">
<div class="rounded-lg overflow-hidden shadow-lg">
<Carousel images={project.images} />
</div>
</div>
{/* ---------- RIGHT: Empty for now ---------- */}
<div slot="right" class="hidden lg:block" />
</ThreeColumnSection>
))
}
</div>
</section>