updates to landing page
This commit is contained in:
jc
parent
a8a930d1fe
commit
678e2fc0d5
2 changed files with 143 additions and 225 deletions
|
|
@ -32,22 +32,22 @@ func Index(c echo.Context) error {
|
|||
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",
|
||||
Classes: "border-indigo-500",
|
||||
TechList: []Tech{
|
||||
{
|
||||
TechName: "Next.js",
|
||||
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",
|
||||
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",
|
||||
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: "",
|
||||
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",
|
||||
Classes: "border-sky-500",
|
||||
TechList: []Tech{
|
||||
{
|
||||
TechName: "Golang",
|
||||
TechURL: "https://go.dev/",
|
||||
TechClasses: "bg-zinc-950 text-zinc-100",
|
||||
TechClasses: "transition bg-zinc-950 text-zinc-100",
|
||||
},
|
||||
{
|
||||
TechName: "Chi",
|
||||
|
|
@ -78,9 +78,9 @@ func Index(c echo.Context) error {
|
|||
{
|
||||
Name: "Interpreter In Go",
|
||||
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",
|
||||
Classes: "border-pink-500 hover:bg-pink-950 hover:shadow-pink-500/50",
|
||||
Classes: "border-emerald-500",
|
||||
TechList: []Tech{
|
||||
{
|
||||
TechName: "Golang",
|
||||
|
|
|
|||
|
|
@ -66,85 +66,10 @@
|
|||
>
|
||||
</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
|
||||
class="ml-auto lg:hidden"
|
||||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -163,22 +88,20 @@
|
|||
</svg>
|
||||
</button>
|
||||
<nav
|
||||
id="mobileNav"
|
||||
class="fixed bottom-0 left-0 right-0 top-0 z-50 translate-x-full bg-zinc-950 px-8 transition-transform"
|
||||
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"
|
||||
>
|
||||
<div class="h-8" aria-hidden="true"></div>
|
||||
<div class="flex items-center justify-end">
|
||||
<div class="flex justify-end p-8">
|
||||
<button
|
||||
aria-label="Close mobile navigation menu"
|
||||
_="on click add .translate-x-full to mobileNav then remove .overflow-hidden from <body />"
|
||||
aria-label="close mobile navigation menu"
|
||||
_="on click add .translate-x-full to <nav /> then remove .overflow-hidden from <body />"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
class="h-6 w-6 stroke-red-400"
|
||||
stroke="currentColor"
|
||||
class="h-6 w-6 text-red-500"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
@ -188,53 +111,67 @@
|
|||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-8" aria-hidden="true"></div>
|
||||
<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>
|
||||
<a
|
||||
href="#projects"
|
||||
class="block w-full p-6 pl-0"
|
||||
_="on click add .translate-x-full to mobileNav"
|
||||
>Projects</a
|
||||
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>
|
||||
<a
|
||||
href="#aboutme"
|
||||
class="block w-full p-6 pl-0"
|
||||
_="on click add .translate-x-full to mobileNav"
|
||||
>About Me</a
|
||||
<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://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
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://linkedin.com/in/juancwu"
|
||||
class="block w-full p-6 pl-0"
|
||||
>LinkedIn</a
|
||||
<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="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
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</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="radial-overlay absolute inset-0"
|
||||
|
|
@ -300,19 +237,18 @@
|
|||
src="/static/touching-grass-pic.jpg"
|
||||
alt="Juan's portrait photo of him touching grass (figuratively)"
|
||||
/>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="hidden h-64 lg:block" aria-hidden="true"></div>
|
||||
<div class="hidden h-12 lg:block" aria-hidden="true"></div>
|
||||
<section
|
||||
id="projects"
|
||||
aria-label="Juan's Projects"
|
||||
class="relative px-8"
|
||||
>
|
||||
<div class="relative flex items-center justify-center pt-8">
|
||||
<div>
|
||||
<div class="flex flex-col items-center">
|
||||
<h1
|
||||
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>
|
||||
</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 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 }}"
|
||||
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 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 }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
|
|
@ -367,21 +311,23 @@
|
|||
<li>
|
||||
<a
|
||||
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
|
||||
>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="h-4" aria-hidden="true"></div>
|
||||
<hr class="border-white/25" />
|
||||
<div class="h-4" aria-hidden="true"></div>
|
||||
<p>{{ .Description }}</p>
|
||||
</div>
|
||||
<p>
|
||||
Checkout the code in
|
||||
<a
|
||||
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
|
||||
>
|
||||
</p>
|
||||
|
|
@ -390,33 +336,5 @@
|
|||
</div>
|
||||
</section>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue