75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import MainTemplate from "@/templates/MainTemplate"
|
|
import PostListing from "@/containers/PostListing"
|
|
import { usePosts } from "@/hooks/usePosts"
|
|
import gruvboxComputer from "../images/gruvbox-computer.svg"
|
|
import EolasListing from "@/components/EolasListing"
|
|
import CodeStats from "../containers/CodeStats"
|
|
// import TodayILearned from "@/containers/TodayILearned"
|
|
|
|
const HomePage = () => {
|
|
const { posts } = usePosts()
|
|
return (
|
|
<MainTemplate>
|
|
<div className="container mx-auto p-4 grow">
|
|
<div className="space-my-8">
|
|
<section className="space-y-4">
|
|
<div className="gap-6 flex flex-col items-center sm:flex-row">
|
|
<div className="scanlined">
|
|
<img src={gruvboxComputer} className="md:w-80 w-50" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-4xl font-bold py-3 text-center sm:text-left md:text-left">
|
|
<div className="scanlined inline-block py-1 px-2">
|
|
systems obscure
|
|
</div>
|
|
</h1>
|
|
<p className="text-center sm:text-left md:text-left text-muted condensed font-medium text-lg">
|
|
Software engineer at ITV, formerly BBC. This is my technical
|
|
scrapbook and digital garden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<PostListing title="recent posts" posts={posts.slice(0, 5)} />
|
|
|
|
<PostListing
|
|
title="highlights"
|
|
posts={posts.filter((post) => post.tags.includes("highlight"))}
|
|
/>
|
|
|
|
<div className="container mx-auto p-4 grow">
|
|
<div className="space-my-8">
|
|
<section className="container">
|
|
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined inline-block px-1">
|
|
projects
|
|
</h2>
|
|
<ul>
|
|
<li className="pb-2">
|
|
<a
|
|
className="underline underline-offset-4 text-[18px] text-primary hover:text-primary/80 font-medium"
|
|
href="https://eolas.systemsobscure.net"
|
|
target="_blank"
|
|
>
|
|
eolas
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<p className="">
|
|
A public frontend for my local Zettelkasten created with
|
|
NodeJS, Python and React.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<CodeStats />
|
|
<EolasListing />
|
|
</MainTemplate>
|
|
)
|
|
}
|
|
|
|
export { HomePage }
|