format config for prettier & tailwindcss classes sorting
This commit is contained in:
jc
parent
a7720d8645
commit
8d7991719f
5 changed files with 434 additions and 207 deletions
7
.prettierrc.json
Normal file
7
.prettierrc.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": false,
|
||||||
|
"plugins": ["prettier-plugin-tailwindcss"]
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,9 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "concurrently \"pnpm run tw:dev\" \"air\"",
|
"dev": "concurrently \"pnpm run tw:dev\" \"air\"",
|
||||||
"tw:dev": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --watch",
|
"tw:dev": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --watch",
|
||||||
"tw:prod": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --minify"
|
"tw:prod": "tailwindcss -i ./public/css/styles.css -o ./static/styles.css --minify",
|
||||||
|
"prettier": "prettier ./public --write",
|
||||||
|
"prettier:check": "prettier ./public --check"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"personal",
|
"personal",
|
||||||
|
|
@ -20,6 +22,7 @@
|
||||||
"autoprefixer": "^10.4.16",
|
"autoprefixer": "^10.4.16",
|
||||||
"concurrently": "^8.2.2",
|
"concurrently": "^8.2.2",
|
||||||
"postcss": "^8.4.31",
|
"postcss": "^8.4.31",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.5.6",
|
||||||
"tailwindcss": "^3.3.3"
|
"tailwindcss": "^3.3.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
64
pnpm-lock.yaml
generated
64
pnpm-lock.yaml
generated
|
|
@ -14,6 +14,9 @@ devDependencies:
|
||||||
postcss:
|
postcss:
|
||||||
specifier: ^8.4.31
|
specifier: ^8.4.31
|
||||||
version: 8.4.31
|
version: 8.4.31
|
||||||
|
prettier-plugin-tailwindcss:
|
||||||
|
specifier: ^0.5.6
|
||||||
|
version: 0.5.6(prettier@3.0.3)
|
||||||
tailwindcss:
|
tailwindcss:
|
||||||
specifier: ^3.3.3
|
specifier: ^3.3.3
|
||||||
version: 3.3.3
|
version: 3.3.3
|
||||||
|
|
@ -577,6 +580,67 @@ packages:
|
||||||
source-map-js: 1.0.2
|
source-map-js: 1.0.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/prettier-plugin-tailwindcss@0.5.6(prettier@3.0.3):
|
||||||
|
resolution: {integrity: sha512-2Xgb+GQlkPAUCFi3sV+NOYcSI5XgduvDBL2Zt/hwJudeKXkyvRS65c38SB0yb9UB40+1rL83I6m0RtlOQ8eHdg==}
|
||||||
|
engines: {node: '>=14.21.3'}
|
||||||
|
peerDependencies:
|
||||||
|
'@ianvs/prettier-plugin-sort-imports': '*'
|
||||||
|
'@prettier/plugin-pug': '*'
|
||||||
|
'@shopify/prettier-plugin-liquid': '*'
|
||||||
|
'@shufo/prettier-plugin-blade': '*'
|
||||||
|
'@trivago/prettier-plugin-sort-imports': '*'
|
||||||
|
prettier: ^3.0
|
||||||
|
prettier-plugin-astro: '*'
|
||||||
|
prettier-plugin-css-order: '*'
|
||||||
|
prettier-plugin-import-sort: '*'
|
||||||
|
prettier-plugin-jsdoc: '*'
|
||||||
|
prettier-plugin-marko: '*'
|
||||||
|
prettier-plugin-organize-attributes: '*'
|
||||||
|
prettier-plugin-organize-imports: '*'
|
||||||
|
prettier-plugin-style-order: '*'
|
||||||
|
prettier-plugin-svelte: '*'
|
||||||
|
prettier-plugin-twig-melody: '*'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@ianvs/prettier-plugin-sort-imports':
|
||||||
|
optional: true
|
||||||
|
'@prettier/plugin-pug':
|
||||||
|
optional: true
|
||||||
|
'@shopify/prettier-plugin-liquid':
|
||||||
|
optional: true
|
||||||
|
'@shufo/prettier-plugin-blade':
|
||||||
|
optional: true
|
||||||
|
'@trivago/prettier-plugin-sort-imports':
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-astro:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-css-order:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-import-sort:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-jsdoc:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-marko:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-organize-attributes:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-organize-imports:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-style-order:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-svelte:
|
||||||
|
optional: true
|
||||||
|
prettier-plugin-twig-melody:
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
prettier: 3.0.3
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/prettier@3.0.3:
|
||||||
|
resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
|
||||||
|
engines: {node: '>=14'}
|
||||||
|
hasBin: true
|
||||||
|
dev: true
|
||||||
|
|
||||||
/queue-microtask@1.2.3:
|
/queue-microtask@1.2.3:
|
||||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,14 @@
|
||||||
|
|
||||||
@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 bg-white p-2 text-zinc-950 transition-all after:absolute after:-right-2
|
||||||
after:w-full after:h-full
|
after:top-2 after:-z-10
|
||||||
after:transition-all
|
after:h-full
|
||||||
after:absolute after:-z-10 after:top-2 after:-right-2
|
after:w-full after:bg-gradient-to-r after:from-purple-500 after:to-pink-500
|
||||||
hover:after:top-0 hover:after:right-0
|
after:transition-all hover:bg-transparent
|
||||||
after:bg-gradient-to-r after:from-purple-500 after:to-pink-500
|
hover:text-white hover:after:right-0 hover:after:top-0
|
||||||
focus:after:top-0 focus:after:right-0
|
focus:bg-transparent focus:text-white
|
||||||
focus:bg-transparent focus:text-white;
|
focus:after:right-0 focus:after:top-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clip-me-from-grass {
|
.clip-me-from-grass {
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-image: url('/static/grid.svg');
|
background-image: url("/static/grid.svg");
|
||||||
}
|
}
|
||||||
|
|
||||||
.radial-overlay {
|
.radial-overlay {
|
||||||
|
|
|
||||||
|
|
@ -1,218 +1,371 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" class="w-full h-full bg-zinc-900 text-white font-inter relative scroll-smooth">
|
<html
|
||||||
|
lang="en"
|
||||||
|
class="relative h-full w-full scroll-smooth bg-zinc-900 font-inter text-white"
|
||||||
|
>
|
||||||
|
<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="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="/static/apple-touch-icon.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/static/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/static/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="/static/site.webmanifest" />
|
||||||
|
<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/htmx.org@1.9.6"
|
||||||
|
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||||
|
<title>Juan Wu | Portfolio</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
<head>
|
<body class="h-full w-full">
|
||||||
<meta charset="UTF-8" />
|
<div class="polka-pattern fixed inset-0 -z-10" aria-hidden="true"></div>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<header class="border-b border-white/10 bg-zinc-900 px-8 lg:px-16">
|
||||||
<meta name="description" content="Juan Wu software developer portfolio site" />
|
<div class="flex py-6 font-medium">
|
||||||
<meta name="author" content="Juan Wu" />
|
<div>
|
||||||
<meta name="keywords" content="software developer, fullstack developer, portfolio" />
|
<span class="text-white"> JUAN WU </span>
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
|
<div
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
|
class="group relative text-sm text-teal-400 hover:line-through"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
|
>
|
||||||
<link rel="manifest" href="/static/site.webmanifest" />
|
SOFTWARE DEVELOPER
|
||||||
<link rel="stylesheet" href="/static/styles.css" />
|
<span
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
aria-hidden="true"
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
class="absolute left-0 top-full hidden text-red-500 group-hover:inline"
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
>CHROOT</span
|
||||||
<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>
|
|
||||||
<title>Juan Wu | Portfolio</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="w-full h-full">
|
|
||||||
<div class="polka-pattern fixed inset-0 -z-10" aria-hidden="true"></div>
|
|
||||||
<header class="px-8 lg:px-16 bg-zinc-900 border-b border-white/10">
|
|
||||||
<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 aria-hidden="true"
|
|
||||||
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 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
|
|
||||||
</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 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
|
|
||||||
</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 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>
|
|
||||||
</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 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>
|
|
||||||
</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 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>
|
|
||||||
</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>
|
||||||
<div class="h-8" aria-hidden="true"></div>
|
</div>
|
||||||
<ul class="uppercase flex flex-col gap-2 divide-y divide-white/10">
|
<nav class="ml-auto hidden items-center lg:flex">
|
||||||
|
<ul
|
||||||
|
class="flex items-center justify-center gap-4 uppercase text-white"
|
||||||
|
>
|
||||||
<li>
|
<li>
|
||||||
<a href="#projects" class="p-6 pl-0 w-full block"
|
<a
|
||||||
_="on click add .translate-x-full to mobileNav">Projects</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>
|
||||||
<li>
|
<li>
|
||||||
<a href="#aboutme" class="p-6 pl-0 w-full block"
|
<a
|
||||||
_="on click add .translate-x-full to mobileNav">About Me</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>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://github.com/juancwu" class="p-6 pl-0 w-full block">GitHub</a>
|
<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>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://linkedin.com/in/juancwu" class="p-6 pl-0 w-full block">LinkedIn</a>
|
<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>
|
||||||
<li>
|
<li>
|
||||||
<a href="https://linkedin.com/in/juancwu" class="p-6 pl-0 w-full block">RESUME</a>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
<div class="ml-auto block lg:hidden">
|
||||||
</div>
|
<button
|
||||||
</header>
|
aria-label="Open mobile navigation menu"
|
||||||
<main class="px-16 py-24 relative h-[calc(100%_-_92px)]">
|
_="on click remove .translate-x-full from #mobileNav"
|
||||||
<div class="grid-pattern absolute inset-0" aria-hidden="true"></div>
|
>
|
||||||
<div class="radial-overlay absolute inset-0" aria-hidden="true"></div>
|
<svg
|
||||||
<section id="hero" aria-label="Hero Section" class="h-full w-full flex items-center justify-center">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<div class="flex items-center justify-center gap-16">
|
fill="none"
|
||||||
<div class="text-white space-y-4 relative z-10">
|
viewBox="0 0 24 24"
|
||||||
<p class="text-md lg:text-xl text-zinc-300">
|
stroke-width="1.5"
|
||||||
Hello there <span aria-hidden="true">👋</span>,
|
stroke="currentColor"
|
||||||
</p>
|
aria-hidden="true"
|
||||||
<p class="text-5xl md:text-7xl lg:text-9xl max-[1150px]:text-7xl text-zinc-100 font-bold">
|
class="h-6 w-6"
|
||||||
I am Juan
|
>
|
||||||
</p>
|
<path
|
||||||
<p class="text-2xl md:text-3xl lg:text-4xl text-zinc-300">
|
stroke-linecap="round"
|
||||||
I am a Software Developer during the day
|
stroke-linejoin="round"
|
||||||
</p>
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||||
<p class="text-2xl md:text-3xl lg:text-4xl text-zinc-300">
|
/>
|
||||||
<span aria-label="and">&</span>
|
</svg>
|
||||||
work at
|
</button>
|
||||||
<a href="https://lauriercs.ca"
|
<nav
|
||||||
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>
|
id="mobileNav"
|
||||||
and
|
class="fixed bottom-0 left-0 right-0 top-0 z-50 translate-x-full bg-zinc-800 px-8 transition-transform"
|
||||||
<a href="https://hawkhacks.ca"
|
>
|
||||||
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
|
<div class="h-8" aria-hidden="true"></div>
|
||||||
Hacks</a>
|
<div class="flex items-center justify-end">
|
||||||
at night
|
<button
|
||||||
</p>
|
aria-label="Close mobile navigation menu"
|
||||||
<p class="text-xs">(send help, I have been enslaved)</p>
|
_="on click add .translate-x-full to mobileNav"
|
||||||
<div class="h-4" aria-hidden="true"></div>
|
>
|
||||||
<p class="text-4xl lg:text-5xl font-medium md:inline-block">
|
<svg
|
||||||
Check out my
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</p>
|
fill="none"
|
||||||
<a href="#projects"
|
viewBox="0 0 24 24"
|
||||||
class="colourful-card focus:outline-offset-2 lg:mt-4 md:ml-2 inline-block text-4xl lg:text-5xl font-semibold">
|
stroke-width="1.5"
|
||||||
PROJECTS
|
aria-hidden="true"
|
||||||
</a>
|
class="h-6 w-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="flex flex-col gap-2 divide-y divide-white/10 uppercase"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#projects"
|
||||||
|
class="block w-full p-6 pl-0"
|
||||||
|
_="on click add .translate-x-full to mobileNav"
|
||||||
|
>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>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://github.com/juancwu"
|
||||||
|
class="block w-full p-6 pl-0"
|
||||||
|
>GitHub</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/in/juancwu"
|
||||||
|
class="block w-full p-6 pl-0"
|
||||||
|
>LinkedIn</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/in/juancwu"
|
||||||
|
class="block w-full p-6 pl-0"
|
||||||
|
>RESUME</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="clip-me-from-grass drop-shadow-lg retina:w-96 retina:h-auto hidden md:block absolute top-2 right-0 opacity-30 lg:opacity-100 lg:relative p-2 bg-gray-200 md:max-w-lg">
|
</header>
|
||||||
<img class="w-full h-full clip-me-from-grass z-0" src="/static/touching-grass-pic.jpg"
|
<main class="relative h-[calc(100%_-_92px)] px-16 py-24">
|
||||||
alt="Juan's portrait photo of him touching grass (figuratively)" />
|
<div class="grid-pattern absolute inset-0" aria-hidden="true"></div>
|
||||||
<p></p>
|
<div
|
||||||
|
class="radial-overlay absolute inset-0"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
<section
|
||||||
|
id="hero"
|
||||||
|
aria-label="Hero Section"
|
||||||
|
class="flex h-full w-full items-center justify-center"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-center gap-16">
|
||||||
|
<div class="relative z-10 space-y-4 text-white">
|
||||||
|
<p class="text-md text-zinc-300 lg:text-xl">
|
||||||
|
Hello there <span aria-hidden="true">👋</span>,
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="text-5xl font-bold text-zinc-100 md:text-7xl lg:text-9xl"
|
||||||
|
>
|
||||||
|
I am Juan
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="text-2xl text-zinc-300 md:text-3xl lg:text-4xl"
|
||||||
|
>
|
||||||
|
I am a Software Developer during the day
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="text-2xl text-zinc-300 md:text-3xl lg:text-4xl"
|
||||||
|
>
|
||||||
|
<span aria-label="and">&</span>
|
||||||
|
work at
|
||||||
|
<a
|
||||||
|
href="https://lauriercs.ca"
|
||||||
|
class="relative z-0 whitespace-nowrap font-medium underline decoration-sky-400 transition-all 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"
|
||||||
|
>LCS</a
|
||||||
|
>
|
||||||
|
and
|
||||||
|
<a
|
||||||
|
href="https://hawkhacks.ca"
|
||||||
|
class="relative z-0 whitespace-nowrap font-medium underline decoration-sky-400 transition-all after:absolute after:left-0 after:top-0 after:-z-10 after:h-0 after:w-full after:bg-sky-500 after:transition-all hover:text-white hover:decoration-sky-500 hover:after:h-full focus:text-white focus:decoration-sky-500 focus:after:h-full"
|
||||||
|
>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 font-medium md:inline-block lg:text-5xl"
|
||||||
|
>
|
||||||
|
Check out my
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="#projects"
|
||||||
|
class="colourful-card inline-block text-4xl font-semibold focus:outline-offset-2 md:ml-2 lg:mt-4 lg:text-5xl"
|
||||||
|
>
|
||||||
|
PROJECTS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="clip-me-from-grass absolute right-0 top-2 hidden bg-gray-200 p-2 opacity-30 drop-shadow-lg md:block md:max-w-lg lg:relative lg:opacity-100 retina:h-auto retina:w-96"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="clip-me-from-grass z-0 h-full w-full"
|
||||||
|
src="/static/touching-grass-pic.jpg"
|
||||||
|
alt="Juan's portrait photo of him touching grass (figuratively)"
|
||||||
|
/>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<section
|
||||||
|
id="projects"
|
||||||
|
aria-label="Juan's Projects"
|
||||||
|
class="relative px-8"
|
||||||
|
>
|
||||||
|
<div class="relative flex items-center justify-center pt-8">
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
class="flex flex-col gap-2 p-8 text-5xl font-bold uppercase"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="relative text-2xl font-medium text-zinc-300"
|
||||||
|
>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-purple-500 before:to-pink-500 before:opacity-60 before:transition-all hover:before:scale-100"
|
||||||
|
>
|
||||||
|
<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 text-sky-400 underline"
|
||||||
|
>
|
||||||
|
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="relative flex items-center justify-center pt-8">
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
class="flex flex-col gap-2 p-8 text-5xl font-bold uppercase"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="relative text-2xl font-medium text-zinc-300"
|
||||||
|
>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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
<div class="h-64" aria-hidden="true"></div>
|
||||||
<section id="projects" aria-label="Juan's Projects" class="px-8 relative">
|
<footer
|
||||||
<div class="flex items-center justify-center pt-8 relative">
|
class="relative z-0 border-t border-white/25 px-16 py-12 after:absolute after:inset-0 after:-z-10 after:bg-gradient-to-r after:from-purple-400 after:to-blue-900 after:opacity-10"
|
||||||
<div>
|
>
|
||||||
<h1 class="text-5xl uppercase flex flex-col gap-2 font-bold p-8">
|
<div class="flex flex-col items-start justify-center gap-2">
|
||||||
<span class="text-zinc-300 font-medium text-2xl relative">Welcome to</span>
|
<p>Made With Luv</p>
|
||||||
<span
|
<p>Juan</p>
|
||||||
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>
|
</footer>
|
||||||
<div class="flex items-center justify-end">
|
</body>
|
||||||
<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">Welcome 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 relative z-0 border-t border-white/25 after:absolute after:inset-0 after:-z-10 after:opacity-10 after:bg-gradient-to-r after:from-purple-400 after:to-blue-900">
|
|
||||||
<div class="flex flex-col gap-2 items-start justify-center">
|
|
||||||
<p>Made With Luv</p>
|
|
||||||
<p>Juan</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue