marc/karnov.club
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: updates updates updates

Browse source
This commit is contained in:
Marc 2022-09-15 09:56:19 -04:00
parent e4dbfe5643
commit a3378d23c2
4 changed files with 77 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
hi.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB

49
index.html
View file

@ -1,23 +1,30 @@
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=block" rel="stylesheet">
<link href="styles.css" rel="stylesheet" />
<title>🍕</title>
</head>
<body>
<main>
<section>
<figure>
<img src="hi.png"/>
</figure>
<h1>Oh, hey.</h1>
<p>My name is <strong>Marc</strong>, and I'm into <strong>well-crafted code</strong>, <strong>opensource anything</strong> and <strong>DIY everything</strong>.</p>
<p>Right now, I organize and host the <a href="https://www.meetup.com/meetup-group-SHWjhLkX/">Toronto Open Source Community meetups</a> (on hold until COVID subsides... :(), I take care of <a href="https://opensource.tophat.com">Open Source</a> and write some neat code at <a href="https://www.tophat.com">Top Hat</a>.</p>
<p>The bulk of my current work is split between <strong>React</strong> and <strong>Django</strong>, but I am also interested in all things infrastructure, performance and scalability. I'm open to everything, really.</p>
<p>I also make pretty good sourdough. 🍞</p>
<hr>
<p>Ping me on <a href="https://www.github.com/mcataford">Github</a>, on <a href="www.linkedin.com/in/marccataford">LinkedIn</a> or via email at mcat [at] riseup.net, I'd love to chat.</p>
</section>
</main>
</body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=block" rel="stylesheet">
<link href="styles.css" rel="stylesheet" />
<title>🍕</title>
</head>
<body>
<main>
<figure>
<img id="me" src="./me.png"/>
</figure>
<section>
<h1>Oh, hey.</h1>
<p>My name is <strong>Marc</strong>, I'm an <strong>engineering lead</strong> based in Ottawa, ON and I'm into <strong>well-crafted code</strong>, <strong>opensource anything</strong> and <strong>DIY everything</strong>.</p>
<p>Right now, I <strong>manage</strong> and <strong>lead</strong> a team that develops and maintains the
<strong>core services</strong> that power content at
<a href="https://www.tophat.com">Top Hat</a>, help push <a href="https://opensource.tophat.com">Top Hat
Open Source</a> forward and fiddle with code in my free time.</p>
<p>The bulk of my current work revolves around <strong>infrastructure</strong>,
<strong>Django</strong>/<strong>FastAPI</strong> backend services, and <strong>leveling up awesome
people</strong>.</p>
<p>I also dabble in <strong>Typescript</strong> and <strong>React</strong>.</p>
<p>I also make pretty good sourdough. 🍞</p>
<hr>
<p>Ping me on <a href="https://www.github.com/mcataford">Github</a>, on <a href="www.linkedin.com/in/marccataford">LinkedIn</a> or via email at mcat [at] riseup.net, I'd love to chat.</p>
</section>
</main>
</body>
</html>

BIN
me.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 264 KiB

54
styles.css
View file

@ -1,8 +1,52 @@
html, body { background-color: #fdfdfd; margin: 0; font-family: 'Open Sans', sans-serif; font-size: 18px; }
main { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
html, body {
background-color: #fdfdfd;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
}
main {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main p { line-height: 1.5; }
main > section { width: 80%; max-width: 800px; }
main > * {
width: 50%;
max-width: 500px;
}
img { width: 100%; }
h1 { text-align: center; }
main > section > figure { display: flex; align-items: center; flex-direction: column; }
main > section > figure {
display: flex;
align-items: center;
justify-content: center;
}
a { font-weight: bold; }
strong, a { color: #1a82c1; }
strong, a, hr { color: #a25c29; }
hr { border-style: dashed; }
@media only screen and (max-width: 600px) {
main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
flex-direction: column;
justify-content: normal;
}
main > * {
width: 80%;
}
}