Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
2.2 kB · 100 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101---import ArrowIcon from "../assets/arrow.svg";import SvgIcon from "../assets/cli.svg";import ShieldCheckIcon from "../assets/shield-check.svg";import WebIcon from "../assets/web.svg";import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Projects";
const projects = [ { title: "ts-generate-mock-data", icon: SvgIcon, link: "https://github.com/jhroemer/ts-generate-mock-data", }, { title: "www.jensroemer.com", icon: WebIcon, link: "https://github.com/jhroemer/jhroemer.github.io", }, { title: "action-agent-scan", icon: ShieldCheckIcon, link: "https://github.com/jhroemer/action-agent-scan", },];---
<style> .container { padding-top: 40px; }
.card-container { padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
h3 { font-weight: 300; }
.card { /* TODO: variable */ border: 2px solid rgba(255, 255, 255, 0.08); padding: 24px; border-radius: 12px; background-color: var(--grey-4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: background-color 150ms var(--transition-function-1); text-decoration: none;
&:hover { background-color: var(--grey-3);
.project-icon { color: var(--text-primary); } } }
.project-icon { color: var(--text-secondary); transition: color 150ms var(--transition-function-1); }
.arrow { align-self: flex-end; }
.card-body { padding-top: 2rem; display: flex; justify-content: space-between; }</style>
<BaseLayout pageTitle={pageTitle}> <div class="container"> <div class="card-container"> { projects.map((project) => ( <a href={project.link} class="card"> <project.icon size={18} class="project-icon" /> <div class="card-body"> <h3>{project.title}</h3> <ArrowIcon size={18} class="arrow project-icon" /> </div> </a> )) } </div> </div></BaseLayout>