Personal website for Chris Parsons
chrisparsons.dev
feat: add profile image to home page
- Add profile image asset to src/images/
- Update index page to display the profile image next to the main heading
- Apply circular styling and layout adjustments using Astro's Image component
Chris Parsons
(Apr 26, 2026, 1:06 AM +0100)
d4bf9ff7
fc139d24
+24
-1
src/images/profile.png
src/images/profile.png
This is a binary file and will not be displayed.
+24
-1
src/pages/index.astro
+24
-1
src/pages/index.astro
···
1
1
---
2
2
import SiteLayout from "../layouts/SiteLayout.astro";
3
+
import { Image } from "astro:assets";
4
+
import profile from "../images/profile.png";
3
5
4
6
const title = "Home";
5
7
const startWork = new Date(2018, 7);
···
10
12
---
11
13
12
14
<SiteLayout title={title}>
13
-
<h1>Chris Parsons</h1>
15
+
<div
16
+
style={{
17
+
display: "flex",
18
+
flexDirection: "row",
19
+
alignItems: "center",
20
+
gap: "1rem",
21
+
}}
22
+
>
23
+
<Image
24
+
src={profile}
25
+
alt="Chris Parsons"
26
+
style={{
27
+
//want to make the image circular
28
+
borderRadius: "50%",
29
+
// want the image to have a width of 3 rem, and the ratio of the image to not change
30
+
height: "3rem",
31
+
width: "3rem",
32
+
border: "3px solid #ccc",
33
+
}}
34
+
/>
35
+
<h1>Chris Parsons</h1>
36
+
</div>
14
37
<p>
15
38
Hey there, I'm Chris, a full-stack software engineer with {
16
39
experienceInYears