youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 09:23:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add about me page and update some styles

Browse source
This commit is contained in:
Youwen Wu 2024-06-28 21:35:35 -07:00
parent 97232d23dc
commit a498649024
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
6 changed files with 2943 additions and 2107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4853
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

7
src/lib/app.css
View file

@ -109,6 +109,11 @@
var(--dot-color);
}
.link {
@apply text-blue-500 dark:text-blue-600 hover:text-blue-600 dark:hover:text-blue-500 hover:underline visited:text-purple-500 dark:visited:text-purple-600;
@apply relative inline-block hover:text-violet-700 dark:hover:text-violet-600;
}
.link::after {
content: '';
@apply absolute w-full left-0 h-0.5 bottom-0.5 bg-violet-800 dark:bg-violet-500;
}
}

4
src/lib/components/Socials.svelte
View file

@ -19,7 +19,7 @@
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://github.com/couscousdude"
href="https://github.com/youwen5"
>
<GithubLogo />
</Button>
@ -27,7 +27,7 @@
class="hover:scale-110 transition-transform"
variant="ghost"
size="icon"
href="https://www.instagram.com/uncle_uwon/"><InstagramLogo /></Button
href="https://www.instagram.com/youwenw5/"><InstagramLogo /></Button
>
<Button
class="hover:scale-110 transition-transform"

19
src/routes/+page.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Socials from '$lib/components/Socials.svelte'
import Button from '$lib/components/ui/button/button.svelte'
import * as Card from '$lib/components/ui/card'
import { ArrowRight, GithubLogo } from 'svelte-radix'
@ -31,18 +30,17 @@
</Typewriter>
<br />
<Typewriter>
<p>Building efficient <b>free and open source</b> software.</p>
<p>Building <b>free and open source</b> software.</p>
</Typewriter>
</div>
<div class="flex flex-wrap gap-4 justify-center my-8">
<Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">More About Me</Button
>
<Button href="/about" size="lg" class="text-xl flex-grow sm:flex-grow-0">About Me</Button>
<Button
href="https://github.com/couscousdude"
target="_blank"
variant="outline"
size="lg"
class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />My GitHub</Button
class="text-xl flex-grow sm:flex-grow-0"><GithubLogo class="mr-2" />GitHub</Button
>
</div>
<div class="grid grid-cols-2 gap-4">
@ -102,15 +100,12 @@
</Card.Root>
<Card.Root class="col-span-2">
<Card.Header>
<Card.Title>Contact Me</Card.Title>
<Card.Title>What's new?</Card.Title>
</Card.Header>
<Card.Content>
<h3>Find me on:</h3>
<Socials />
<p class="mt-4">
I read message requests everywhere but do not accept Discord friend requests if I don't
know you. The best way to reach me and receive a response is probably by email.
</p>
This section will contain a feed of new projects, blog posts, and other stuff that I've
deemed "ready to display". For now, it has this text, because I'm too lazy to actually
implement this feature right now.
</Card.Content>
</Card.Root>
</div>

130
src/routes/about/+page.svelte
View file

