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

in progress: project and about me section

Browse source
This commit is contained in:
jc 2023-10-21 18:57:39 -04:00
commit e9e5a0ad39
No known key found for this signature in database
6 changed files with 108 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
pkg/pages/index.go
View file

@ -11,7 +11,7 @@ func Index(c echo.Context) error {
} }
func Projects(c echo.Context) error { func Projects(c echo.Context) error {
return c.Render(200, "projects.html", Page{}) return c.Render(200, "projects-only.html", Page{})
} }
func AboutMe(c echo.Context) error { func AboutMe(c echo.Context) error {

13
public/css/styles.css
View file

@ -2,13 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
html,
body {
@apply w-full h-full bg-zinc-900 text-white font-inter relative;
}
}
@layer components { @layer components {
.colourful-card { .colourful-card {
@apply relative p-2 bg-white text-zinc-950 transition-all hover:bg-transparent hover:text-white @apply relative p-2 bg-white text-zinc-950 transition-all hover:bg-transparent hover:text-white
@ -16,11 +9,11 @@
after:transition-all after:transition-all
after:absolute after:-z-10 after:top-2 after:-right-2 after:absolute after:-z-10 after:top-2 after:-right-2
hover:after:top-0 hover:after:right-0 hover:after:top-0 hover:after:right-0
after:bg-gradient-to-r after:from-purple-500 after:to-pink-500; after:bg-gradient-to-r after:from-purple-500 after:to-pink-500
focus:after:top-0 focus:after:right-0
focus:bg-transparent focus:text-white;
} }
}
@layer utilities {
.clip-me-from-grass { .clip-me-from-grass {
clip-path: polygon( clip-path: polygon(
58.36% 5.19%, 58.36% 5.19%,

102
public/views/index.html
View file

@ -1,5 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html
lang="en"
class="w-full h-full bg-zinc-900 text-white font-inter relative scroll-smooth"
>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -19,11 +22,16 @@
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<script
src="https://unpkg.com/htmx.org@1.9.6"
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script> <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<title>Juan Wu | Portfolio</title> <title>Juan Wu | Portfolio</title>
</head> </head>
<body> <body class="w-full h-full">
<header class="px-8 lg:px-16"> <header class="px-8 lg:px-16">
<div class="py-6 flex font-medium"> <div class="py-6 flex font-medium">
<div> <div>
@ -33,6 +41,7 @@
> >
SOFTWARE DEVELOPER SOFTWARE DEVELOPER
<span <span
aria-hidden="true"
class="absolute top-full left-0 hidden group-hover:inline text-red-500" class="absolute top-full left-0 hidden group-hover:inline text-red-500"
>CHROOT</span >CHROOT</span
> >
@ -44,8 +53,8 @@
> >
<li> <li>
<a <a
href="/projects" href="#projects"
class="relative z-0 p-2 after:w-0 hover:after:w-full after:h-3/4 after:transition-all after:absolute after:-z-10 after:top-1/2 after:-translate-y-1/2 after:left-0 after:bg-gradient-to-r after:from-purple-500 after:to-pink-500" class="relative z-0 p-2 after:w-0 focus:after:w-full hover:after:w-full after:h-3/4 after:transition-all after:absolute after:-z-10 after:top-1/2 after:-translate-y-1/2 after:left-0 after:bg-gradient-to-r after:from-purple-500 after:to-pink-500"
> >
Projects Projects
</a> </a>
@ -60,8 +69,8 @@
</li> </li>
<li> <li>
<a <a
href="/about-me" href="#aboutme"
class="relative whitespace-nowrap z-0 p-2 after:w-full after:h-3/4 after:opacity-0 hover:after:opacity-100 after:absolute after:-z-10 after:top-1/2 after:-right-2 hover:after:top-0 hover:after:translate-y-[15%] hover:after:right-0 after:bg-gradient-to-r after:from-emerald-500 after:to-teal-600 after:transition-all" class="relative whitespace-nowrap z-0 p-2 after:w-full after:h-3/4 after:opacity-0 focus:after:opacity-100 hover:after:opacity-100 after:absolute after:-z-10 after:top-1/2 after:-right-2 focus:after:top-0 hover:after:top-0 focus:after:translate-y-[15%] hover:after:translate-y-[15%] focus:after:right-0 hover:after:right-0 after:bg-gradient-to-r after:from-emerald-500 after:to-teal-600 after:transition-all"
> >
About Me About Me
</a> </a>
@ -77,7 +86,7 @@
<li> <li>
<a <a
href="https://github.com/juancwu" href="https://github.com/juancwu"
class="relative z-0 p-2 hover:text-gray-950 after:w-full after:h-3/4 after:opacity-0 after:scale-75 hover:after:opacity-100 hover:after:scale-100 after:transition-all after:bg-white after:absolute after:-z-10 after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2" class="relative z-0 p-2 focus:text-gray-950 hover:text-gray-950 after:w-full after:h-3/4 after:opacity-0 after:scale-75 focus:after:opacity-100 hover:after:opacity-100 focus:after:scale-100 hover:after:scale-100 after:transition-all after:bg-white after:absolute after:-z-10 after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2"
>GitHub</a >GitHub</a
> >
</li> </li>
@ -92,7 +101,7 @@
<li> <li>
<a <a
href="https://linkedin.com/in/juancwu" href="https://linkedin.com/in/juancwu"
class="relative z-0 p-2 after:w-full after:h-3/4 after:opacity-0 hover:after:opacity-100 after:absolute after:-z-10 after:top-1/2 after:-left-2 hover:after:top-0 hover:after:translate-y-[15%] hover:after:left-0 after:bg-gradient-to-r after:from-sky-500 after:to-indigo-500 after:transition-all" class="relative z-0 p-2 after:w-full after:h-3/4 after:opacity-0 focus:after:opacity-100 hover:after:opacity-100 after:absolute after:-z-10 after:top-1/2 after:-left-2 focus:after:top-0 hover:after:top-0 focus:after:translate-y-[15%] hover:after:translate-y-[15%] focus:after:left-0 hover:after:left-0 after:bg-gradient-to-r after:from-sky-500 after:to-indigo-500 after:transition-all"
>LinkedIn</a >LinkedIn</a
> >
</li> </li>
@ -107,7 +116,7 @@
<li> <li>
<a <a
href="https://linkedin.com/in/juancwu" href="https://linkedin.com/in/juancwu"
class="relative z-0 p-2 after:w-0 hover:after:w-full after:h-3/4 after:transition-all after:absolute after:-z-10 after:top-1/2 after:-translate-y-1/2 after:right-0 after:-scale-x-100 after:bg-gradient-to-r after:from-orange-500 after:to-yellow-500" class="relative z-0 p-2 after:w-0 focus:after:w-full hover:after:w-full after:h-3/4 after:transition-all after:absolute after:-z-10 after:top-1/2 after:-translate-y-1/2 after:right-0 after:-scale-x-100 after:bg-gradient-to-r after:from-orange-500 after:to-yellow-500"
>RESUME</a >RESUME</a
> >
</li> </li>
@ -166,15 +175,17 @@
> >
<li> <li>
<a <a
href="/projects" href="#projects"
class="p-6 pl-0 w-full block" class="p-6 pl-0 w-full block"
_="on click add .translate-x-full to mobileNav"
>Projects</a >Projects</a
> >
</li> </li>
<li> <li>
<a <a
href="/about-me" href="#aboutme"
class="p-6 pl-0 w-full block" class="p-6 pl-0 w-full block"
_="on click add .translate-x-full to mobileNav"
>About Me</a >About Me</a
> >
</li> </li>
@ -204,8 +215,9 @@
</div> </div>
</div> </div>
</header> </header>
<main class="px-16 pb-6 relative"> <main
<div class="h-16"></div> class="px-16 pb-24 relative h-[calc(100%_-_92px)] flex items-center justify-center"
>
<section id="hero" aria-label="Hero Section"> <section id="hero" aria-label="Hero Section">
<div class="flex items-center justify-center gap-16"> <div class="flex items-center justify-center gap-16">
<div class="text-white space-y-4 relative z-10"> <div class="text-white space-y-4 relative z-10">
@ -229,13 +241,13 @@
work at work at
<a <a
href="https://lauriercs.ca" href="https://lauriercs.ca"
class="font-medium whitespace-nowrap underline decoration-sky-400 hover:decoration-sky-500 relative z-0 hover:text-white transition-all after:transition-all after:w-0 hover:after:w-full after:h-full after:bg-sky-500 after:absolute after:-z-10 after:top-0 after:left-0" class="font-medium whitespace-nowrap underline decoration-sky-400 hover:decoration-sky-500 focus:decoration-sky-500 relative z-0 hover:text-white focus:text-white transition-all after:transition-all after:w-0 hover:after:w-full focus:after:w-full after:h-full after:bg-sky-500 after:absolute after:-z-10 after:top-0 after:left-0"
>LCS</a >LCS</a
> >
and and
<a <a
href="https://hawkhacks.ca" href="https://hawkhacks.ca"
class="font-medium whitespace-nowrap underline decoration-sky-400 hover:decoration-sky-500 relative z-0 hover:text-white transition-all after:transition-all after:w-full hover:after:h-full after:h-0 after:bg-sky-500 after:absolute after:-z-10 after:top-0 after:left-0" class="font-medium whitespace-nowrap underline decoration-sky-400 hover:decoration-sky-500 focus:decoration-sky-500 relative z-0 hover:text-white focus:text-white transition-all after:transition-all after:w-full hover:after:h-full focus:after:h-full after:h-0 after:bg-sky-500 after:absolute after:-z-10 after:top-0 after:left-0"
>Hawk Hacks</a >Hawk Hacks</a
> >
at night at night
@ -248,8 +260,8 @@
Check out my Check out my
</p> </p>
<a <a
href="/projects" href="#projects"
class="colourful-card lg:mt-4 md:ml-2 inline-block text-4xl lg:text-5xl font-semibold" class="colourful-card focus:outline-offset-2 lg:mt-4 md:ml-2 inline-block text-4xl lg:text-5xl font-semibold"
> >
PROJECTS PROJECTS
</a> </a>
@ -266,5 +278,61 @@
</div> </div>
</section> </section>
</main> </main>
<div class="h-64" aria-hidden="true"></div>
<section id="projects" aria-label="Juan's Projects" class="px-8">
<div class="flex items-center justify-center pt-8 relative">
<div>
<h1
class="text-5xl uppercase flex flex-col gap-2 font-bold p-8"
>
<span
class="text-zinc-300 font-medium text-2xl relative"
>Welcomte to</span
>
<span
class="before:block before:opacity-60 before:absolute before:transition-all hover:before:scale-100 before:scale-90 before:-inset-1 before:-skew-y-3 before:bg-gradient-to-r before:from-purple-500 before:to-pink-500 relative inline-block"
>
<span class="relative"> Project Graveyard </span>
</span>
</h1>
</div>
</div>
<div class="flex items-center justify-end">
<a
href="https://shoto.at/l/dumb-projects"
class="text-sm underline text-sky-400"
>Juan's dumb projects archive</a
>
</div>
</section>
<div class="h-64" aria-hidden="true"></div>
<section id="aboutme" aria-lable="About Juan">
<div class="flex items-center justify-center pt-8 relative">
<div>
<h1
class="text-5xl uppercase flex flex-col gap-2 font-bold p-8"
>
<span
class="text-zinc-300 font-medium text-2xl relative"
>Welcomte to</span
>
<span
class="before:block before:opacity-60 before:absolute before:transition-all hover:before:scale-100 before:scale-90 before:-inset-1 before:-skew-y-3 before:bg-gradient-to-r before:from-emerald-500 before:to-teal-600 relative inline-block"
>
<span class="relative">
Juan's Narcissistic Biography
</span>
</span>
</h1>
</div>
</div>
</section>
<div class="h-64" aria-hidden="true"></div>
<footer class="px-16 py-12 bg-zinc-950">
<div class="flex flex-col gap-2 items-start justify-center">
<p>Made With Luv</p>
<p>Juan</p>
</div>
</footer>
</body> </body>
</html> </html>

5
public/views/projects-only.html Normal file
View file

@ -0,0 +1,5 @@
<div class="w-full h-full">
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
<h1 class="text-8xl text-white uppercase font-bold p-8">PROJECTS!</h1>
</div>
</div>

1
static/htmx.min.js vendored
View file

File diff suppressed because one or more lines are too long

14
static/utils.js Normal file
View file

@ -0,0 +1,14 @@
function isElementInView(elementID) {
const element = document.getElementById(elementID);
const rect = element.getBoundingClientRect();
const windowHeight =
window.innerHeight || document.documentElement.clientHeight;
const windowWidth =
window.innerWidth || document.documentElement.clientWidth;
// check if element is completely in view
const isInHorizontalView = rect.left >= 0 && rect.right <= windowWidth;
const isInVerticalView = rect.top >= 0 && rect.bottom <= windowHeight;
return isInHorizontalView && isInVerticalView;
}