From 407b87998202ce00cd80fc6b27897f5af0d91049 Mon Sep 17 00:00:00 2001
From: Liam Pattinson <liampattinson@gmail.com>
Date: Fri, 5 Dec 2025 18:42:49 +0000
Subject: [PATCH 1/2] Improve home page

---
 README.md          |   3 ++
 src/pages/Home.jsx | 129 ++++++++++++++++++++++++++++++++-------------
 2 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 8f66b24..f1fd34a 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,9 @@ My personal webpage, and a space I'm using to learn a little web-dev.
 This site uses [React](https://react.dev/) with assets from
 [Material UI](https://mui.com/material-ui/).
 
+I'm also using [WAVE](https://wave.webaim.org/) to ensure the website
+is designed with accessibility in mind.
+
 ## Usage
 
 I use [Yarn](https://yarnpkg.com/) to manage the project, but the steps below
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 384886c..266f8d6 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,13 +1,41 @@
 import './logos.css';
 
-import { Description as CV, GitHub } from '@mui/icons-material';
-import { Box, Button, IconButton, SvgIcon, Typography } from '@mui/material';
+import {
+  Description as CV,
+  GitHub,
+  ListAlt as Blog,
+} from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  IconButton,
+  SvgIcon,
+  Tooltip,
+  Typography,
+} from '@mui/material';
 import React from 'react';
 
 import muiLogo from '../assets/mui.svg';
 import reactLogo from '../assets/react.svg';
 import viteLogo from '../assets/vite.svg';
 
+function HomePageTitle() {
+  return (
+    <Box
+      sx={{
+        p: 2,
+        textAlign: 'center',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography variant="h1" sx={{ p: 3, fontWeight: 'light' }}>
+        liampattinson.github.io
+      </Typography>
+    </Box>
+  );
+}
+
 function HomePageTextBox({ children }) {
   // 'children' should be a string delmited by newlines.
   // Each line will be rendered as a separate Typography component
@@ -22,7 +50,12 @@ function HomePageTextBox({ children }) {
       }}
     >
       {children.split('\n').map((str, index) => (
-        <Typography key={index} variant="h4" sx={{ p: 3, fontWeight: 'light' }}>
+        <Typography
+          key={index}
+          variant="h4"
+          component="div"
+          sx={{ p: 3, fontWeight: 'light' }}
+        >
           {str}
         </Typography>
       ))}
@@ -73,48 +106,68 @@ export default function Home() {
   // work without the CSS file.
   return (
     <>
+      <HomePageTitle />
       <HomePageTextBox>
-        {'I made a website.\nKinda.\nThese things did most of the work:'}
+        {`Welcome to my personal website!\nI'm a research software engineer at the University of York.\nCheck out my GitHub profile, CV, and blog:`}
       </HomePageTextBox>
       <HomePageImages>
-        <IconButton href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo spin" alt="React logo" />
-        </IconButton>
-        <IconButton href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </IconButton>
-        <IconButton href="https://mui.com" target="_blank">
-          <img src={muiLogo} className="logo" alt="Material UI logo" />
-        </IconButton>
-      </HomePageImages>
-      <HomePageTextBox>{"Here's another cool thing I made:"}</HomePageTextBox>
-      <HomePageImages>
-        <Button
-          href="https://www.github.com/PlasmaFAIR/Fortitude"
-          target="_blank"
-        >
-          <img
-            src="https://opengraph.githubassets.com/%3Cany_hash_number%3E/PlasmaFAIR/Fortitude"
-            border="1px solid black"
-            style={{ maxHeight: '100%', maxWidth: '100%', flexShrink: 1 }}
-            alt="Fortitude repository (image may not render if too many requests are made)"
-          />
-        </Button>
+        <Tooltip title="GitHub">
+          <IconButton
+            href="https://github.com/LiamPattinson"
+            target="_blank"
+            aria-label="Link to GitHub profile"
+          >
+            <SvgIcon sx={{ width: '6em', height: '6em' }}>
+              <GitHub />
+            </SvgIcon>
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="CV">
+          <IconButton href="/#/cv" aria-label="Link to CV">
+            <SvgIcon sx={{ width: '6em', height: '6em' }}>
+              <CV />
+            </SvgIcon>
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Blog">
+          <IconButton href="/#/blog" aria-label="Link to blog">
+            <SvgIcon sx={{ width: '6em', height: '6em' }}>
+              <Blog />
+            </SvgIcon>
+          </IconButton>
+        </Tooltip>
       </HomePageImages>
       <HomePageTextBox>
-        {'Want to see more?\nCheck out my GitHub profile and CV:'}
+        {'Everything here was built using React, Vite, and Material UI:'}
       </HomePageTextBox>
       <HomePageImages>
-        <IconButton href="https://github.com/LiamPattinson" target="_blank">
-          <SvgIcon sx={{ width: '6em', height: '6em' }}>
-            <GitHub />
-          </SvgIcon>
-        </IconButton>
-        <IconButton href="/#/cv">
-          <SvgIcon sx={{ width: '6em', height: '6em' }}>
-            <CV />
-          </SvgIcon>
-        </IconButton>
+        <Tooltip title="React">
+          <IconButton
+            href="https://react.dev"
+            target="_blank"
+            aria-label="Link to React website"
+          >
+            <img src={reactLogo} className="logo spin" alt="React logo" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Vite">
+          <IconButton
+            href="https://vite.dev"
+            target="_blank"
+            aria-label="Link to Vite website"
+          >
+            <img src={viteLogo} className="logo" alt="Vite logo" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Material UI">
+          <IconButton
+            href="https://mui.com"
+            target="_blank"
+            aria-label="Link to Material UI website"
+          >
+            <img src={muiLogo} className="logo" alt="Material UI logo" />
+          </IconButton>
+        </Tooltip>
       </HomePageImages>
     </>
   );

From 42830ae898e3fd4eb5f7796f2f37678467417604 Mon Sep 17 00:00:00 2001
From: Liam Pattinson <liampattinson@gmail.com>
Date: Fri, 5 Dec 2025 18:48:03 +0000
Subject: [PATCH 2/2] Fix blog accessibility issues

---
 src/pages/Blog.jsx | 56 ++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/pages/Blog.jsx b/src/pages/Blog.jsx
index 1524d13..0215589 100644
--- a/src/pages/Blog.jsx
+++ b/src/pages/Blog.jsx
@@ -9,6 +9,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import Markdown from 'react-markdown';
@@ -40,7 +41,7 @@ function BlogEntry({ title, subtitle, published, children }) {
       sx={{
         p: 2,
         width: '100%',
-        textAlign: 'justify',
+        textAlign: 'left',
         display: 'flex',
         flexShrink: 1,
         flexDirection: 'column',
@@ -62,7 +63,7 @@ function BlogEntry({ title, subtitle, published, children }) {
           sx={{
             p: 2,
             width: '100%',
-            textAlign: 'justify',
+            textAlign: 'left',
             display: 'flex',
             flexShrink: 1,
             flexDirection: 'column',
@@ -146,7 +147,11 @@ function Blog() {
             <Heading centred>Blog</Heading>
           </Box>
           <Divider variant="middle" flexItem aria-hidden="true" />
-          <Typography variant="h6" sx={{ fontWeight: 'light', p: 4 }}>
+          <Typography
+            variant="h5"
+            component="div"
+            sx={{ fontWeight: 'light', p: 4 }}
+          >
             Welcome to my blog! Here I'll be jotting down whatever interests me
             at the time -- mainly programming, but maybe some other topics too.
           </Typography>
@@ -159,27 +164,30 @@ function Blog() {
           >
             <List>
               {articles.map((article, idx) => (
-                <ListItemButton
-                  key={idx}
-                  href={`#/blog/${article.stem}`}
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    textAlign: 'left',
-                    width: '100%',
-                  }}
-                >
-                  <ListItem sx={{ width: '100%' }}>
-                    <ListItemIcon>
-                      <DoubleArrow />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={article.markdown.data.title}
-                      secondary={article.markdown.data.subtitle}
-                    />
-                    {toDate(article.markdown.data.published)}
-                  </ListItem>
-                </ListItemButton>
+                <Tooltip title={article.markdown.data.title} key={idx}>
+                  <ListItemButton
+                    key={idx}
+                    href={`#/blog/${article.stem}`}
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      textAlign: 'left',
+                      width: '100%',
+                    }}
+                    aria-label={`Read blog post: ${article.markdown.data.title}`}
+                  >
+                    <ListItem sx={{ width: '100%' }}>
+                      <ListItemIcon>
+                        <DoubleArrow />
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={article.markdown.data.title}
+                        secondary={article.markdown.data.subtitle}
+                      />
+                      {toDate(article.markdown.data.published)}
+                    </ListItem>
+                  </ListItemButton>
+                </Tooltip>
               ))}
             </List>
           </Box>