Files
homepage/src/index.html
Adam Burgess 2f498f1e08
All checks were successful
Deploy / deploy (push) Successful in 29s
redirect from adam.id.au to adam.au
2025-12-30 22:13:58 +11:00

228 lines
8.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<title>Adam Burgess</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Software developer in Sydney, Australia">
<link rel="canonical" href="https://adam.id.au" />
<style>
* {
box-sizing: border-box;
}
body {
background-image: url(LAPUTA_WEBP), url(LAPUTA_SVG);
/* todo: revist image-set */
background-position-x: center;
background-size: cover;
color: white;
font-family: Inter, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
::selection {
background-color: rgba(40, 122, 195, 0.65);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 1em;
}
body, h1, h2, h3, p {
margin: 0;
}
h1, h2, [role="doc-subtitle"], h3 {
font-family: Merriweather, serif;
font-style: normal;
}
h3 {
font-family: sans-serif;
font-weight: 400;
font-size: 18px;
margin-bottom: 4px;
}
h1 {
font-weight: 900;
font-size: 96px;
margin-bottom: 48px;
}
[role="doc-subtitle"] {
font-weight: 300;
font-size: 36px;
}
h2 {
font-weight: 400;
font-size: 24px;
margin-bottom: 0.5em;
}
.box {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
border-radius: 6px;
padding: 8px;
margin-left: -8px;
margin-right: -8px;
margin-bottom: 8px;
max-width: 700px;
text-shadow: 0px 0px 2px black;
}
footer {
text-align: right;
font-style: italic;
max-width: 700px;
margin-left: -8px;
margin-right: -8px;
}
a {
color: white;
}
a:visited {
color: #bbb;
}
code {
font-family: Consolas, monospace;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(FONT_merriweather_400) format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
font-display: block;
src: url(FONT_merriweather_300) format('woff2');
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-display: block;
src: url(FONT_merriweather_900) format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(FONT_inter_400) format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: bold;
font-display: block;
src: url(FONT_inter_700) format('woff2');
}
</style>
</head>
<body>
<div class="container">
<h1>
Adam Burgess
<div role="doc-subtitle">Software Developer in&nbsp;Sydney</div>
</h1>
<h2>My Projects</h2>
<div class="box">
<h3><a href="https://tarkov-time.adam.id.au">Tarkov Time - Real time clock to Escape from Tarkov's clock</a> - source at <a href="https://github.com/adamburgess/tarkov-time">github</a></h3>
<p>
Escape from Tarkov has a day/night cycle.<br>
This site shows you the time, and how long it will be to a future time. Deployed on Cloudflare Pages.<br>
The time is also available as an <a href="https://tarkov-time.adam.id.au/api">API</a> using CF Workers. <br>
The entire website is a single HTML with all resources embedded. 13kb.
</p>
</div>
<div class="box">
<h3><a href="https://github.com/adamburgess/linq">My version of LINQ (language integrated query) for JS</a> - <a href="https://www.npmjs.com/package/@adamburgess/linq">@adamburgess/linq</a> on npm</h3>
<p>
I use C#'s <code>IEnumerable</code> extensions quite a lot, and the javascript version, <code>linq.js</code>, is very large.<br>
My version is 1.29kb.
</p>
</div>
<div class="box">
<h3><a href="https://github.com/adamburgess/cloudflare-pages-direct-uploader">Cloudflare Pages Direct Uploader</a> - <a href="https://www.npmjs.com/package/@adamburgess/cloudflare-pages-direct-uploader">@adamburgess/cloudflare-pages-direct-uploader</a> on npm</h3>
<p>
<a href="https://pages.cloudflare.com/">Cloudflare Pages</a> hosts static websites (with dynamic workers) such as my Tarkov Time. <br>
Cloudflare have made a CLI called Wrangler that can directly publish websites to CF Pages, but I wanted a small utility that I could use programatically. <br>
This small library achieves that goal.
</p>
</div>
<div class="box">
<h3><a href="https://github.com/adamburgess/celeste-high-frame-rate">Celeste High Frame Rate</a></h3>
<p>
Celeste is a fun platformer, with a banger soundtrack.<br>
The developers lock the ingame framerate to 60 fps, which is in my opinion <b>painful</b>.<br>
This small patch overrides that limitation, and the game easily hits 240fps.
</p>
</div>
<div class="box">
<h3><a href="https://crop.adam.id.au">crop.adam.id.au</a> - source at <a href="https://github.com/adamburgess/crop">github</a></h3>
<p>
A helper for <code>ffmpeg</code>'s <code>crop</code> filter.<br>
Drag and drop an image and select it to get a crop filter in the correct format.
</p>
</div>
<div class="box">
<h3><a href="https://bundlephobia.fly.adam.id.au/size/@adamburgess/linq">https://bundlephobia.fly.adam.id.au/size/&ZeroWidthSpace;@adamburgess/&ZeroWidthSpace;linq</a></h3>
<p>
bundlephobia.com uses webpack. I've found it gives slightly inaccurate results because of this.<br>
I also wanted to get the brotlified sizes for my packages.<br>
This builds the package with rollup. Deployed on fly.io.<br>
No UI as of yet, but it also generates <a href="https://bundlephobia.fly.adam.id.au/size/@adamburgess/linq?shield&brotli">shields</a> see the readme of my linq package above for examples.
</p>
</div>
<div class="box">
<h3><a href="https://github.com/adamburgess/image-builder">https://github.com/adamburgess/&ZeroWidthSpace;image-builder</a></h3>
<p>
I build a lot (all) of my projects with Docker, so I've made my own base images. <br>
Using Github Actions and a generated Makefile, they automatically update whenever a dependency changes whether it be the docker image, an alpine package, a github/lab repo, or an npm package.
</p>
</div>
<div class="box">
<h3><a href="https://github.com/adamburgess/alpine-apk">https://github.com/adamburgess/alpine-apk</a> - <a href="https://www.npmjs.com/package/alpine-apk">alpine-apk</a> on npm</h3>
<p>
Alpine Linux is a minimal linux distro, great for docker.<br>
I wanted to query its package manager, APK, from Node.
</p>
</div>
<!-- <footer>
Background: Studio Ghibli - Laputa
</footer> -->
</div>
</body>
</html>