in-progress: working on project cards

This commit is contained in:
jc 2023-10-25 17:05:48 -04:00
commit a8a930d1fe
No known key found for this signature in database
3 changed files with 157 additions and 15 deletions

View file

@ -4,8 +4,92 @@ import (
"github.com/labstack/echo/v4"
)
type Page struct {}
type Tech struct {
TechName string
TechURL string
TechClasses string
}
type Project struct {
Name string
URL string
Description string
TechList []Tech
Repo string
Classes string
}
type Page struct {
Projects []Project
}
func Index(c echo.Context) error {
return c.Render(200, "index.html", Page{})
data := Page{}
data.Projects = []Project{
{
Name: "Shoto",
URL: "https://www.shoto.at",
Description: "Simple and effective URL shortoner.",
Repo: "https://github.com/juancwu/shoto",
Classes: "border-indigo-500 hover:bg-indigo-950 hover:shadow-indigo-500/50",
TechList: []Tech{
{
TechName: "Next.js",
TechURL: "https://nextjs.org/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
{
TechName: "Drizzle ORM",
TechURL: "https://orm.drizzle.team/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
{
TechName: "Turso",
TechURL: "https://turso.tech/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
},
},
{
Name: "Bento",
URL: "",
Description: "API service to manage projects' secrets or environment variables with the ability to separate the variables into their own environment.",
Repo: "https://github.com/juancwu/bento",
Classes: "border-sky-500 hover:bg-sky-950 hover:shadow-sky-500/50",
TechList: []Tech{
{
TechName: "Golang",
TechURL: "https://go.dev/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
{
TechName: "Chi",
TechURL: "https://go-chi.io/#/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
{
TechName: "PlanetScale",
TechURL: "https://planetscale.com/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
},
},
{
Name: "Interpreter In Go",
URL: "",
Description: "Custom programming language interpreter written with go.",
Repo: "https://github.com/juancwu/interpretor-in-go",
Classes: "border-pink-500 hover:bg-pink-950 hover:shadow-pink-500/50",
TechList: []Tech{
{
TechName: "Golang",
TechURL: "https://go.dev/",
TechClasses: "bg-zinc-950 text-zinc-100",
},
},
},
}
return c.Render(200, "index.html", data)
}

View file

@ -328,13 +328,65 @@
</h1>
</div>
</div>
<div class="flex items-center justify-end">
<a
href="https://shoto.at/l/dumb-projects"
class="text-sm text-sky-400 underline"
<div class="h-16" aria-hidden="true"></div>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
{{ range .Projects }}
<div
class="w-full flex flex-col justify-between rounded border-2 border-indigo-500 bg-opacity-5 p-6 shadow-lg backdrop-blur-[2px] transition {{ .Classes }}"
>
Juan's dumb projects archive
</a>
<div>
<div class="my-2 flex items-center justify-between">
{{ if gt (len .URL) 1 }}
<a
href="{{ .URL }}"
class="relative flex items-center gap-2 transition-colors hover:text-sky-400"
>
<h3 class="text-2xl font-medium">
{{ .Name }}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-mt-1 inline-block h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
/>
</svg>
</h3>
</a>
{{ else }}
<h3 class="text-2xl font-medium">{{ .Name }}</h3>
{{ end }}
<ul class="flex gap-2">
{{ range .TechList }}
<li>
<a
href="{{ .TechURL }}"
class="rounded-md px-4 py-2 {{ .TechClasses }}"
>{{ .TechName }}</a
>
</li>
{{ end }}
</ul>
</div>
<hr class="border-white/25" />
<p>{{ .Description }}</p>
</div>
<p>
Checkout the code in
<a
href="{{ .Repo }}"
class="underline decoration-sky-400"
>GitHub</a
>
</p>
</div>
{{ end }}
</div>
</section>
<div class="h-64" aria-hidden="true"></div>
@ -360,5 +412,11 @@
</div>
</section>
<div class="h-64" aria-hidden="true"></div>
<a
href="https://shoto.at/l/dumb-projects"
class="text-sm text-sky-400 underline"
>
Juan's dumb projects archive
</a>
</body>
</html>

View file

@ -1,15 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./public/views/**/*.html'],
content: ["./pkg/pages/**/*.go", "./public/views/**/*.html"],
theme: {
extend: {
fontFamily: {
inter: ['Inter', 'sans-serif'],
inter: ["Inter", "sans-serif"],
},
screens: {
'3xl': '2048px',
'4xl': '2560px',
'5xl': '4096px',
"3xl": "2048px",
"4xl": "2560px",
"5xl": "4096px",
// for mac users
retina: {
raw: `@media
@ -21,7 +21,7 @@ only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
`,
},
'retina-sm': {
"retina-sm": {
raw: `@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 640px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 640px),
@ -31,7 +31,7 @@ only screen and (min-resolution: 192dpi) and (min-width: 640px),
only screen and (min-resolution: 2dppx) and (min-width: 640px)
`,
},
'retina-md': {
"retina-md": {
raw: `@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),