MichaelBradley/website
MichaelBradley/website
1
0
Fork 0
Code Issues Pull requests Activity Actions

Create new components to reduce code duplication

Browse source
This commit is contained in:
Michael Bradley 2025-02-21 01:50:27 -05:00
parent aa8c9ce317
commit 36db4c2c0c
Signed by: MichaelBradley
SSH key fingerprint: SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
1 changed files with 79 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/Body.tsx
View file

@ -1,5 +1,7 @@
import "./style.css"; import "./style.css";
import type { PropsWithChildren } from "react";
import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture"; import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture";
import CV from "./assets/cv.svg?react"; import CV from "./assets/cv.svg?react";
@ -20,6 +22,64 @@ type ColouredLineProps = {
light: boolean; light: boolean;
}; };
const ProfilePicture = () => (
<div id="michael-photo-container">
<picture>
{Object.entries(hero.sources).map(([format, src]) => (
<source srcSet={src} type={`image/${format}`} key={format} />
))}
<img src={hero.img.src} alt="A picture of me in a suit smiling" id="michael-photo" />
</picture>
</div>
);
const Highlight = ({ children }: PropsWithChildren) => <span className="text-highlight">{children}</span>;
type FetchHeaderProps = {
user: string;
hostname: string;
};
const FetchHeader = ({ user, hostname }: FetchHeaderProps) => (
<>
<p>
<Highlight>{user}</Highlight>@<Highlight>{hostname}</Highlight>
</p>
<p>{"-".repeat(user.length + 1 + hostname.length)}</p>
</>
);
type InfoLineProps = {
label: string;
value: string;
};
const InfoLine = ({ label, value }: InfoLineProps) => (
<p>
<span className="text-highlight">{label}</span>: {value}
</p>
);
const BlankLine = () => (
<p>
<br />
</p>
);
const Description = () => (
<div className="invisible-div">
<FetchHeader user="website" hostname="MichaelBradley" />
<InfoLine label="Degree" value="Bachelor of Computer Science" />
<InfoLine label="University" value="Carleton" />
<InfoLine label="Major CGPA" value="11.52/12 (A+)" />
<InfoLine label="Languages" value="C/C++, Python, TypeScript" />
<InfoLine label="Skills" value="Linux, Git, Testing" />
<InfoLine label="Work Experience" value="2 years" />
<InfoLine label="Applying for" value="Full-time job" />
<InfoLine label="Location" value="Toronto or Remote" />
</div>
);
const ColouredLine = ({ light }: ColouredLineProps) => { const ColouredLine = ({ light }: ColouredLineProps) => {
const startIndex = light ? 8 : 0; const startIndex = light ? 8 : 0;
return ( return (
@ -41,48 +101,10 @@ const Fetch = () => {
return ( return (
<div id="fetch-container"> <div id="fetch-container">
<div id="fetch"> <div id="fetch">
<div id="michael-photo-container"> <ProfilePicture />
<picture>
{Object.entries(hero.sources).map(([format, src]) => (
<source srcSet={src} type={`image/${format}`} key={format} />
))}
<img src={hero.img.src} alt="A picture of me in a suit smiling" id="michael-photo" />
</picture>
</div>
<div id="basic-info"> <div id="basic-info">
<div className="invisible-div"> <Description />
<p> <BlankLine />
<span className="text-highlight">website</span>@<span className="text-highlight">MichaelBradley</span>
</p>
<p>----------------------</p>
<p>
<span className="text-highlight">Degree</span>: Bachelor of Computer Science
</p>
<p>
<span className="text-highlight">University</span>: Carleton
</p>
<p>
<span className="text-highlight">Major CGPA</span>: 11.52/12 (A+)
</p>
<p>
<span className="text-highlight">Languages</span>: C/C++, Python, TypeScript
</p>
<p>
<span className="text-highlight">Skills</span>: Linux, Git, Testing
</p>
<p>
<span className="text-highlight">Work Experience</span>: 2 years
</p>
<p>
<span className="text-highlight">Applying for</span>: Full-time job
</p>
<p>
<span className="text-highlight">Location</span>: Toronto or Remote
</p>
</div>
<p>
<br />
</p>
<ColouredLine light={false} /> <ColouredLine light={false} />
<ColouredLine light={true} /> <ColouredLine light={true} />
</div> </div>
@ -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) => (
<a rel="me" href={href} title={title}>
<Image width="100%" />
</a>
);
const Links = () => ( const Links = () => (
<div className="links"> <div className="links">
<a href="https://git.mmbradley.ca/MichaelBradley" title="Forgejo instance"> <ImageLink href="https://git.mmbradley.ca/MichaelBradley/" title="Forgejo instance" Image={Git} />
<Git width="100%" /> <ImageLink href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account" Image={LinkedIn} />
</a> <ImageLink href="https://mmbradley.ca/resume.pdf" title="My Résumé" Image={CV} />
<a href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account"> <ImageLink href="https://mstdn.ca/@michaelbradley/" title="Mastodon account" Image={Mastodon} />
<LinkedIn width="100%" />
</a>
<a href="https://mmbradley.ca/resume.pdf" title="My Résumé">
<CV width="100%" />
</a>
<a rel="me" href="https://mstdn.ca/@michaelbradley" title="Mastodon account">
<Mastodon width="100%" />
</a>
<input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" /> <input id="dark-mode-toggle" type="checkbox" aria-label="Toggle dark mode" />
<label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode"> <label htmlFor="dark-mode-toggle" id="dark-mode-toggle-label" title="Toggle dark mode">
<DarkModeToggleIcon width="100%" /> <DarkModeToggleIcon width="100%" />