@ -1,9 +1,133 @@
<script>
import UnderConstruction from '$lib/components/UnderConstruction.svelte'
<script lang="ts">
import * as Card from '$lib/components/ui/card'
import Socials from '$lib/components/Socials.svelte'
</script>
<svelte:head>
<title>About | Youwen Wu</title>
</svelte:head>
<UnderConstruction />
<main class="dots-background">
<div class="container max-w-3xl mx-auto py-14 px-0 sm:px-8 justify-center">
<Card.Root class="sm:px-6 px-0">
<Card.Header class="inline-flex items-center">
<Card.Title class="text-4xl">about.</Card.Title>
<div class="w-full px-4 h-1.5 rounded-lg bg-muted-foreground" />
</Card.Header>
<Card.Content class="gap-8">
<div class="space-y-4">
<p class="text-2xl font-semibold">
Hi. I'm Youwen. I like to write - {'{code | essays | math}'}.
</p>
<p class="text-xl leading-relaxed">
I put most worthwhile things I do on my <a
href="https://github.com/youwen5"
class="link">GitHub</a
>. I write over at a blog called
<a class="link" href="https://blog.youwen.dev">Gradient Ascent</a>. You can check out my
<a class="link" href="/portfolio">portfolio</a>
right here on this site. You can skip down to my
<a class="link" href="#contact">contact info</a>, or keep reading.
</p>
<h2 class="text-3xl font-semibold tracking-tight">
coding.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h2>
<p class="text-lg leading-relaxed">
I learned how to code when I was in 3rd grade (around 8-9 years old). Regrettably, I am
not a gifted genius and did not build a massive open source empire nor did I found a
startup before the age of 12. My projects consisted principally of crummy games or
terrible websites. I only really figured out the fundamentals in 2019 and started
working on actual projects at the tail end of 2023 (as you can tell from my GitHub
activity history). My biggest regret is spending the pandemic lockdown learning React
and web development in 2020 instead of becoming a cool kernel hacker or something.
</p>
<img
src="https://github.com/youwen5/youwen5/raw/main/profile-3d-contrib/profile-night-view.svg"
alt="github activity graph"
class="rounded-lg dark:block hidden"
/>
<img
src="https://github.com/youwen5/youwen5/raw/main/profile-3d-contrib/profile-green-animate.svg"
alt="github activity graph"
class="rounded-lg dark:hidden"
/>
<h2 class="text-3xl font-semibold tracking-tight">
hacking.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h2>
<p class="text-lg leading-relaxed">
Most people I know in real life think that I am some kind of hacker - likely because
they once saw me open up a text terminal and update my packages with <code>pacman</code
>. I proclaim myself a hacker because I once learned how to create shoddy CRUD web
applications with fad web technologies and believe that places me in the same group as
Torvalds and the other hackers who build actual software.
</p>
<img
class="w-[350px] rounded-lg"
src="https://media.tenor.com/XUD0K8qLJYsAAAAe/how-linux-users-install-a-web-browser-linux.png"
alt="linux users installing a web browser"
/>
<p class="text-lg leading-relaxed">
I do consider myself a hacker under <a
href="https://stallman.org/articles/on-hacking.html"
class="link">this definition</a
> of hacking, though.
</p>
<h2 class="text-3xl font-semibold tracking-tight">
math.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h2>
<p class="text-lg leading-relaxed">
I learn about math I find interesting as a hobby. I also happen to be pursuing it an
undergraduate degree in it, soon.
</p>
<p class="text-lg leading-relaxed">
I tried doing math competitions in middle and early high school before I realized that
it wasn't for me (that's my way of saying that I couldn't hope to compete with the
prodigies). Still, I wholly recommend that anyone who likes math take a look at <a
href="https://artofproblemsolving.com/"
class="link">The Art of Problem Solving</a
> before stepping into calculus and beyond, as mathematical intuition and insight is magnitudes
more valuable than a shallow familiarity with formulas or integration methods.
</p>
<h2 class="text-3xl font-semibold tracking-tight">
other stuff.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h2>
<p class="text-lg leading-relaxed">
Let's see. I play guitar, although I haven't had much time lately. I play video games
sometimes, <a href="https://steamcommunity.com/id/couscousdude/" class="link"
>here's my Steam profile</a
>.
</p>
<p class="text-lg leading-relaxed">
If for whatever reason you're interested in the tools I use on my computer, I have a <a
class="link"
href="/about/computing">brief page about it</a
>. I'm legally obligated to notify you that I run Arch Linux with a tiling window
manager and Neovim.
</p>
<p class="text-lg leading-relaxed">
This site contains a <a class="link" href="/colophon">colophon</a>, for those interested
in its inner workings.
</p>
<h2 class="text-3xl font-semibold tracking-tight" id="contact">
contact me.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h2>
<p class="text-lg leading-relaxed">Find me on:</p>
<Socials />
<p class="text-lg leading-relaxed mt-4">
I read message requests everywhere but do not accept Discord friend requests if I don't
know you. The best way to reach me and receive a response is probably by email.
</p>
<p class="text-lg leading-relaxed">
If you notice any issues with or have any suggestions about this site or any of my
projects, feel free to send me an email or message about it.
</p>
</div></Card.Content
>
</Card.Root>
</div>
</main>

37
src/routes/colophon/+page.svelte Normal file
View file

@ -0,0 +1,37 @@
<main class="container mx-auto max-w-3xl my-20">
<div class="px-2">
<h1 class="text-4xl font-semibold tracking-tight">
colophon.
<div class="w-24 h-1.5 rounded-lg bg-muted-foreground mt-1" />
</h1>
<div class="space-y-4 mt-8">
<p class="leading-loose text-lg">
This site is built with the <a href="https://kit.svelte.dev/" class="link">SvelteKit</a>
full stack framework, itself a meta-framework of the
<a class="link" href="https://svelte.dev/">Svelte</a> web framework. The body font is
<a href="https://vercel.com/font" class="link">Vercel's Geist Sans</a>
and <a href="https://fonts.google.com/specimen/Merriweather" class="link">Merriweather</a> in
select parts.
</p>
<p class="leading-loose text-lg">
My <a class="link" href="https://blog.youwen.dev">blog</a> is generated by a static site
generator library called <a href="https://jaspervdj.be/hakyll/" class="link">Hakyll</a>,
which is configured with the Haskell programming language (you could consider it a Haskell
eDSL for configuring static sites). The web portions are raw HTML created by hand. I
leverage the Haskell library
<a class="link" href="https://pandoc.org/">Pandoc</a> to convert Markdown files into HTML
for each blog post. It gets perfect 100s across the board on Google's lighthouse test. The
serif font is
<a href="https://fonts.google.com/specimen/Merriweather" class="link">Merriweather</a>
and the sans-serif font is
<a href="https://fonts.google.com/specimen/Open+Sans" class="link">Open Sans</a>.
</p>
<p class="leading-loose text-lg">
The CSS on both sites is done with <a class="link" href="https://tailwindcss.com/"
>TailwindCSS</a
>. Tailwind is a terrible, ugly way to do CSS; however, every other method of doing CSS is
arguably worse.
</p>
</div>
</div>
</main>