199 lines
8.1 KiB
TypeScript
199 lines
8.1 KiB
TypeScript
import { Title, Meta } from "@solidjs/meta";
|
|
import { DarkModeToggle } from "~/components/DarkModeToggle";
|
|
import { Typewriter } from "~/components/Typewriter";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Title>Home | Michael Freno</Title>
|
|
<Meta
|
|
name="description"
|
|
content="Michael Freno - Software Engineer based in Brooklyn, NY"
|
|
/>
|
|
|
|
<main class="flex h-full flex-col gap-8 px-4 py-16 text-xl">
|
|
<div class="flex-1">
|
|
<Typewriter speed={30} keepAlive={2000} delay={500}>
|
|
<div class="text-4xl">Hey!</div>
|
|
</Typewriter>
|
|
<Typewriter speed={80} keepAlive={2000} delay={500}>
|
|
<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} delay={500}>
|
|
I'm a passionate developer tooling, game, and open source software
|
|
developer.
|
|
</Typewriter>
|
|
<Typewriter speed={100} keepAlive={2000} delay={500}>
|
|
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} delay={500}>
|
|
You can see some of my work{" "}
|
|
<a
|
|
href="https://github.com/mikefreno"
|
|
class="text-blue hover-underline-animation"
|
|
>
|
|
here (github).
|
|
</a>
|
|
</Typewriter>
|
|
<Typewriter speed={100} keepAlive={2000} delay={500}>
|
|
If you want to get in touch, check to side bar for various links.
|
|
</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-2 xl:flex-row xl:items-start xl:justify-center">
|
|
{/* FlexLöve */}
|
|
<div class="border-surface0 flex w-full flex-col 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 mx-auto w-fit"
|
|
>
|
|
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 class="pt-2 text-left text-sm">
|
|
Built for developers who know CSS and want that same power
|
|
(and more) in their game UIs. FlexLöve brings CSS-familiar
|
|
flexbox and grid layouts to Löve2D, supporting both rapid
|
|
prototyping (immediate mode) and production-optimized
|
|
(retained mode) rendering. Whether you're sketching ideas or
|
|
shipping products, FlexLöve adapts to your
|
|
workflow—essentially no learning curve required if you've
|
|
touched CSS.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Life and Lineage */}
|
|
<div class="border-surface0 flex w-full flex-col gap-2 rounded-md border-2 p-4 text-center">
|
|
<div>My mobile game:</div>
|
|
<a
|
|
class="text-blue hover-underline-animation mx-auto w-fit"
|
|
href="https://apps.apple.com/us/app/life-and-lineage/id6737252442"
|
|
>
|
|
Life and Lineage
|
|
</a>
|
|
<div class="flex flex-col gap-4 sm:grid sm:grid-cols-3">
|
|
<div class="aspect-auto w-full overflow-hidden rounded-lg sm:col-span-1">
|
|
<video
|
|
src="/lineage-preview.mp4"
|
|
class="h-full w-full object-cover"
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
/>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 sm:col-span-2 sm:grid-cols-2">
|
|
<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">
|
|
<img
|
|
src="/lineage-shops.png"
|
|
alt="Life and Lineage Shops"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-2 text-left text-sm">
|
|
Started as a basic project to learn react-native, it grew over
|
|
time into a full-fledged mobile game. It's a turn-based
|
|
dungeon crawler with a family lineage twist - each time you
|
|
die (which happens a lot) you can continue on through your
|
|
children (if you have any) - otherwise you start from square
|
|
one.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<Typewriter
|
|
speed={120}
|
|
class="mx-auto max-w-3/4 pt-8 md:max-w-1/2"
|
|
delay={500}
|
|
>
|
|
And if you love the color schemes of this site
|
|
<div class="mx-auto w-fit">
|
|
<DarkModeToggle />
|
|
</div>
|
|
(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™.
|
|
</Typewriter>
|
|
<div class="flex flex-col items-end justify-center gap-4 pr-4">
|
|
<Typewriter speed={30} keepAlive={false} delay={500}>
|
|
<div>
|
|
My Collection of
|
|
<br />
|
|
By-the-ways:
|
|
</div>
|
|
</Typewriter>
|
|
<Typewriter speed={30} keepAlive={false} delay={500}>
|
|
<ul class="list-disc">
|
|
<li>I use Neovim</li>
|
|
<li>I use Arch Linux</li>
|
|
<li>I use Rust</li>
|
|
</ul>
|
|
</Typewriter>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|