128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
import "./style.css";
|
|
|
|
import hero from "./assets/MichaelBradley.jpeg?format=avif;webp;jpeg&as=picture";
|
|
|
|
import CV from "./assets/cv.svg?react";
|
|
import Git from "./assets/git.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";
|
|
|
|
type ColouredBlockProps = {
|
|
colorNum: number;
|
|
};
|
|
|
|
const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
|
|
<span style={{ color: `var(--color${colorNum})` }}>███</span>
|
|
);
|
|
|
|
type ColouredLineProps = {
|
|
light: boolean;
|
|
};
|
|
|
|
const ColouredLine = ({ light }: ColouredLineProps) => {
|
|
const startIndex = light ? 8 : 0;
|
|
return (
|
|
<p className="blocks">
|
|
{Array.from({ length: 8 }).map(
|
|
(
|
|
_value,
|
|
index, // Apparently this is the best way to map a range in JavaScript
|
|
) => (
|
|
<ColouredBlock colorNum={startIndex + index} key={index} />
|
|
),
|
|
)}
|
|
</p>
|
|
);
|
|
};
|
|
|
|
// 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.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={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Links = () => (
|
|
<div className="links">
|
|
<a href="https://git.mmbradley.ca/MichaelBradley" title="Forgejo instance">
|
|
<Git />
|
|
</a>
|
|
<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;
|