dot013/guz.one
1
0
Fork 0
Code Issues Pull Requests Activity

feat: projects section on desktop

Browse Source
This commit is contained in:
Gustavo "Guz" L. de Mello
2024-06-07 11:14:43 -03:00
parent ed59610650
commit 7a02a56a63
2 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/project_card.templ
View File

@@ -39,39 +39,44 @@ templ ProjectCard(project Project) {
class="w-100% h-100% absolute top-0 bg-gradient-to-t from-dark-gray translate-y-1%"
></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>
<div class="px-10 py-5 flex gap-5">
<div class="hidden @[w:24rem]/projectcard:flex items-center justify-center">
<div class={ "w-15 h-15 bg-light-gray text-0 " + project.Icon }>Icon</div>
</div>
<div>
<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
aria-label="Status"
class="top-0 right-0 m-0 text-xs"
class="m-0 text-sm text-gray text-justify line-clamp-2"
>
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>
}
{ project.Summary }
</p>
</hgroup>
<p
class="m-0 text-sm text-gray text-justify line-clamp-2"
>
{ project.Summary }
</p>
<!-- <p
<!-- <p
aria-label="Used language"
class="absolute top-0 right-0"
>
{ project.Language }
</p> -->
</div>
</div>
</article>
}

34
pages/homepage.templ
View File

@@ -36,6 +36,26 @@ var mockProjects = []components.Project{
Current: true,
Language: "golang",
},
{
Name: "Project",
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-solar:box-bold-duotone",
WIP: false,
Current: false,
Language: "nix",
},
{
Name: "Project",
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-solar:box-bold-duotone",
WIP: false,
Current: false,
Language: "nix",
},
}
templ Homepage() {
@@ -104,14 +124,20 @@ templ Homepage() {
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">
<div class="grid grid-flow-row auto-rows-[minmax(7rem,_2fr)] md:grid-cols-2 gap-5">
for i, project := range components.SortProjects(mockProjects) {
if i == 0 {
<span class="row-span-2">
<div class="row-span-2">
@components.ProjectCard(project)
</span>
</div>
} else if i < 3 {
<div>
@components.ProjectCard(project)
</div>
} else {
@components.ProjectCard(project)
<div class="hidden md:block">
@components.ProjectCard(project)
</div>
}
}
</div>