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

Refactor as SSG using Vite+React

Browse source
This commit is contained in:
Michael Bradley 2025-01-03 00:50:52 +13:00
parent a22071815d
commit 6830bd41dd
Signed by: MichaelBradley
SSH key fingerprint: SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
25 changed files with 3076 additions and 282 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/Body.tsx Normal file
View file

@ -0,0 +1,114 @@
import "./style.css";
import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture";
import CV from "./assets/cv.svg?react";
import GitHub from "./assets/github.svg?react";
import LinkedIn from "./assets/linkedin.svg?react";
import Mastodon from "./assets/mastodon.svg?react";
import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react";
// TODO: Automate screenshot of info for thumbnail?
const Fetch = () => {
return (
<div id="fetch-container">
<div id="fetch">
<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>
<div id="basic-info">
<div className="invisible-div">
<p>
<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.50/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>
<p className="blocks">
<span style={{ color: "var(--color0)" }}>███</span>
<span style={{ color: "var(--color1)" }}>███</span>
<span style={{ color: "var(--color2)" }}>███</span>
<span style={{ color: "var(--color3)" }}>███</span>
<span style={{ color: "var(--color4)" }}>███</span>
<span style={{ color: "var(--color5)" }}>███</span>
<span style={{ color: "var(--color6)" }}>███</span>
<span style={{ color: "var(--color7)" }}>███</span>
</p>
<p className="blocks">
<span style={{ color: "var(--color8)" }}>███</span>
<span style={{ color: "var(--color9)" }}>███</span>
<span style={{ color: "var(--color10)" }}>███</span>
<span style={{ color: "var(--color11)" }}>███</span>
<span style={{ color: "var(--color12)" }}>███</span>
<span style={{ color: "var(--color13)" }}>███</span>
<span style={{ color: "var(--color14)" }}>███</span>
<span style={{ color: "var(--color15)" }}>███</span>
</p>
</div>
</div>
</div>
);
};
const Links = () => (
<div className="links">
<a href="https://github.com/MichaelMBradley" title="GitHub account">
<GitHub />
</a>
<a href="https://www.linkedin.com/in/michaelmbradley/" title="LinkedIn account">
<LinkedIn />
</a>
<a href="https://mmbradley.ca/resume.pdf" title="My Résumé">
<CV />
</a>
<a rel="me" href="https://mstdn.ca/@michaelbradley" title="Mastodon account">
<Mastodon />
</a>
<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">
<DarkModeToggleIcon />
</label>
</div>
);
const Body = () => {
return (
<>
<Fetch />
<Links />
</>
);
};
export default Body;