{
  "$type": "site.standard.document",
  "content": "---\ntitle: \"The annual benswift.me re-write: 2019 edition\"\ndescription: \"Another year, another website rewrite. This time it's hand-crafted HTML & CSS\n  with modern grid layouts and the Inter UI typeface.\"\ntags:\n  - dev\n---\n\nWelcome, traveller. You've managed to find my blog without being\n[eaten by a grue](https://zork.wikia.com/wiki/Grue). If you haven't visited for\na while, you might have noticed that I've re-written my website.\n[Again](/blog/2017/07/06/benswift-me-update-july-2017-edition/).\n\nThere are a few reasons:\n\n1. it forces me to keep up to date with web stuff, which I\n   [teach for a living](https://cs.anu.edu.au/courses/comp1720/) (students can\n   sniff out a fraud)\n\n2. my academic activities don't fit the traditional \"list of journal\n   publications\" shape that my university-provided web presence is geared\n   towards\n\n3. if I move to a different institution, I don't have the difficult job of\n   exfiltrating my content from my old institution's platform\n\n4. building things is fun (I'm good at this stuff, and it feels good to use the\n   skills you've spent years developing)\n\n5. part of being an academic is brand-management, and that's much easier to do\n   if you completely control (at least one of) the platforms you're putting your\n   message out on\n\n6. I'm a control-freak, and the idea of _not_ being in control bums me out (this\n   is the pernicious flip side of #5)\n\nSome of these are good reasons, some not-so-good. For a fun party game,\n[argue with me on twitter](https://twitter.com/benswift) about which is which 😉\n\n## The nitty-gritty technical stuff\n\nI've (once again) gone with a [Jekyll](https://jekyllrb.com/)-powered static\nsite. This time, though, I've opted for my own lovingly hand-crafted HTML & CSS\nrather than one of the out-of-the-box themes. In doing this, I decided on a few\ndesign priorities:\n\n1. _modern_ markup: CSS grid & flexbox **all the way** (sorry if you're on an\n   old version of IE)\n2. _minimal_ markup: there's really not many elements in each page (I wanted to\n   see how far I could push back against the `div` soup that's so common these\n   days)\n3. _semantic_ markup: we have `nav` and `article` and `main` and `aside`, so\n   let's use them\n\nTypography-wise, I used [@rsms](https://twitter.com/rsms)'s new\n[Inter UI](https://rsms.me/inter/) font family, and I really like it. I'm not a\ndesigner (as you can probably tell) so I kept it simple---one typeface, one\nhighlight colour, and then I poke around with\n[Sass's](https://www.sass-lang.com) colour manipulation functions to get a _bit_\nmore variation.\n\n**The verdict**: I was really pleasantly surprised---it came together in about a\nday of hard work. Next time around (i.e. now that I know what I'm doing a bit\nmore) it'd be even easier. I particularly liked using\n[grid template areas](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas)\nto draw a little ascii-art diagram of my desired layout. Obviously the layout\nfor this blog is really boring, but I can imagine this being really handy for\nmore complex layouts.\n\nIf it's broken for you and you're on a modern browser[^ie-shade], then please\n[let me know](mailto:ben.swift@anu.edu.au) and I'll try to fix it if I can. I\ndon't think I've broken any (many) links, but again let me know if you find\nsomething I've missed.\n\n[^ie-shade]: that's my subtle way of throwing shade at IE\n\nThe other thing I really like about this iteration of the annual `benswift.me`\nredesign is that I finally understand the whole thing. No more magic themes\nwhich I hesitantly poke around in \"eye-of-newt\" style whenever I want to make\nchanges, and that's a nice feeling[^control-freak].\n\n[^control-freak]: especially if you're a control freak\n\nLet me know what you think of my new redesign in the comments. Just\nkidding---there are no comments. But do get in touch in some other way (see the\nicons at the top for various options).\n",
  "createdAt": "2026-05-13T23:15:01.650Z",
  "description": "Another year, another website rewrite. This time it's hand-crafted HTML & CSS with modern grid layouts and the Inter UI typeface.",
  "path": "/blog/2019/01/02/the-annual-benswift-me-re-write-2019-edition",
  "publishedAt": "2019-01-02T00:00:00.000Z",
  "site": "at://did:plc:tevykrhi4kibtsipzci76d76/site.standard.publication/self",
  "tags": [
    "dev"
  ],
  "textContent": "Another year, another website rewrite. This time it's hand-crafted HTML & CSS with modern grid layouts and the Inter UI typeface.",
  "title": "The annual benswift.me re-write: 2019 edition"
}