feat: projects section for mobile

components/project_card.templ

@@ -0,0 +1,74 @@
+package components
+
+import "strings"
+import "slices"
+import "cmp"
+
+type Project struct {
+	Name     string
+	Summary  string
+	Image    templ.SafeURL
+	Link     templ.SafeURL
+	Icon     string
+	WIP      bool
+	Current  bool
+	Language string
+}
+
+func SortProjects(projects []Project) []Project {
+	slices.SortFunc(projects, func(a, b Project) int {
+		if (a.Current && !b.Current) || (a.WIP && !b.WIP) {
+			return -1
+		}
+		return cmp.Compare(a.Name, b.Name)
+	})
+	return projects
+}
+
+templ ProjectCard(project Project) {
+	<article
+		class="bg-dark-gray relative h-100% test:m-1 @container/projectcard-size"
+		aria-labelledby={ "project-" + strings.ReplaceAll(project.Name, " ", "-") }
+	>
+		<div class="hidden @[h:12rem]/projectcard:block max-h-50% overflow-hidden relative">
+			<picture class="h-100% flex items-center -translate-y-25%">
+				<img class="h-auto w-100% self-center" src={ string(project.Image) } alt=""/>
+			</picture>
+			<div aria-hidden="true" class="w-100% h-100% absolute top-0 bg-gradient-to-t from-dark-gray"></div>
+		</div>
+		<div class="px-10 py-5">
+			<hgroup class="flex items-center justify-between">
+				<h3
+					id={ "project-" + project.Name }
+					class="font-cal text-xl m-0"
+				>
+					{ project.Name }
+				</h3>
+				<p
+					aria-label="Status"
+					class="top-0 right-0 m-0 text-xs"
+				>
+					if project.Current {
+						<span class="bg-mauve text-dark-gray rounded-xl px-2">Current</span>
+					}
+					if project.WIP {
+						<span class="bg-yellow text-dark-gray rounded-xl px-2">
+							<abbr class="decoration-none" title="Work In Progress">WIP</abbr>
+						</span>
+					}
+				</p>
+			</hgroup>
+			<p
+				class="m-0 text-sm text-gray text-justify line-clamp-2"
+			>
+				{ project.Summary }
+			</p>
+			<!-- <p
+			aria-label="Used language"
+			class="absolute top-0 right-0"
+		>
+			{ project.Language }
+		</p> -->
+		</div>
+	</article>
+}

pages/homepage.templ

@@ -5,6 +5,39 @@ import (
 	"www/components"
 )
 
+var mockProjects = []components.Project{
+	{
+		Name:     "rec-sh",
+		Summary:  "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link:     templ.SafeURL("https://github.com/dot013/rec-sh"),
+		Image:    templ.SafeURL("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"),
+		Icon:     "i-solar:programming-bold",
+		WIP:      false,
+		Current:  false,
+		Language: "bash",
+	},
+	{
+		Name:     ".mdparser",
+		Summary:  "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link:     templ.SafeURL("https://github.com/dot013/rec-sh"),
+		Image:    templ.SafeURL("https://images.unsplash.com/photo-1560697024-fd4affa63094?q=80&w=2630&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"),
+		Icon:     "i-simple-icons:rust",
+		WIP:      true,
+		Current:  false,
+		Language: "rust",
+	},
+	{
+		Name:     ".www",
+		Summary:  "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+		Link:     templ.SafeURL("https://github.com/dot013/.www"),
+		Image:    templ.SafeURL("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=2669&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"),
+		Icon:     "i-simple-icons:go",
+		WIP:      true,
+		Current:  true,
+		Language: "golang",
+	},
+}
+
 templ Homepage() {
 	@layouts.Page("013") {
 		@components.Nav([]components.Link{
@@ -66,6 +99,23 @@ templ Homepage() {
 				consectetur et est culpa et culpa duis.
 			</p>
 		</main>
+		<section
+			aria-labelledby="projects"
+			class="w-90vw xl:w-50vw h-90vh"
+		>
+			<h2 id="projects" class="font-cal text-5xl lg:text-6xl xl:text-7xl">Projects.</h2>
+			<div class="grid grod-flow-row auto-rows-[minmax(7rem,_2fr)] gap-5">
+				for i, project := range components.SortProjects(mockProjects) {
+					if i == 0 {
+						<span class="row-span-2">
+							@components.ProjectCard(project)
+						</span>
+					} else {
+						@components.ProjectCard(project)
+					}
+				}
+			</div>
+		</section>
 		<footer>
 			<div
 				aria-hidden="true"