metadata and titles

This commit is contained in:
Michael Freno
2025-12-19 17:05:24 -05:00
parent 69c95c3060
commit e24e53f8d7
19 changed files with 1936 additions and 1750 deletions

View File

@@ -1,155 +1,164 @@
import { Title, Meta } from "@solidjs/meta";
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
import { Typewriter } from "~/components/Typewriter";
export default function Home() {
return (
<main class="flex h-full flex-col gap-8 p-4 text-xl">
<div class="flex-1">
<Typewriter speed={30} keepAlive={2000}>
<div class="text-4xl">Hey!</div>
</Typewriter>
<Typewriter speed={80} keepAlive={2000}>
<div>
My name is <span class="text-green">Mike Freno</span>, I'm a{" "}
<span class="text-blue">Software Engineer</span> based in{" "}
<span class="text-yellow">Brooklyn, NY.</span>
</div>
</Typewriter>
<Typewriter speed={100} keepAlive={2000}>
I'm a passionate dev tooling, game, and open source software
developer. Recently been working in the world of{" "}
<a
href="https://www.love2d.org"
class="text-blue hover-underline-animation"
>
LÖVE
</a>{" "}
(an open source game engine for Lua).
</Typewriter>
<Typewriter speed={100} keepAlive={2000}>
You can see some of my work{" "}
<a
href="https://github.com/mikefreno"
class="text-blue hover-underline-animation"
>
here (github).
</a>
</Typewriter>
<div class="pt-8 text-center">
<div class="pb-4">Some of my recent projects:</div>
<div class="flex flex-col items-center gap-6 2xl:flex-row 2xl:items-start 2xl:justify-center">
{/* Life and Lineage */}
<div class="border-surface0 flex w-full max-w-2xl flex-col gap-2 rounded-md border-2 p-4 text-center">
<div>My mobile game:</div>
<a
class="text-blue hover-underline-animation"
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
>
Life and Lineage
</a>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<img
src="/lineage-home.png"
alt="Life and Lineage Home"
class="h-full w-full object-cover"
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/lineage-preview.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<img
src="/lineage-shops.png"
alt="Life and Lineage Shops"
class="h-full w-full object-cover"
/>
<>
<Title>Home | Michael Freno</Title>
<Meta
name="description"
content="Michael Freno - Software Engineer based in Brooklyn, NY. Passionate about dev tooling, game development, and open source software."
/>
<main class="flex h-full flex-col gap-8 p-4 text-xl">
<div class="flex-1">
<Typewriter speed={30} keepAlive={2000}>
<div class="text-4xl">Hey!</div>
</Typewriter>
<Typewriter speed={80} keepAlive={2000}>
<div>
My name is <span class="text-green">Mike Freno</span>, I'm a{" "}
<span class="text-blue">Software Engineer</span> based in{" "}
<span class="text-yellow">Brooklyn, NY.</span>
</div>
</Typewriter>
<Typewriter speed={100} keepAlive={2000}>
I'm a passionate dev tooling, game, and open source software
developer. Recently been working in the world of{" "}
<a
href="https://www.love2d.org"
class="text-blue hover-underline-animation"
>
LÖVE
</a>{" "}
(an open source game engine for Lua).
</Typewriter>
<Typewriter speed={100} keepAlive={2000}>
You can see some of my work{" "}
<a
href="https://github.com/mikefreno"
class="text-blue hover-underline-animation"
>
here (github).
</a>
</Typewriter>
<div class="pt-8 text-center">
<div class="pb-4">Some of my recent projects:</div>
<div class="flex flex-col items-center gap-6 2xl:flex-row 2xl:items-start 2xl:justify-center">
{/* Life and Lineage */}
<div class="border-surface0 flex w-full max-w-2xl flex-col gap-2 rounded-md border-2 p-4 text-center">
<div>My mobile game:</div>
<a
class="text-blue hover-underline-animation"
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
>
Life and Lineage
</a>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<img
src="/lineage-home.png"
alt="Life and Lineage Home"
class="h-full w-full object-cover"
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/lineage-preview.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<img
src="/lineage-shops.png"
alt="Life and Lineage Shops"
class="h-full w-full object-cover"
/>
</div>
</div>
</div>
</div>
{/* FlexLöve */}
<div class="border-surface0 flex w-full max-w-md flex-col gap-2 rounded-md border-2 p-4 text-center">
<div>My LÖVE UI library</div>
<a
href="https://github.com/mikefreno/flexlove"
class="text-blue hover-underline-animation"
>
FlexLöve
</a>
<div class="flex flex-col gap-4">
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-scrollable.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-input.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-slider.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
{/* FlexLöve */}
<div class="border-surface0 flex w-full max-w-md flex-col gap-2 rounded-md border-2 p-4 text-center">
<div>My LÖVE UI library</div>
<a
href="https://github.com/mikefreno/flexlove"
class="text-blue hover-underline-animation"
>
FlexLöve
</a>
<div class="flex flex-col gap-4">
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-scrollable.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-input.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
<div class="aspect-auto w-full overflow-hidden rounded-lg">
<video
src="/flexlove-slider.mp4"
class="h-full w-full object-cover"
autoplay
loop
muted
playsinline
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-3/4 pt-8 md:max-w-1/2">
And if you love the color schemes of this site (which of course you
do), you can see{" "}
<a
href="https://github.com/mikefreno/dots/blob/master/mac/nvim/lua/colors.lua"
class="text-blue hover-underline-animation"
>
here
</a>{" "}
- and also see the rest of my various dot files idk. There's a macos
and arch linux rice in there if you're into that kinda thing and a
home server setup too. Which I will write about soon.
</div>
</div>
<div class="flex flex-col items-end gap-4 pr-4">
<Typewriter speed={50} keepAlive={false}>
<div>
My Collection of
<br />
By-the-ways:
<div class="max-w-3/4 pt-8 md:max-w-1/2">
And if you love the color schemes of this site (which of course you
do), you can see{" "}
<a
href="https://github.com/mikefreno/dots/blob/master/mac/nvim/lua/colors.lua"
class="text-blue hover-underline-animation"
>
here
</a>{" "}
- and also see the rest of my various dot files idk. There's a macos
and arch linux rice in there if you're into that kinda thing and a
home server setup too. Which I will write about soon.
</div>
</Typewriter>
<Typewriter speed={50} keepAlive={false}>
<ul class="list-disc">
<li>I use Neovim</li>
<li>I use Arch Linux</li>
<li>I use Rust</li>
</ul>
</Typewriter>
</div>
</main>
</div>
<div class="flex flex-col items-end gap-4 pr-4">
<Typewriter speed={50} keepAlive={false}>
<div>
My Collection of
<br />
By-the-ways:
</div>
</Typewriter>
<Typewriter speed={50} keepAlive={false}>
<ul class="list-disc">
<li>I use Neovim</li>
<li>I use Arch Linux</li>
<li>I use Rust</li>
</ul>
</Typewriter>
</div>
</main>
</>
);
}