thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add round portrait to homepage
All checks were successful
Deploy Blog / deploy (push) Successful in 1m22s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-08-05 17:39:21 +01:00
parent 70a8cb8f9f
commit f6bf938d0e
3 changed files with 41 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/images/round-portrait.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB

79
src/pages/home.tsx
View file

@ -1,59 +1,52 @@
import MainTemplate from "@/templates/MainTemplate" import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing" import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
import roundedPortrait from "../images/round-portrait.png"
import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card" import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Link } from "react-router" import { Link } from "react-router"
const HomePage = () => { const HomePage = () => {
const { posts } = usePosts() const { posts } = usePosts()
return ( return (
<MainTemplate> <MainTemplate>
<div className="mb-7 border border-foreground py-7 px-6 dark:bg-sidebar"> <div className="mb-7 border border-foreground py-8 px-8 dark:bg-sidebar">
<h1 className="scroll-m-20 text-left text-2xl font-semibold"> <div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
Another software engineer with a blog {/* Image - centers on mobile, left-aligned on desktop */}
</h1> <div className="flex-shrink-0">
<p className="leading-[1.7] [&:not(:first-child)]:mt-5"> <img
I'm a self-taught software engineer currently working at ITV, src={roundedPortrait}
previously at the BBC. This blog is a technical scrapbook and digital alt="Profile picture"
garden. className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain"
</p> />
</div> </div>
{/*
<Card className="mb-8 rounded-none">
<CardHeader>
<h1 className="scroll-m-20 text-left text-2xl font-semibold">
Another software engineer with a blog!
</h1>
</CardHeader>
<CardContent>
<p className="leading-[1.7] [&:not(:first-child)]:mt-7">
I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and
digital garden.
</p>
</CardContent>
<CardFooter>
<Button asChild>
<Link to="/about">About</Link>
</Button>
</CardFooter>
</Card>
<Button asChild>
<Link to="/about">About</Link>
</Button>
{/* Text content */}
<div className="text-center md:text-left flex-1">
<h1 className="scroll-m-20 text-2xl font-semibold">
Another software engineer with a blog
</h1>
<p className="leading-[1.7] mt-5">
I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and
digital garden.
</p>
</div>
</div>
</div>
{/*
*/} */}
<PostListing <PostListing
title="Recent posts" title="Recent posts"
posts={posts.slice(0, 5)} posts={posts.slice(0, 5)}
showAllButton showAllButton
/> />
</MainTemplate> </MainTemplate>
) )
} }
export { HomePage } export { HomePage }

5
src/styles/shadcn-overrides.css
View file

@ -43,3 +43,8 @@ img {
max-width: 600px; max-width: 600px;
min-width: 300px; min-width: 300px;
} }
img.rounded-image {
max-width: auto;
min-width: auto;
}