feat: add discretize-ui project
This commit is contained in:
parent
d154d2e937
commit
3aabd391c1
8 changed files with 142 additions and 347 deletions
BIN
src/assets/projects/discretizeui/demo.png
Normal file
BIN
src/assets/projects/discretizeui/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
src/assets/projects/discretizeui/languages.png
Normal file
BIN
src/assets/projects/discretizeui/languages.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
src/assets/projects/discretizeui/tooltip.png
Normal file
BIN
src/assets/projects/discretizeui/tooltip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
|
|
@ -11,102 +11,89 @@ interface Props {
|
||||||
const { projects } = Astro.props;
|
const { projects } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="py-16 bg-mytheme-200/70 dark:bg-mytheme-700/50">
|
{
|
||||||
<h2
|
projects.map((project) => (
|
||||||
class="text-3xl md:text-4xl font-bold mb-12 text-center text-slate-800 dark:text-slate-100"
|
<ThreeColumnSection maxWidth="8xl" py="py-8">
|
||||||
>
|
{/* ---------- LEFT: Project details ---------- */}
|
||||||
Software I developed
|
<div slot="left" class="max-w-xs justify-self-center lg:justify-self-end">
|
||||||
</h2>
|
<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="space-y-16">
|
{/* Duration */}
|
||||||
{
|
<p class="text-sm text-slate-500 dark:text-slate-400 flex items-center mt-1">
|
||||||
projects.map((project) => (
|
<Icon name="mdi:calendar" class="mr-2" />
|
||||||
<ThreeColumnSection maxWidth="8xl" py="py-8">
|
{project.duration}
|
||||||
{/* ---------- LEFT: Project details ---------- */}
|
</p>
|
||||||
<div
|
</h3>
|
||||||
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}
|
|
||||||
|
|
||||||
{/* Duration */}
|
{/* Description */}
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400 flex items-center mt-1">
|
<p class="text-base text-slate-800 dark:text-slate-200">
|
||||||
<Icon name="mdi:calendar" class="mr-2" />
|
{project.description}
|
||||||
{project.duration}
|
</p>
|
||||||
</p>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{/* Description */}
|
{/* Tech stack */}
|
||||||
<p class="text-base text-slate-800 dark:text-slate-200">
|
<div class="flex flex-wrap gap-2 mt-2">
|
||||||
{project.description}
|
{project.tech_stack.map((tech) => (
|
||||||
</p>
|
<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>
|
||||||
|
|
||||||
{/* Tech stack */}
|
{/* Deliverables (optional) */}
|
||||||
<div class="flex flex-wrap gap-2 mt-2">
|
{project.deliverables?.length && (
|
||||||
{project.tech_stack.map((tech) => (
|
<ul class="list-disc list-inside text-sm text-slate-700 dark:text-slate-300 mt-3">
|
||||||
<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">
|
{project.deliverables.map((item) => (
|
||||||
{tech}
|
<li class="mb-1">{item}</li>
|
||||||
</span>
|
))}
|
||||||
))}
|
</ul>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Deliverables (optional) */}
|
{/* Links */}
|
||||||
{project.deliverables?.length && (
|
<div class="flex space-x-4 mt-4">
|
||||||
<ul class="list-disc list-inside text-sm text-slate-700 dark:text-slate-300 mt-3">
|
{project.live_url && (
|
||||||
{project.deliverables.map((item) => (
|
<a
|
||||||
<li class="mb-1">{item}</li>
|
href={project.live_url}
|
||||||
))}
|
target="_blank"
|
||||||
</ul>
|
rel="noopener noreferrer"
|
||||||
)}
|
class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
|
||||||
|
|
||||||
{/* 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
|
transition-colors duration-150
|
||||||
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
|
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
|
||||||
focus-visible:outline-offset-2 focus-visible:outline-slate-500
|
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"
|
dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
|
||||||
>
|
>
|
||||||
<Icon name="mdi:aspect-ratio" /> Live
|
<Icon name="mdi:aspect-ratio" /> Live
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
{project.repo_url && (
|
{project.repo_url && (
|
||||||
<a
|
<a
|
||||||
href={project.repo_url}
|
href={project.repo_url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
|
class="inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium
|
||||||
transition-colors duration-150
|
transition-colors duration-150
|
||||||
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
|
bg-slate-100 hover:bg-slate-200 focus-visible:outline focus-visible:outline-2
|
||||||
focus-visible:outline-offset-2 focus-visible:outline-slate-500
|
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"
|
dark:bg-slate-800 dark:hover:bg-slate-700 dark:focus-visible:outline-slate-400"
|
||||||
>
|
>
|
||||||
<Icon name="mdi:github" /> Repo
|
<Icon name="mdi:github" /> Repo
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ---------- CENTER: Carousel ---------- */}
|
{/* ---------- CENTER: Carousel ---------- */}
|
||||||
<div slot="center" class="w-full">
|
<div slot="center" class="w-full">
|
||||||
<div class="rounded-lg overflow-hidden shadow-lg">
|
<div class="rounded-lg overflow-hidden shadow-lg">
|
||||||
<Carousel images={project.images} />
|
<Carousel images={project.images} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ---------- RIGHT: Empty for now ---------- */}
|
{/* ---------- RIGHT: Empty for now ---------- */}
|
||||||
<div slot="right" class="hidden lg:block" />
|
<div slot="right" class="hidden lg:block" />
|
||||||
</ThreeColumnSection>
|
</ThreeColumnSection>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
import type { ImageMetadata } from "astro";
|
import type { ImageMetadata } from "astro";
|
||||||
|
import discretizeui_demo from "./assets/projects/discretizeui/demo.png";
|
||||||
|
import discretizeui_languages from "./assets/projects/discretizeui/languages.png";
|
||||||
|
import discretizeui_tooltip from "./assets/projects/discretizeui/tooltip.png";
|
||||||
import optimizer1 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_52_AM.png";
|
import optimizer1 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_52_AM.png";
|
||||||
import optimizer2 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_53_AM.png";
|
import optimizer2 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_53_AM.png";
|
||||||
import optimizer3 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_54_AM.png";
|
import optimizer3 from "./assets/projects/optimizer/Discretize-Gear-Optimizer-08-05-2025_11_54_AM.png";
|
||||||
|
|
@ -113,17 +116,35 @@ export const projects: Project[] = [
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// title: "Discretize -- UI Library",
|
title: "@discretize/gw2-ui-new",
|
||||||
// repo_url: "https://github.com/discretize/discretize-ui",
|
featured: false,
|
||||||
// description:
|
live_url: "https://discretize.github.io/discretize-ui/gw2-ui",
|
||||||
// "A beautiful component library with tooltips for the popular MMORPG Guild Wars 2. Allows websites to look and feel like the game. Integral part of the Discretize ecosystem.",
|
repo_url: "https://github.com/discretize/discretize-ui",
|
||||||
// live_url:
|
description: `A modern, lightweight React component library for Guild Wars 2 UI elements. Used by all Discretize applications.`,
|
||||||
// "https://discretize.github.io/discretize-ui/gw2-ui/?path=/story/components-attribute--boon-duration",
|
tech_stack: ["React", "TypeScript", "CSS Modules", "Storybook"],
|
||||||
// tech_stack: ["React", "TypeScript", "Storybook"],
|
duration: "2023 – Present",
|
||||||
// duration: "2021 - Present",
|
deliverables: [
|
||||||
// complexity: 5,
|
"Refactored all components to TypeScript",
|
||||||
// },
|
"Replaced CSS-in-JS with CSS Modules",
|
||||||
|
"Better performance by caching, batching",
|
||||||
|
],
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
src: discretizeui_demo,
|
||||||
|
alt: "Production Demo of the component library",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
src: discretizeui_tooltip,
|
||||||
|
alt: "Tooltip component",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: discretizeui_languages,
|
||||||
|
alt: "Supports multiple languages",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// title: "Discretize -- Rewritten Website",
|
// title: "Discretize -- Rewritten Website",
|
||||||
// description:
|
// description:
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,23 @@
|
||||||
export const publications = [
|
export const publications = [
|
||||||
|
{
|
||||||
|
authors: [
|
||||||
|
"Alexander Daichendt",
|
||||||
|
"Florian Wiedner",
|
||||||
|
"Jonas Andre",
|
||||||
|
"Georg Carle",
|
||||||
|
],
|
||||||
|
title:
|
||||||
|
"Applicability of Hardware-Supported Containers in Low-Latency Networking",
|
||||||
|
conference:
|
||||||
|
"20th International Conference on Network and Service Management (CNSM 2024)",
|
||||||
|
location: "Prague, Czech Republic",
|
||||||
|
date: "Oct. 2024",
|
||||||
|
links: {
|
||||||
|
pdf: "http://www.net.in.tum.de/fileadmin/bibtex/publications/papers/wiedner_2024_cnsm.pdf",
|
||||||
|
homepage: "https://tumi8.github.io/applicability-hwsupported-containers",
|
||||||
|
bibtex: "https://www.net.in.tum.de/publications/bibtex/Wied24CNSM.bib",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
authors: [
|
authors: [
|
||||||
"Florian Wiedner",
|
"Florian Wiedner",
|
||||||
|
|
@ -20,25 +39,6 @@ export const publications = [
|
||||||
bibtex: "/publications/bibtex/WiedHelm24Container.bib",
|
bibtex: "/publications/bibtex/WiedHelm24Container.bib",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
authors: [
|
|
||||||
"Alexander Daichendt",
|
|
||||||
"Florian Wiedner",
|
|
||||||
"Jonas Andre",
|
|
||||||
"Georg Carle",
|
|
||||||
],
|
|
||||||
title:
|
|
||||||
"Applicability of Hardware-Supported Containers in Low-Latency Networking",
|
|
||||||
conference:
|
|
||||||
"20th International Conference on Network and Service Management (CNSM 2024)",
|
|
||||||
location: "Prague, Czech Republic",
|
|
||||||
date: "Oct. 2024",
|
|
||||||
links: {
|
|
||||||
pdf: "http://www.net.in.tum.de/fileadmin/bibtex/publications/papers/wiedner_2024_cnsm.pdf",
|
|
||||||
homepage: "https://tumi8.github.io/applicability-hwsupported-containers",
|
|
||||||
bibtex: "https://www.net.in.tum.de/publications/bibtex/Wied24CNSM.bib",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
authors: [
|
authors: [
|
||||||
"Florian Wiedner",
|
"Florian Wiedner",
|
||||||
|
|
|
||||||
|
|
@ -142,5 +142,17 @@ const skills = {
|
||||||
<div slot="right"></div>
|
<div slot="right"></div>
|
||||||
</ThreeColumnSection>
|
</ThreeColumnSection>
|
||||||
|
|
||||||
<ProjectSection projects={projects.filter((project) => project.featured)} />
|
<section class="py-16 bg-mytheme-200/70 dark:bg-mytheme-700/50">
|
||||||
|
<h2
|
||||||
|
class="text-3xl md:text-4xl font-bold mb-12 text-center text-slate-800 dark:text-slate-100"
|
||||||
|
>
|
||||||
|
Software I developed
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="space-y-16">
|
||||||
|
<ProjectSection
|
||||||
|
projects={projects.filter((project) => project.featured)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
|
|
@ -1,238 +1,13 @@
|
||||||
---
|
---
|
||||||
|
import ProjectSection from "../../components/ProjectSection.astro";
|
||||||
|
import { projects } from "../../consts";
|
||||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||||
import { Icon } from "astro-icon/components";
|
|
||||||
|
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
title: "daichendt.one (this site)",
|
|
||||||
live_url: "https://www.youtube.com/watch?v=XfELJU1mRMg",
|
|
||||||
repo_url: "https://github.com/AlexDaichendt/site",
|
|
||||||
description: "Personal website and blog.",
|
|
||||||
tech_stack: ["Astro", "Tailwind CSS"],
|
|
||||||
duration: "2022 - Present",
|
|
||||||
complexity: 4,
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// title: "Radio Player",
|
|
||||||
// live_url: "https://video.taxi/en/functions/simultaneous-interpreting/",
|
|
||||||
// description: "A radio player for the VIDEO.TAXI website. Allows users to listen to radio stations with dubbed audio with the voice of the original speaker.",
|
|
||||||
// tech_stack: ["React", "TypeScript", "Vite", "Go", "Docker"],
|
|
||||||
// duration: "2024 - Present",
|
|
||||||
// complexity: 4,
|
|
||||||
// company: "TV1 GmbH",
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
title: "VIDEO.TAXI Meetings",
|
|
||||||
live_url: "https://meetings.video.taxi/",
|
|
||||||
description:
|
|
||||||
"Records, transcribes, and translates meetings (Webex, Teams, Zoom). Interfaces with the GraphQL API of VIDEO.TAXI. Architecure, development, and deployment all done by me. Greenfield project.",
|
|
||||||
tech_stack: [
|
|
||||||
"Svelte",
|
|
||||||
"TypeScript",
|
|
||||||
"Tailwind CSS",
|
|
||||||
"Express",
|
|
||||||
"GraphQL",
|
|
||||||
"PostgreSQL",
|
|
||||||
"Docker",
|
|
||||||
"OpenAPI",
|
|
||||||
],
|
|
||||||
complexity: 5,
|
|
||||||
duration: "2024 - Present",
|
|
||||||
company: "TV1 GmbH",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Netbox PDU Plugin",
|
|
||||||
repo_url: "https://github.com/AlexDaichendt/axians-netbox-plugin-pdu",
|
|
||||||
description:
|
|
||||||
"Netbox plugin to read out power usage of PDUs. Forked and maintained from the original plugin by Axians. Used in production by multiple companies.",
|
|
||||||
tech_stack: ["Python", "Django", "Netbox"],
|
|
||||||
duration: "2023 - Present",
|
|
||||||
complexity: 4,
|
|
||||||
company: "TV1 GmbH",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Latency IRQ Analyzer",
|
|
||||||
repo_url: "https://github.com/AlexDaichendt/latency-irq-analyzer",
|
|
||||||
description:
|
|
||||||
"Quick uni project for overlaying latency files with IRQ data.",
|
|
||||||
tech_stack: ["NodeJS", "Highcharts"],
|
|
||||||
duration: "2024",
|
|
||||||
complexity: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Netbox Agent",
|
|
||||||
description:
|
|
||||||
"Reads out lshw, dmidecode and other data of a server and creates Netbox devices. Forked from the original project.",
|
|
||||||
tech_stack: ["Python"],
|
|
||||||
duration: "2023 - Present",
|
|
||||||
complexity: 2,
|
|
||||||
company: "TV1 GmbH",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "magewell-exporter",
|
|
||||||
repo_url: "https://github.com/TV1-EU/magewell-exporter",
|
|
||||||
description:
|
|
||||||
"Prometheus exporter for Magewell AiO encoders. Allows monitoring of the capture card status and video signal. Used in production by TV1.",
|
|
||||||
tech_stack: ["NodeJs", "Typescript"],
|
|
||||||
duration: "2023",
|
|
||||||
complexity: 4,
|
|
||||||
company: "TV1 GmbH",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- Gear Optimizer",
|
|
||||||
live_url: "https://optimizer.discretize.eu/",
|
|
||||||
repo_url: "https://github.com/discretize/discretize-gear-optimizer",
|
|
||||||
description:
|
|
||||||
"A gear optimizer for the popular MMORPG Guild Wars 2. The optimizer is used by thousands of players daily to find the best gear combinations for their characters.",
|
|
||||||
tech_stack: ["React", "Redux", "Rust", "Vite", "MaterialUI"],
|
|
||||||
duration: "2021 - Present",
|
|
||||||
complexity: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- UI Library",
|
|
||||||
repo_url: "https://github.com/discretize/discretize-ui",
|
|
||||||
description:
|
|
||||||
"A beautiful component library with tooltips for the popular MMORPG Guild Wars 2. Allows websites to look and feel like the game. Integral part of the Discretize ecosystem.",
|
|
||||||
live_url:
|
|
||||||
"https://discretize.github.io/discretize-ui/gw2-ui/?path=/story/components-attribute--boon-duration",
|
|
||||||
tech_stack: ["React", "TypeScript", "Storybook"],
|
|
||||||
duration: "2021 - Present",
|
|
||||||
complexity: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- Rewritten Website",
|
|
||||||
description:
|
|
||||||
"Rewritten website for the Discretize community. Contains guides, builds, and other useful information for the popular MMORPG Guild Wars 2. Awaiting last few changes and content updates by players before deployment.",
|
|
||||||
live_url: "https://next.discretize.eu/",
|
|
||||||
repo_url: "https://github.com/discretize/discretize.eu-rewrite",
|
|
||||||
tech_stack: ["Astro", "React", "TypeScript", "Tailwind CSS"],
|
|
||||||
duration: "2022 - Present",
|
|
||||||
complexity: 5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- CC Tool",
|
|
||||||
description:
|
|
||||||
"Allows players to create skill schedules with drag and drop. Used by high-end players to optimize and coordinate their gameplay.",
|
|
||||||
live_url: "https://cc-tool.pages.dev/",
|
|
||||||
repo_url: "https://github.com/discretize/cc-tool",
|
|
||||||
tech_stack: ["Vite", "React", "TypeScript", "Tailwind CSS"],
|
|
||||||
duration: "2024 - Present",
|
|
||||||
complexity: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- Random Builds",
|
|
||||||
description:
|
|
||||||
"Generates random builds for the popular MMORPG Guild Wars 2. Meant as a way to force players out of their comfort zone and try new things.",
|
|
||||||
live_url: "https://random-builds.discretize.eu/",
|
|
||||||
tech_stack: ["Vite", "React", "TypeScript", "Tailwind CSS"],
|
|
||||||
duration: "2022",
|
|
||||||
complexity: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Discretize -- Old Website",
|
|
||||||
description:
|
|
||||||
"Currently deployed website for the Discretize community. Contains guides, builds, and other useful information for the popular MMORPG Guild Wars 2. Inherited project from previous maintainer. Several hundred thousand monthly users.",
|
|
||||||
live_url: "https://discretize.eu/",
|
|
||||||
tech_stack: ["React", "Gatsby", "Material UI"],
|
|
||||||
duration: "2019 - Present",
|
|
||||||
complexity: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Minecraft LandLord Spigot Plugin",
|
|
||||||
live_url: "https://www.spigotmc.org/resources/landlord-2.44398/",
|
|
||||||
repo_url: "https://github.com/LandlordPlugin/LandLord",
|
|
||||||
description:
|
|
||||||
"Landlord aims to keep the Minecraft experience simple and fluid for players while also protecting their land. The idea for this plugin is to protect player builds with minimal game-play interference, while also allowing them to tweak the protection details in a simple and user-friendly way. Handed over the project to a new group of maintainers in 2019.",
|
|
||||||
tech_stack: ["Java"],
|
|
||||||
duration: "2017 - 2019",
|
|
||||||
complexity: 2,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getCardStyle = (company?: string) => {
|
|
||||||
const baseStyles =
|
|
||||||
"rounded-lg shadow-lg p-6 transition-colors duration-300 mb-8";
|
|
||||||
|
|
||||||
if (!company) {
|
|
||||||
return `${baseStyles} bg-white dark:bg-gray-800`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const companyColors: Record<string, string> = {
|
|
||||||
Discretize: "bg-blue-50 dark:bg-blue-900/30",
|
|
||||||
"TV1 GmbH": "border-2 border-orange-500 dark:border-orange-500",
|
|
||||||
};
|
|
||||||
|
|
||||||
return `${baseStyles} ${companyColors[company] || "bg-white dark:bg-gray-800"}`;
|
|
||||||
};
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="Projects" subtitle="Selected Passion Projects I am proud of">
|
<BaseLayout
|
||||||
<p>
|
title="Projects"
|
||||||
Here are some of the projects I have worked on in the past. They are sorted
|
subtitle="Selected Passion Projects I am proud of"
|
||||||
by my personal rating of relevancy. Projects done for a company are marked
|
className="w-full py-16 flex flex-col"
|
||||||
with the company name and have a special border color.
|
>
|
||||||
</p>
|
<ProjectSection projects={projects} />
|
||||||
{
|
|
||||||
projects
|
|
||||||
.sort((a, b) => b.complexity - a.complexity)
|
|
||||||
.map((project) => (
|
|
||||||
<article class={getCardStyle(project.company)}>
|
|
||||||
<div class="flex justify-between items-start mb-4">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white">
|
|
||||||
{project.title}
|
|
||||||
</h2>
|
|
||||||
{project?.company && (
|
|
||||||
<div class="flex items-center mt-1">
|
|
||||||
<Icon name="mdi:office-building" class="w-5 h-5 mr-1" />
|
|
||||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-medium">
|
|
||||||
{project?.company}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
{project.duration}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
|
||||||
{project.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
|
||||||
{project.tech_stack.map((tech) => (
|
|
||||||
<span class="px-3 py-1 text-sm bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full">
|
|
||||||
{tech}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-4">
|
|
||||||
{project.live_url && (
|
|
||||||
<a
|
|
||||||
href={project.live_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="text-blue-600 dark:text-blue-400 hover:underline flex items-center"
|
|
||||||
>
|
|
||||||
<Icon name="mdi:web" class="w-5 h-5 mr-1" />
|
|
||||||
Live Demo
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
{project.repo_url && (
|
|
||||||
<a
|
|
||||||
href={project.repo_url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="text-gray-600 dark:text-gray-400 hover:underline flex items-center"
|
|
||||||
>
|
|
||||||
<Icon name="mdi:github" class="w-5 h-5 mr-1" />
|
|
||||||
Repository
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue