in-progress: working on project cards
This commit is contained in:
parent
86856dc36e
commit
a8a930d1fe
3 changed files with 157 additions and 15 deletions
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue