add html templates and styles
This commit is contained in:
jc
parent
bd9fa98b1a
commit
1b3f0b7c48
4 changed files with 380 additions and 0 deletions
54
public/css/styles.css
Normal file
54
public/css/styles.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
@apply w-full h-full bg-zinc-900 text-white font-inter relative;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.colourful-card {
|
||||
@apply relative p-2 bg-white text-zinc-950 transition-all hover:bg-transparent hover:text-white
|
||||
after:w-full after:h-full
|
||||
after:transition-all
|
||||
after:absolute after:-z-10 after:top-2 after:-right-2
|
||||
hover:after:top-0 hover:after:right-0
|
||||
after:bg-gradient-to-r after:from-purple-500 after:to-pink-500;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.clip-me-from-grass {
|
||||
clip-path: polygon(
|
||||
58.36% 5.19%,
|
||||
52.34% 3.68%,
|
||||
45.85% 3.05%,
|
||||
37.74% 7.64%,
|
||||
35.66% 12.39%,
|
||||
34.82% 19.98%,
|
||||
32.57% 27.81%,
|
||||
29.87% 32.92%,
|
||||
22.01% 37.14%,
|
||||
17.02% 42.9%,
|
||||
10.6% 53.43%,
|
||||
8.22% 70.71%,
|
||||
6.32% 80.67%,
|
||||
10.69% 91.75%,
|
||||
9.18% 99.36%,
|
||||
47.27% 99.44%,
|
||||
92.39% 99.2%,
|
||||
91.85% 86.29%,
|
||||
94.77% 74.28%,
|
||||
88.08% 54.82%,
|
||||
83.74% 45.14%,
|
||||
78.61% 37.63%,
|
||||
71.62% 34.03%,
|
||||
64.62% 23.61%,
|
||||
63.88% 18.13%,
|
||||
62.23% 10.25%
|
||||
);
|
||||
}
|
||||
}
|
||||
28
public/views/about-me.html
Normal file
28
public/views/about-me.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Juan Wu software developer about me page"
|
||||
/>
|
||||
<meta name="author" content="Juan Wu" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="software developer, fullstack developer, projects"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
<title>Juan Wu | About Me</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>About me not implemented</h1>
|
||||
</body>
|
||||
</html>
|
||||
270
public/views/index.html
Normal file
270
public/views/index.html
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Juan Wu software developer portfolio site"
|
||||
/>
|
||||
<meta name="author" content="Juan Wu" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="software developer, fullstack developer, portfolio"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
<title>Juan Wu | Portoflio</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="px-8 lg:px-16">
|
||||
<div class="py-6 flex font-medium">
|
||||
<div>
|
||||
<span class="text-white"> JUAN WU </span>
|
||||
<div
|
||||
class="text-teal-400 group hover:line-through relative text-sm"
|
||||
>
|
||||
SOFTWARE DEVELOPER
|
||||
<span
|
||||
class="absolute top-full left-0 hidden group-hover:inline text-red-500"
|
||||
>CHROOT</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="hidden lg:flex ml-auto items-center">
|
||||
<ul
|
||||
class="flex items-center justify-center gap-4 text-white uppercase"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
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"
|
||||
>
|
||||
Projects
|
||||
</a>
|
||||
</li>
|
||||
<li aria-hidden="true">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="select-none font-normal text-fuchsia-400"
|
||||
>
|
||||
-
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/about-me"
|
||||
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"
|
||||
>
|
||||
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 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"
|
||||
>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: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"
|
||||
>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: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"
|
||||
>RESUME</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="block lg:hidden ml-auto">
|
||||
<button
|
||||
aria-label="Open mobile navigation menu"
|
||||
_="on click remove .translate-x-full from #mobileNav"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<nav
|
||||
id="mobileNav"
|
||||
class="translate-x-full transition-transform fixed z-50 top-0 left-0 right-0 bottom-0 bg-zinc-800 px-8"
|
||||
>
|
||||
<div class="h-8" aria-hidden="true"></div>
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
aria-label="Close mobile navigation menu"
|
||||
_="on click add .translate-x-full to mobileNav"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
class="w-6 h-6 stroke-red-400"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-8" aria-hidden="true"></div>
|
||||
<ul
|
||||
class="uppercase flex flex-col gap-2 divide-y divide-white/10"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="/projects"
|
||||
class="p-6 pl-0 w-full block"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/about-me"
|
||||
class="p-6 pl-0 w-full block"
|
||||
>About Me</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/juancwu"
|
||||
class="p-6 pl-0 w-full block"
|
||||
>GitHub</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://linkedin.com/in/juancwu"
|
||||
class="p-6 pl-0 w-full block"
|
||||
>LinkedIn</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://linkedin.com/in/juancwu"
|
||||
class="p-6 pl-0 w-full block"
|
||||
>RESUME</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-16 pb-6 relative">
|
||||
<div class="h-16"></div>
|
||||
<section id="hero" aria-label="Hero Section">
|
||||
<div class="flex items-center justify-center gap-16">
|
||||
<div class="text-white space-y-4 relative z-10">
|
||||
<p class="text-md lg:text-xl text-zinc-300">
|
||||
Hello there <span aria-hidden="true">👋</span>,
|
||||
</p>
|
||||
<p
|
||||
class="text-5xl md:text-7xl lg:text-9xl text-zinc-100 font-bold"
|
||||
>
|
||||
I am Juan
|
||||
</p>
|
||||
<p
|
||||
class="text-2xl md:text-3xl lg:text-4xl text-zinc-300"
|
||||
>
|
||||
I am a Software Developer during the day
|
||||
</p>
|
||||
<p
|
||||
class="text-2xl md:text-3xl lg:text-4xl text-zinc-300"
|
||||
>
|
||||
<span aria-label="and">&</span>
|
||||
work at
|
||||
<a
|
||||
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"
|
||||
>LCS</a
|
||||
>
|
||||
and
|
||||
<a
|
||||
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"
|
||||
>Hawk Hacks</a
|
||||
>
|
||||
at night
|
||||
</p>
|
||||
<p class="text-xs">(send help, I have been enslaved)</p>
|
||||
<div class="h-4" aria-hidden="true"></div>
|
||||
<p
|
||||
class="text-4xl lg:text-5xl font-medium md:inline-block"
|
||||
>
|
||||
Check out my
|
||||
</p>
|
||||
<a
|
||||
href="/projects"
|
||||
class="colourful-card lg:mt-4 md:ml-2 inline-block text-4xl lg:text-5xl font-semibold"
|
||||
>
|
||||
PROJECTS
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="clip-me-from-grass hidden md:block absolute top-2 right-0 opacity-30 lg:opacity-100 lg:relative p-2 bg-gray-200 md:max-w-lg"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full clip-me-from-grass z-0"
|
||||
src="/static/touching-grass-pic.jpg"
|
||||
alt="Juan's portrait photo of him touching grass (figuratively)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
28
public/views/projects.html
Normal file
28
public/views/projects.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Juan Wu software developer projects"
|
||||
/>
|
||||
<meta name="author" content="Juan Wu" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="software developer, fullstack developer, projects"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
<title>Juan Wu | Projects</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Projects not implemented</h1>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue