juancwu/potoforio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates to landing page

Browse source
This commit is contained in:
jc 2023-10-29 22:56:41 -04:00
commit 678e2fc0d5
No known key found for this signature in database
2 changed files with 143 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

16
pkg/pages/index.go
View file

@ -32,22 +32,22 @@ func Index(c echo.Context) error {
URL: "https://www.shoto.at", URL: "https://www.shoto.at",
Description: "Simple and effective URL shortoner.", Description: "Simple and effective URL shortoner.",
Repo: "https://github.com/juancwu/shoto", Repo: "https://github.com/juancwu/shoto",
Classes: "border-indigo-500 hover:bg-indigo-950 hover:shadow-indigo-500/50", Classes: "border-indigo-500",
TechList: []Tech{ TechList: []Tech{
{ {
TechName: "Next.js", TechName: "Next.js",
TechURL: "https://nextjs.org/", TechURL: "https://nextjs.org/",
TechClasses: "bg-zinc-950 text-zinc-100", TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-zinc-100 hover:text-gray-950",
}, },
{ {
TechName: "Drizzle ORM", TechName: "Drizzle ORM",
TechURL: "https://orm.drizzle.team/", TechURL: "https://orm.drizzle.team/",
TechClasses: "bg-zinc-950 text-zinc-100", TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-green-600",
}, },
{ {
TechName: "Turso", TechName: "Turso",
TechURL: "https://turso.tech/", TechURL: "https://turso.tech/",
TechClasses: "bg-zinc-950 text-zinc-100", TechClasses: "transition bg-zinc-950 text-zinc-100 hover:bg-teal-600",
}, },
}, },
}, },
@ -56,12 +56,12 @@ func Index(c echo.Context) error {
URL: "", URL: "",
Description: "API service to manage projects' secrets or environment variables with the ability to separate the variables into their own environment.", 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", Repo: "https://github.com/juancwu/bento",
Classes: "border-sky-500 hover:bg-sky-950 hover:shadow-sky-500/50", Classes: "border-sky-500",
TechList: []Tech{ TechList: []Tech{
{ {
TechName: "Golang", TechName: "Golang",
TechURL: "https://go.dev/", TechURL: "https://go.dev/",
TechClasses: "bg-zinc-950 text-zinc-100", TechClasses: "transition bg-zinc-950 text-zinc-100",
}, },
{ {
TechName: "Chi", TechName: "Chi",
@ -78,9 +78,9 @@ func Index(c echo.Context) error {
{ {
Name: "Interpreter In Go", Name: "Interpreter In Go",
URL: "", URL: "",
Description: "Custom programming language interpreter written with go.", Description: "Custom programming language interpreter written with Go following the book \"Writing an Interpreter In Go\" By Thorsten Ball",
Repo: "https://github.com/juancwu/interpretor-in-go", Repo: "https://github.com/juancwu/interpretor-in-go",
Classes: "border-pink-500 hover:bg-pink-950 hover:shadow-pink-500/50", Classes: "border-emerald-500",
TechList: []Tech{ TechList: []Tech{
{ {
TechName: "Golang", TechName: "Golang",

198
public/views/index.html
View file

@ -66,85 +66,10 @@
> >
</div> </div>
</div> </div>
<nav class="ml-auto hidden items-center lg:flex">
<ul
class="flex items-center justify-center gap-4 uppercase text-white"
>
<li>
<a
href="#projects"
class="relative z-0 p-2 after:absolute after:left-0 after:top-1/2 after:-z-10 after:h-3/4 after:w-0 after:-translate-y-1/2 after:bg-gradient-to-r after:from-purple-500 after:to-pink-500 after:transition-all hover:after:w-full focus:after:w-full"
>
Projects
</a>
</li>
<li aria-hidden="true">
<span
aria-hidden="true"
class="select-none font-normal text-fuchsia-400"
>
-
</span>
</li>
<li>
<a
href="#aboutme"
class="relative z-0 whitespace-nowrap p-2 after:absolute after:-right-2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:bg-gradient-to-r after:from-emerald-500 after:to-teal-600 after:opacity-0 after:transition-all hover:after:right-0 hover:after:top-0 hover:after:translate-y-[15%] hover:after:opacity-100 focus:after:right-0 focus:after:top-0 focus:after:translate-y-[15%] focus:after:opacity-100"
>
About Me
</a>
</li>
<li aria-hidden="true">
<span
aria-hidden="true"
class="select-none font-normal text-fuchsia-400"
>
-
</span>
</li>
<li>
<a
href="https://github.com/juancwu"
class="relative z-0 p-2 after:absolute after:left-1/2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:-translate-x-1/2 after:-translate-y-1/2 after:scale-75 after:bg-white after:opacity-0 after:transition-all hover:text-gray-950 hover:after:scale-100 hover:after:opacity-100 focus:text-gray-950 focus:after:scale-100 focus:after:opacity-100"
>GitHub</a
>
</li>
<li aria-hidden="true">
<span
aria-hidden="true"
class="select-none font-normal text-fuchsia-400"
>
-
</span>
</li>
<li>
<a
href="https://linkedin.com/in/juancwu"
class="relative z-0 p-2 after:absolute after:-left-2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:bg-gradient-to-r after:from-sky-500 after:to-indigo-500 after:opacity-0 after:transition-all hover:after:left-0 hover:after:top-0 hover:after:translate-y-[15%] hover:after:opacity-100 focus:after:left-0 focus:after:top-0 focus:after:translate-y-[15%] focus:after:opacity-100"
>LinkedIn</a
>
</li>
<li aria-hidden="true">
<span
aria-hidden="true"
class="select-none font-normal text-fuchsia-400"
>
-
</span>
</li>
<li>
<a
href="https://linkedin.com/in/juancwu"
class="relative z-0 p-2 after:absolute after:right-0 after:top-1/2 after:-z-10 after:h-3/4 after:w-0 after:-translate-y-1/2 after:-scale-x-100 after:bg-gradient-to-r after:from-orange-500 after:to-yellow-500 after:transition-all hover:after:w-full focus:after:w-full"
>RESUME</a
>
</li>
</ul>
</nav>
<div class="ml-auto block lg:hidden">
<button <button
class="ml-auto lg:hidden"
aria-label="Open mobile navigation menu" aria-label="Open mobile navigation menu"
_="on click remove .translate-x-full from #mobileNav then add .overflow-hidden to <body />" _="on click remove .translate-x-full from <nav /> then add .overflow-hidden to <body />"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -163,22 +88,20 @@
</svg> </svg>
</button> </button>
<nav <nav
id="mobileNav" class="fixed inset-0 z-10 translate-x-full items-center bg-zinc-900 transition-transform lg:relative lg:ml-auto lg:flex lg:bg-transparent"
class="fixed bottom-0 left-0 right-0 top-0 z-50 translate-x-full bg-zinc-950 px-8 transition-transform"
> >
<div class="h-8" aria-hidden="true"></div> <div class="flex justify-end p-8">
<div class="flex items-center justify-end">
<button <button
aria-label="Close mobile navigation menu" aria-label="close mobile navigation menu"
_="on click add .translate-x-full to mobileNav then remove .overflow-hidden from <body />" _="on click add .translate-x-full to <nav /> then remove .overflow-hidden from <body />"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
aria-hidden="true" stroke="currentColor"
class="h-6 w-6 stroke-red-400" class="h-6 w-6 text-red-500"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@ -188,53 +111,67 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="h-8" aria-hidden="true"></div>
<ul <ul
class="flex flex-col gap-2 divide-y divide-white/10 uppercase" class="flex flex-col items-center justify-center gap-8 uppercase text-white lg:flex-row lg:gap-4"
> >
<li> <li>
<a <a
href="#projects" href="#projects"
class="block w-full p-6 pl-0" class="relative z-0 p-2 after:absolute after:left-0 after:top-1/2 after:-z-10 after:h-3/4 after:w-0 after:-translate-y-1/2 after:bg-gradient-to-r after:from-purple-500 after:to-pink-500 after:transition-all hover:after:w-full focus:after:w-full"
_="on click add .translate-x-full to mobileNav"
>Projects</a
> >
Projects
</a>
</li> </li>
<li> <li aria-hidden="true">
<a <span
href="#aboutme" aria-hidden="true"
class="block w-full p-6 pl-0" class="hidden select-none font-normal text-fuchsia-400 lg:inline"
_="on click add .translate-x-full to mobileNav"
>About Me</a
> >
-
</span>
</li> </li>
<li> <li>
<a <a
href="https://github.com/juancwu" href="https://github.com/juancwu"
class="block w-full p-6 pl-0" class="relative z-0 p-2 after:absolute after:left-1/2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:-translate-x-1/2 after:-translate-y-1/2 after:scale-75 after:bg-white after:opacity-0 after:transition-all hover:text-gray-950 hover:after:scale-100 hover:after:opacity-100 focus:text-gray-950 focus:after:scale-100 focus:after:opacity-100"
>GitHub</a >GitHub</a
> >
</li> </li>
<li> <li aria-hidden="true">
<a <span
href="https://linkedin.com/in/juancwu" aria-hidden="true"
class="block w-full p-6 pl-0" class="hidden select-none font-normal text-fuchsia-400 lg:inline"
>LinkedIn</a
> >
-
</span>
</li> </li>
<li> <li>
<a <a
href="https://linkedin.com/in/juancwu" href="https://linkedin.com/in/juancwu"
class="block w-full p-6 pl-0" class="relative z-0 p-2 after:absolute after:-left-2 after:top-1/2 after:-z-10 after:h-3/4 after:w-full after:bg-gradient-to-r after:from-sky-500 after:to-indigo-500 after:opacity-0 after:transition-all hover:after:left-0 hover:after:top-0 hover:after:translate-y-[15%] hover:after:opacity-100 focus:after:left-0 focus:after:top-0 focus:after:translate-y-[15%] focus:after:opacity-100"
>LinkedIn</a
>
</li>
<li aria-hidden="true">
<span
aria-hidden="true"
class="hidden select-none font-normal text-fuchsia-400 lg:inline"
>
-
</span>
</li>
<li>
<a
href="https://linkedin.com/in/juancwu"
class="relative z-0 p-2 after:absolute after:right-0 after:top-1/2 after:-z-10 after:h-3/4 after:w-0 after:-translate-y-1/2 after:-scale-x-100 after:bg-gradient-to-r after:from-orange-500 after:to-yellow-500 after:transition-all hover:after:w-full focus:after:w-full"
>RESUME</a >RESUME</a
> >
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div>
</header> </header>
<main class="relative px-16 py-24"> <main class="relative z-0 px-16 py-24">
<div class="grid-pattern absolute inset-0" aria-hidden="true"></div> <div class="grid-pattern absolute inset-0" aria-hidden="true"></div>
<div <div
class="radial-overlay absolute inset-0" class="radial-overlay absolute inset-0"
@ -300,19 +237,18 @@
src="/static/touching-grass-pic.jpg" src="/static/touching-grass-pic.jpg"
alt="Juan's portrait photo of him touching grass (figuratively)" alt="Juan's portrait photo of him touching grass (figuratively)"
/> />
<p></p>
</div> </div>
</div> </div>
</section> </section>
</main> </main>
<div class="hidden h-64 lg:block" aria-hidden="true"></div> <div class="hidden h-12 lg:block" aria-hidden="true"></div>
<section <section
id="projects" id="projects"
aria-label="Juan's Projects" aria-label="Juan's Projects"
class="relative px-8" class="relative px-8"
> >
<div class="relative flex items-center justify-center pt-8"> <div class="relative flex items-center justify-center pt-8">
<div> <div class="flex flex-col items-center">
<h1 <h1
class="flex flex-col gap-2 p-8 text-3xl font-bold uppercase md:text-5xl" class="flex flex-col gap-2 p-8 text-3xl font-bold uppercase md:text-5xl"
> >
@ -326,16 +262,24 @@
<span class="relative"> Project Graveyard </span> <span class="relative"> Project Graveyard </span>
</span> </span>
</h1> </h1>
<a
href="https://shoto.at/l/dumb-projects"
class="relative underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full"
>
Juan's dumb projects archive
</a>
</div> </div>
</div> </div>
<div class="h-16" aria-hidden="true"></div> <div class="h-16" aria-hidden="true"></div>
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3"> <div class="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
{{ range .Projects }} {{ range .Projects }}
<div <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 }}" class="flex w-full flex-col justify-between gap-4 rounded border-2 bg-zinc-800/10 p-6 shadow-lg backdrop-blur-[2px] transition {{ .Classes }}"
> >
<div> <div>
<div class="my-2 flex items-center justify-between"> <div
class="flex flex-col items-center justify-between gap-4 md:flex-row md:gap-0"
>
{{ if gt (len .URL) 1 }} {{ if gt (len .URL) 1 }}
<a <a
href="{{ .URL }}" href="{{ .URL }}"
@ -367,21 +311,23 @@
<li> <li>
<a <a
href="{{ .TechURL }}" href="{{ .TechURL }}"
class="rounded-md px-4 py-2 {{ .TechClasses }}" class="relative text-sm underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full md:text-base"
>{{ .TechName }}</a >{{ .TechName }}</a
> >
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
<div class="h-4" aria-hidden="true"></div>
<hr class="border-white/25" /> <hr class="border-white/25" />
<div class="h-4" aria-hidden="true"></div>
<p>{{ .Description }}</p> <p>{{ .Description }}</p>
</div> </div>
<p> <p>
Checkout the code in Checkout the code in
<a <a
href="{{ .Repo }}" href="{{ .Repo }}"
class="underline decoration-sky-400" class="relative underline decoration-sky-400 after:absolute after:left-0 after:top-0 after:-z-10 after:h-full after:w-0 after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:w-full focus:text-white focus:decoration-sky-500 focus:after:w-full"
>GitHub</a >GitHub</a
> >
</p> </p>
@ -390,33 +336,5 @@
</div> </div>
</section> </section>
<div class="h-64" aria-hidden="true"></div> <div class="h-64" aria-hidden="true"></div>
<section id="aboutme" aria-lable="About Juan">
<div class="relative flex items-center justify-center pt-8">
<div>
<h1
class="flex flex-col gap-2 p-8 text-3xl font-bold uppercase md:text-5xl"
>
<span
class="relative text-xl font-medium text-zinc-300 md:text-2xl"
>Welcome to</span
>
<span
class="relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:scale-90 before:bg-gradient-to-r before:from-emerald-500 before:to-teal-600 before:opacity-60 before:transition-all hover:before:scale-100"
>
<span class="relative">
Juan's Narcissistic Biography
</span>
</span>
</h1>
</div>
</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> </body>
</html> </html>