in-progress: working on project cards
This commit is contained in:
jc
parent
86856dc36e
commit
a8a930d1fe
3 changed files with 157 additions and 15 deletions
|
|
@ -4,8 +4,92 @@ import (
|
||||||
"github.com/labstack/echo/v4"
|
"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 {
|
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>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-end">
|
<div class="h-16" aria-hidden="true"></div>
|
||||||
<a
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
|
||||||
href="https://shoto.at/l/dumb-projects"
|
{{ range .Projects }}
|
||||||
class="text-sm text-sky-400 underline"
|
<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>
|
||||||
</a>
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="h-64" aria-hidden="true"></div>
|
<div class="h-64" aria-hidden="true"></div>
|
||||||
|
|
@ -360,5 +412,11 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="h-64" aria-hidden="true"></div>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./public/views/**/*.html'],
|
content: ["./pkg/pages/**/*.go", "./public/views/**/*.html"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
inter: ['Inter', 'sans-serif'],
|
inter: ["Inter", "sans-serif"],
|
||||||
},
|
},
|
||||||
screens: {
|
screens: {
|
||||||
'3xl': '2048px',
|
"3xl": "2048px",
|
||||||
'4xl': '2560px',
|
"4xl": "2560px",
|
||||||
'5xl': '4096px',
|
"5xl": "4096px",
|
||||||
// for mac users
|
// for mac users
|
||||||
retina: {
|
retina: {
|
||||||
raw: `@media
|
raw: `@media
|
||||||
|
|
@ -21,7 +21,7 @@ only screen and (min-resolution: 192dpi),
|
||||||
only screen and (min-resolution: 2dppx)
|
only screen and (min-resolution: 2dppx)
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
'retina-sm': {
|
"retina-sm": {
|
||||||
raw: `@media
|
raw: `@media
|
||||||
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 640px),
|
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),
|
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)
|
only screen and (min-resolution: 2dppx) and (min-width: 640px)
|
||||||
`,
|
`,
|
||||||
},
|
},
|
||||||
'retina-md': {
|
"retina-md": {
|
||||||
raw: `@media
|
raw: `@media
|
||||||
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
|
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),
|
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue