forked from Mike/freno-dev
142 lines
5.0 KiB
TypeScript
142 lines
5.0 KiB
TypeScript
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>{" "}
|
|
</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>
|
|
|
|
{/* 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="flex flex-col items-end gap-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>
|
|
);
|
|
}
|