From 36db4c2c0ca4204fc078201808351dcbbfcc6983 Mon Sep 17 00:00:00 2001 From: Michael Bradley Date: Fri, 21 Feb 2025 01:50:27 -0500 Subject: [PATCH 01/11] Create new components to reduce code duplication --- src/Body.tsx | 132 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 79 insertions(+), 53 deletions(-) diff --git a/src/Body.tsx b/src/Body.tsx index b5aca9b..a86a4bd 100644 --- a/src/Body.tsx +++ b/src/Body.tsx @@ -1,5 +1,7 @@ import "./style.css"; +import type { PropsWithChildren } from "react"; + import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture"; import CV from "./assets/cv.svg?react"; @@ -20,6 +22,64 @@ type ColouredLineProps = { light: boolean; }; +const ProfilePicture = () => ( +
+ + {Object.entries(hero.sources).map(([format, src]) => ( + + ))} + A picture of me in a suit smiling + +
+); + +const Highlight = ({ children }: PropsWithChildren) => {children}; + +type FetchHeaderProps = { + user: string; + hostname: string; +}; + +const FetchHeader = ({ user, hostname }: FetchHeaderProps) => ( + <> +

+ {user}@{hostname} +

+

{"-".repeat(user.length + 1 + hostname.length)}

+ +); + +type InfoLineProps = { + label: string; + value: string; +}; + +const InfoLine = ({ label, value }: InfoLineProps) => ( +

+ {label}: {value} +

+); + +const BlankLine = () => ( +

+
+

+); + +const Description = () => ( +
+ + + + + + + + + +
+); + const ColouredLine = ({ light }: ColouredLineProps) => { const startIndex = light ? 8 : 0; return ( @@ -41,48 +101,10 @@ const Fetch = () => { return (
-
- - {Object.entries(hero.sources).map(([format, src]) => ( - - ))} - A picture of me in a suit smiling - -
+
-
-

- website@MichaelBradley -

-

----------------------

-

- Degree: Bachelor of Computer Science -

-

- University: Carleton -

-

- Major CGPA: 11.52/12 (A+) -

-

- Languages: C/C++, Python, TypeScript -

-

- Skills: Linux, Git, Testing -

-

- Work Experience: 2 years -

-

- Applying for: Full-time job -

-

- Location: Toronto or Remote -

-
-

-
-

+ +
@@ -91,20 +113,24 @@ const Fetch = () => { ); }; +type ImageLinkProps = { + href: string; + title: string; + Image: typeof Git; // Not ideal, but I can't figure out how to import the type directly from the declared wildcard module +}; + +const ImageLink = ({ href, title, Image }: ImageLinkProps) => ( + + + +); + const Links = () => (
- - - - - - - - - - - - + + + +