update cv

.gitignore

@@ -1,2 +1,11 @@
 public/
-static/processed_images/
+static/processed_images/
+*.log
+cv/*.gz
+cv/*.xml
+*.aux
+*.bbl
+*.bcf
+*.blg
+*.out
+cv/*.pdf

config.toml

@@ -2,7 +2,7 @@ base_url = "https://jackbondpreston.me"
 compile_sass = true
 build_search_index = false
 
-generate_feed = true
+generate_feeds = true
 
 [markdown]
 highlight_code = true

content/_index.md

@@ -9,19 +9,19 @@ insert_anchor_links = "right"
 # jack bond-preston
 
 ## contact
-you can contact me via [email](mailto:jack@jackbondpreston.me) or on [linkedin](https://www.linkedin.com/in/jack-bond-preston-922706150/)
+you can contact me via [email](mailto:jackbondpreston@outlook.com) or on [linkedin](https://www.linkedin.com/in/jack-bond-preston-922706150/)
 
 my cv is available for viewing [here](cv.pdf)
 
 ## open source
 
-some of my repositories are available [here](https://git.jackbondpreston.me)
+some of my personal repositories are available [here](https://git.jackbondpreston.me)
 
+my merged [dpdk](https://www.dpdk.org/) work can be found on [the project's repository](https://git.dpdk.org/dpdk/log/?qt=author&q=jack.bond-preston%40foss.arm.com)
+
+my public [onload](https://www.xilinx.com/products/boards-and-kits/x2-series/onload.html) commits at amd can be found on [the github repo](https://github.com/Xilinx-CNS/onload)
 
 some of my work at arm on [morello](https://www.arm.com/architecture/cpu/morello) is available on the [morello musl gitlab](https://git.morello-project.org/morello/musl-libc/-/commits/morello/master?author=Jack%20Bond-Preston) 
 
 
-my [onload](https://www.xilinx.com/products/boards-and-kits/x2-series/onload.html) commits at amd can be found on [the github repo](https://github.com/Xilinx-CNS/onload)
-
-
 <h2>articles<a href="/atom.xml" class="atom-link">[atom feed]</a></h2>

content/dpdk-summit-2024.md

@@ -0,0 +1,13 @@
++++
+title = "DPDK Summit 2024: OpenSSL Crypto PMD - Analysis and Optimisations"
+date = 2024-10-23
++++
+
+# Summary
+this year I had the opportunity to present my recent work on [DPDK](https://www.dpdk.org/). the work consists of performance analysis and optimisations to the OpenSSL crypto poll mode driver (PMD). I identified several major performance flaws with the implementation, and integration with OpenSSL, and upstreamed changes to address these. the talk goes through the details of the findings, performance impacts of the changes, and discussions around future work.
+
+# Recording
+<iframe width="560" height="315" src="https://www.youtube.com/embed/sPhktvMBYhs?si=UInBMrAUxs2R_raf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+# Slides
+[pdf of the slides used for the talk](/pdf/dpdksummit2024.pdf)

content/syscalls.md

@@ -0,0 +1,164 @@
++++
+title = "Linux syscall hooking"
+date = 2024-09-26
++++
+
+sometimes, you might want to hook Linux syscalls from a binary. it's probably not for a very elegant reason, but I'm not here to judge. in this article we discuss a few options for doing this. these will be focussed on x86 platforms running Linux, but many of these techniques should also be possible on other ISAs, with appropriate changes.
+
+## binary rewriting
+one way to approach the problem is simply to rewrite binaries at runtime. one can set executable text pages to be writeable, swap out some instructions, and then set them back to be read-only and executable. how can this look in practice?
+
+one has to consider the limitations of binary rewriting in this manner. we can only replace syscall instructions with instructions of the same length. thus, we have limited flexibility in how to implement a syscall hooking function. absolute calls to some custom handler address would require further code modification than is possible, in order to prepare a register with the jump address. we can do relative jumps, but we need to find some space within the maximum range to put our handler function.
+
+### zpoline
+zpoline{{ref(n=1)}} is one approach to get around these limitations, on x86 platforms. zpoline replaces all `syscall`/`sysenter` instructions with `call *%rax`. this takes advantage of two things:
+1. `rax` will always contain the target syscall number, thus holding a bounded low number. this allows us to rewrite the virtual memory in the range `[0x00, (SYSCALL_MAX + n)]` to have some custom handler code of length `n`.
+2. `call *%rax` is the same size as `syscall` (2 bytes){{ref(n=2)}}.
+this means we can `mmap(0)` at the start of runtime, and create fall-through nops, followed by a jump to a syscall hook function. the performance of this should be pretty good, not much different to adding an extra function call to each syscall, which is all we want to do anyway.
+
+okay, but is it ok to `mmap()` the zero virtual address? well, not really. for starters, you probably can't do it as a non-privileged user. Linux has a setting `mmap_min_addr`, which disallows any `mmap()`s below a given address{{ref(n=3)}}. secondly, this can cause certain null-pointer bugs to exhibit weird behaviour, instead of throwing segmentation faults.
+
+thus, this option does work, and may be suitable for certain usecases, but it does have large flaws (like all of the options).
+
+### custom trampolines
+an alternative that doesn't involve `mmap()`ing the zero page is used by AMD's Onload{{ref(n=4)}} - try to replace
+```
+b8 NN NN NN NN          mov    eax,0xN         ; N = syscall number
+0f 05                   syscall
+```
+with
+```
+b8 TT TT TT TT          mov    eax,0xTTTTTTTT  ; 0xTTTTTTTT = trampoline func address
+ff d0                   call   rax
+```
+where `0xTTTTTTTT` is the address of some trampoline function we have crafted. we can get an address to put this function at by using `mmap(..., MMAP_32BIT)`.
+
+another option here is to try to get some virtual memory within a certain distance from the syscall code, and use relative call instructions.
+
+note that this method is not as reliable. it relies on being able to find syscall-performing code which can be modified in this way, which is not guaranteed. thus, it could fail in some situations. it does circumvent the requirement for an ugly `mmap(0)`, however.
+
+## syscall user dispatch (SUD)
+SUD{{ref(n=5)}} is probably the most "correct" way to go about doing this. this kernel feature was initially created for Wine. SUD allows the userspace program to request the kernel traps all syscalls, raising a `SIGSYS` signal every time. a certain range of program memory can be excluded from this trapping, and a flag can be used to toggle trapping off or on at runtime (although the excluded range will never trap, regardless of this flag).
+
+this is is enabled via `prctl()`:
+```c
+int prctl(PR_SET_SYSCALL_USER_DISPATCH, PR_SYS_DISPATCH_ON, unsigned long off, unsigned long size, int8_t *switch);
+int prctl(PR_SET_SYSCALL_USER_DISPATCH, PR_SYS_DISPATCH_OFF, 0L, 0L, 0L);
+```
+where `off` is the start of the non-trapping memory region, and `size` is it's length. `switch` is a pointer to the aforementioned toggleable flag.
+
+here is a very basic example of using SUD:
+```c
+#define _GNU_SOURCE
+
+#include <signal.h>
+#include <sys/prctl.h>
+#include <stdbool.h>
+#include <stdlib.h>
+#include <stddef.h>
+#include <string.h>
+#include <sys/syscall.h>
+#include <sys/types.h>
+#include <stdio.h>
+
+bool selector = SYSCALL_DISPATCH_FILTER_ALLOW;
+
+static volatile void handle_sigsys(int sig, siginfo_t *info, void *ucontext) {
+	char buf[128];
+	int len;
+    int ret;
+
+	len = snprintf(buf, 1024, "Caught syscall with number 0x%x\n", info->si_syscall);
+    selector = SYSCALL_DISPATCH_FILTER_ALLOW;
+    write(1, buf, len);
+}
+
+int main(void) {
+    int err;
+
+    /* install SIGSYS signal handler */
+    struct sigaction act;
+    memset(&act, 0, sizeof(act));
+
+	sigset_t mask;
+	sigemptyset(&mask);
+
+	act.sa_sigaction = handle_sigsys;
+	act.sa_flags = SA_SIGINFO;
+	act.sa_mask = mask;
+
+    if (err = sigaction(SIGSYS, &act, NULL)) {
+		printf("sigaction failed: %d\n", err);
+		exit(-1);
+	}
+
+    /* enable SUD */
+    if (err = prctl(PR_SET_SYSCALL_USER_DISPATCH, PR_SYS_DISPATCH_ON, 0, 0, &selector)) {
+		printf("prctl failed: %d\n", err);
+		exit(-1);
+	}
+
+    selector = SYSCALL_DISPATCH_FILTER_BLOCK;
+    syscall(SYS_write);
+
+    return 0;
+}
+```
+running this will produce the following:
+```
+Caught syscall with number 0x38
+```
+where syscall number `0x38` is `SYS_write` (on my system).
+
+{% note(header="note") %}
+we've had to disable syscall hooking within `handle_sigsys()`, before we perform the `write` syscall. this could also be achieved using the offset exclusion mechanism, with a caveat: SUD also needs to be disabled at signal handler return. this is because, depending on some factors, the signal handler will return to a signal trampoline, which exists somewhere else in memory (VDSO or libc). this trampoline will then perform the `sigreturn` syscall, which - if you had only excluded the handler function memory itself - would cause us to raise a `SIGSYS` inside a `SIGSYS` handler (oops).
+{% end %}
+
+SUD should have pretty good performance, although it is still switching from user space to kernel space (on syscall), and back again (on SIGSYS handling) - unlike the binary rewriting methods.
+
+## rewriting the kernel syscall table
+Linux kernel modules could also try to patch the kernel's syscall table.
+
+it used to be the case that if Linux is configured with `CONFIG_KALLSYMS_ALL=y`:
+```shell
+$ zgrep CONFIG_KALLSYMS_ALL /proc/config.gz
+CONFIG_KALLSYMS_ALL=y
+```
+then we can find the address of the syscall table in `kallsyms`:
+```shell
+$ sudo grep sys_call_table /proc/kallsyms
+ffffffff854017e0 D sys_call_table
+```
+and thus programmatically:
+```c
+void *sys_call_table = kallsyms_lookup_name("sys_call_table");
+```
+once the syscall table address has been obtained, the handlers for specific syscall(s) could then be overwritten, in order to hook them.
+however, this kind of symbol lookup was generally considered very naughty, and `kallsyms_lookup_name()` was unexported in Linux 5.7{{ref(n=6)}}. there should be some feasible alternatives to do the same thing, but they would be slower, uglier, and more painful.
+
+## modifying IA32_LSTAR MSR
+
+another method which has been used successfully{{ref(n=7)}} involves rewriting the x86 MSR `IA32_LSTAR`. this register holds the destination address which the CPU will load into `RIP` when taking a syscall{{ref(n=2)}}. one can write a kernel module which modifies this register to contain a custom syscall handler address. this syscall handler function can hook syscalls before dispatching as normal (or not).
+
+now that `kallsysms_lookup_name()` is no longer exported, this method also becomes problematic. as the example kernel module in {{ref(n=7,nosup=true)}} demonstrates, we still need to be able to grab some kernel symbol addresses in order to correctly implement the dispatcher.
+
+however, this does propose another idea for implementing the previous method: using `IA32_LSTAR` to ascertain the address of the Linux syscall handler, instead of kallsyms. indeed, Onload has also exploited this method as a workaround for the unexporting of `kallsyms_lookup_name()`{{ref(n=8)}}.
+
+
+## citations
+
+{{ defref(n=1, url="https://www.usenix.org/conference/atc23/presentation/yasukata") }}
+
+{{ defref(n=2, url="https://www.intel.com/content/www/us/en/developer/articles/technical/intel-sdm.html") }} 
+
+{{ defref(n=3, url="https://elixir.bootlin.com/linux/v6.11/source/arch/s390/mm/mmap.c#L137") }} 
+
+{{ defref(n=4, url="https://github.com/Xilinx-CNS/onload/blob/d5984bf52fcfba0cd75df8a1f8828f3363f6e164/src/lib/transport/unix/fdtable.c#L311") }} 
+
+{{ defref(n=5, url="https://docs.kernel.org/admin-guide/syscall-user-dispatch.html") }} 
+
+{{ defref(n=6, url="https://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git/commit/?id=0bd476e6c67190b5eb7b6e105c8db8ff61103281") }} 
+
+{{ defref(n=7, url="https://vvdveen.com/data/lstar.txt") }} 
+
+{{ defref(n=8, url="https://github.com/Xilinx-CNS/onload/blob/083e5959ef76632ae3cd3d4356fb079ce0c570d1/src/driver/linux_resource/syscall_x86.c#L347") }} 

content/学中文学了一年了.md

@@ -0,0 +1,18 @@
++++
+title = "学中文学了一年了"
+date = 2024-09-23
++++
+
+大约一年前，我开始认真地学习中文。因此，我觉得我应该写一下我的经历。
+
+我刚开始学习时，我只用了一个方法：[Anki](https://apps.ankiweb.net/)卡片。我也认为在语言学习方法上，Anki是最有效的。但是为了提高听力和口语，它不太好。
+
+这就是为什么去年我也开始在Italki上上课。因为[Italki](https://www.italki.com/)有很多的中文老师，所以你可以选择一个最适合你的学习方式的。对我来说，这是最有效方法提高我的口语。
+
+因为在今年上半年的时候，我还感觉我的听力水平不好，所以我找了方法来提高。我发现了大部分人建议听博客，然后我找到一些有用的博客。我最喜欢的是这些：
+
+1. [听故事说中文](https://open.spotify.com/show/04re9FvL1xviHGWvXKoAhZ?si=d7bc25d6f481427b)
+2. [猫咪中文](https://open.spotify.com/show/7sHdRAysnMygox20EuYlwp?si=6ec8583891484aef)
+3. [茶歇中文](https://open.spotify.com/show/6mJNegfDGmNaG1mWJtZJed?si=15f5851993d74a48)
+
+未来将要发生什么？我还不知道，但是我希望我可以继续进步。明年三月我打算和我的对象一起去中国旅游。其实我十分期待这个旅行，因为我不但没去过中国，甚至连亚洲也没去过！既然中国菜非常好吃，我应该学习怎么流利地点菜。我也希望在中国我可以够有信心尝试和中国人聊聊天儿。

cv/main.tex

@@ -13,6 +13,7 @@
 % Example photograph taken from Wikimedia Commons
 % https://commons.wikimedia.org/wiki/File:Kiara_Krit_passport.jpg
 
+
 \usepackage{simplecv}
 
 \boldname{Bond-Preston}{Jack}{Mr.}
@@ -26,28 +27,19 @@
     Website: \website{jackbondpreston.me} \\ 
     Email: \email{jackbondpreston@outlook.com} \\
     LinkedIn: \linkedin{jack-bond-preston-922706150} \\
-    GitHub: \github{jackbondpreston}
 }
 
-% \headingphoto{Name Surname}{
-%     Website: \website{example.com} \\ 
-%     Email: \email{example@example.edu} \\
-%     LinkedIn: \linkedin{name-surname} \\
-%     GitHub: \github{example}
-% }{photo.jpg}
-
 % Page One
-\import{sections/}{education.tex}
 \import{sections/}{experience.tex}
-%\import{sections/}{publications.tex}
+\import{sections/}{skills.tex}
 
-%\pagebreak
+\pagebreak
 
 % Page Two
 %\import{sections/}{teaching.tex}
-% \sidebyside
-\import{sections/}{skills.tex}
-    % {\import{sections/}{languages.tex}}
+\import{sections/}{education.tex}
+\import{sections/}{publications.tex}
+\import{sections/}{languages.tex}
 %\import{sections/}{projects.tex}
 %\import{sections/}{awards.tex}
 %\import{sections/}{extracurricular.tex}

cv/sections/education.tex

@@ -6,9 +6,4 @@
 \entrybig
     {\textbf{University of Bristol}}{Bristol, UK}
         {BSc in Computer Science (1st Class Hons)}{2017\textendash 2020}
-        \vspace{-0.75em}
-\innerlist{
-    \entry{Awarded prize for best second-year group software development project.}
-}
-
 }

cv/sections/experience.tex

@@ -4,33 +4,47 @@
 \outerlist{
 
 \entrybig
-	{\textbf{AMD, Inc. (formerly Xilinx)}}{Cambridge, UK}
-		{Software Engineer in Adaptive and Embedded Computing Group}{2022\textendash Current}
+	{\textbf{Arm Ltd.}}{Cambridge, UK (Hybrid)}
+		{Software Engineer in Infrastructure Application Solutions group}{2023\textendash Current}
 \innerlist{
-	\entry{Developing AMDs Onload userspace network stack.}
+	\entry{Contributing to the open source DPDK (Data Plane Development Kit) project (using C), including making large performance improvements to the OpenSSL PMD (Poll-Mode Driver) - as well as changes to OpenSSL itself (using C and arm64 assembly).}
+	\entry{Research and implementations in the area of HPC/AI infrastructure/networking, especially RDMA and memory management on heterogeneous memory systems - comprising work on projects including PyTorch (using C++ and Python), Gloo (using C++).}
+	\entryextra{Coordinating collaboration between IAS and Secure Libraries teams, helping to ensure enablement of competitive IPSec performance on Arm platforms.}
+	\entryextra{Technical mentorship for graduate engineer.}
+	\entryextra{Code reviews across multiple projects including DPDK [C], PyTorch [C++, Python], OpenSSL [C, arm64 assembly], VPP [C], Snort3 [C++].}
+	\entryextra{Knowledge sharing documents and presentations, especially around OpenSSL performance work and heterogeneous memory management.}
 }
 
 \entrybig
-	{\textbf{Arm Ltd.}}{Cambridge, UK}
+	{\textbf{AMD (formerly Xilinx / Solarflare)}}{Cambridge, UK (Hybrid)}
+		{Software Engineer in Adaptive and Embedded Computing Group}{2022\textendash 2023}
+\innerlist{
+	\entry{Developing AMDs transparent, ultra-low-latency, kernel-bypass network stack - Onload - using C.}
+	\entryextra{Performance optimisation and benchmarking/profiling work.}
+	\entryextra{Improvements, debugging, and bugfixes for teaming/bonding support.}
+	\entryextra{Extending and modernising internal automated tests}
+}
+
+\entrybig
+	{\textbf{Arm Ltd.}}{Cambridge, UK (Hybrid)}
 		{Graduate Software Engineer in Open Source Software Group}{2021\textendash2022}
 \innerlist{
 	\entry{Porting low-level software to the Morello (CHERI) platform.}
-	\entryextra{Produced patches in C and AArch64 assembly as part of a project porting the open-source C standard library implementation musl to a new prototype platform.}
+	\entryextra{Produced patches as part of a project porting the open-source C standard library implementation musl to a new prototype platform (using C and arm64 assembly).}
 	\entryextra{Ported larger components of the C library, including the memory allocator and POSIX threads. Considered security and hardening against memory safety bugs at every stage of design and implementation.}
 	\entryextra{Created a minimal test distribution of Linux for use on an Arm Fixed Virtual Platform, with the ability to run userspace applications in pure-capability mode. This provided the framework for adding FVP-based testing to the CI pipeline (alongside existing emulator-based testing) for further proof of functionality.}
 	\entryextra{Liased with multiple teams to ensure coordination between libc, kernel ABI, compilers and debuggers.}
-	\entryextra{Provided code review including feedback and improvements for patches developed by others for the musl project.}
 }
-
-\entrybig
-	{\textbf{University of Bristol}}{Bristol, UK}
-	{Teaching Assistant in Department of Computer Science}{2019\textendash 2020}
-    \innerlist{
-    	\entry{Delivered and created content for several Computer Science courses, including content involving operating systems, concurrency, and a software engineering project.}
-    	\entryextra{Provided guidance and troubleshooting assistance to students in both in-person and online lab sessions, including for a course in which students develop a basic Armv7-A multitasking kernel.}
-    	\entryextra{Interviewed students in viva-style coursework assessments, and assisted with subsequent coursework marking.}
-    	\entryextra{Assisted with the creation and improvement of lab sheets (including skeleton and solution code).}
-    }
+%
+%\entrybig
+%	{\textbf{University of Bristol}}{Bristol, UK}
+%	{Teaching Assistant in Department of Computer Science}{2019\textendash 2020}
+%    \innerlist{
+%    	\entry{Delivered and created content for several Computer Science courses, including content involving operating systems, concurrency, and a software engineering project.}
+%    	\entryextra{Provided guidance and troubleshooting assistance to students in both in-person and online lab sessions, including for a course in which students develop a basic Armv7-A multitasking kernel.}
+%    	\entryextra{Interviewed students in viva-style coursework assessments, and assisted with subsequent coursework marking.}
+%    	\entryextra{Assisted with the creation and improvement of lab sheets (including skeleton and solution code).}
+%    }
     
     
 % \entrybig

cv/sections/languages.tex

@@ -2,6 +2,7 @@
 \section{Languages}
 
 \denseouterlist{
-\entry{\textbf{English:} Native speaker}
-\entry{\textbf{German:} CEFR A2/B1 (Elementary/Low Intermediate)}
+\entry{\textbf{English:} Native}
+\entry{\textbf{Mandarin Chinese:} HSK 3 (2024)}
+\entry{\textbf{German:} CEFR A2 (2020)}
 }

cv/sections/publications.tex

@@ -1,9 +1,13 @@
 
-\nocite{*}
-\printbibliography[title=Publications]
+\section{Presentations}
 
-% Can instead manually enter publications as shown:
-% \section{Publications}
-% \orderedouterlist{
-% \entry{S. Petridis, J. Shen, \textbf{D. Cetin} and M. Pantic, "Visual-Only Recognition of Normal, Whispered And Silent Speech", \textit{IEEE International Conference on Acoustics, Speech and Signal Processing (ICASSP), April 2018}}
-% }
+\outerlist{
+	
+	\entrybig
+	{\textbf{DPDK Summit}}{Online Presentation}
+	{\href{https://www.youtube.com/watch?v=sPhktvMBYhs}{OpenSSL Crypto PMD - Analysis and Optimisations}}{October 2024}
+	\innerlist{
+		\entry{Submitted and delivered a talk on my work optimising DPDK's OpenSSL Poll Mode Driver (PMD), along with potential future work and points requiring community coordination.}
+		\entryextra{Fielded and answered numerous questions from community members.}
+	}
+}

cv/sections/skills.tex

@@ -2,10 +2,10 @@
 \section{Skills}
 
 \denseouterlist{
-\entry{\textbf{Low-Level Software \& Architecture:} C, C++ (inc. 11/17/20 standards), Armv7/8/9 (assembly \& architecture), RISC-V, CHERI, GNU Make, CMake.}
-\entry{\textbf{Software Engineering:} Git, Gerrit, Linux, Bash \& Zsh, Python, Java, Haskell, Agile, Jira.}
-\entry{\textbf{Web Development:} HTML5, Modern CSS, ECMAScript 2015+ \& Typescript, Vue.js, Spring Boot, SQL.}
-\entry{\textbf{Teaching:} Giving lectures \& seminars, interviewing, marking coursework, giving knowledge sharing presentations.}
-\entry{\textbf{Design:} 3D modelling, vector graphics, Photoshop.}
+\entry{\textbf{Programming Languages:} C, C++, Python, Assembly (x86-64 and AArch64)}
+\entry{\textbf{Debugging and Performance:} Perf, GDB \& LLDB, rr, Flamegraph, Wireshark}
+\entry{\textbf{Architecture:} Arm Architecture, Arm Standard Interconnects, PCIe, Heterogeneous Systems}
+\entry{\textbf{Build Systems:} GNU Make, CMake, Meson}
+\entry{\textbf{Software Engineering:} Python, Git, Gerrit, Linux, Shell Scripting, Agile, Jira}
 
 }

cv/simplecv.sty

@@ -10,10 +10,19 @@
 \usepackage{enumitem}                       % List customization
 \usepackage{lastpage}                       % Page numbering
 \usepackage{fancyhdr}                       % Footers
-\usepackage[russian,english]{babel}         % Language styles
+\usepackage[english]{babel}         % Language styles
 \usepackage{graphicx}                       % Importing graphics
 \usepackage[export]{adjustbox}              % Aligning margins
 
+\hypersetup{
+	colorlinks=true,
+	linkcolor=blue,
+	filecolor=magenta,      
+	urlcolor=blue,
+	pdftitle={Overleaf Example},
+	pdfpagemode=FullScreen,
+}
+
 % % Chinese
 % \usepackage{xeCJK}
 % \setCJKmainfont{BabelStone Han}

sass/style/article.scss

@@ -76,4 +76,28 @@
       color: $body-color;
     }
   }
+
+  .note {
+    line-height: inherit;
+    margin: 1.25em 0;
+    padding: 6px 12px;
+    display: flex;
+    gap: 12px;
+    border-left: 1px solid $heading-color;
+
+    .icon svg {
+      height: 1.3em;
+      display: flex;
+      align-items: center;
+      color: $heading-color;
+    }
+
+    p {
+      margin-top: 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
 }

sass/style/main.scss

@@ -36,13 +36,31 @@
        url('/fonts/source-code-pro-v22-latin-ext_latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
+@font-face {
+  font-family: 'Noto Sans CJK';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('/fonts/NotoSansCJKsc-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/fonts/NotoSansCJKsc-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@font-face {
+  font-family: 'Noto Sans CJK';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('/fonts/NotoSansCJKsc-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('/fonts/NotoSansCJKsc-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
 body {
   background-color: $background-color;
   color: $body-color;
   padding-left: 5vw;
   padding-right: 5vw;
   padding-top: 5vh;
-  font-family: 'Source Code Pro';
+  font-family: 'Source Code Pro', 'Noto Sans CJK';
   font-size: 1.5rem;
 
   @media screen and (max-width: 600px) {

static/images/info.svg

@@ -0,0 +1,2 @@
+
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M22 34h4v-12h-4v12zm2-30c-11.05 0-20 8.95-20 20s8.95 20 20 20 20-8.95 20-20-8.95-20-20-20zm0 36c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z" fill="currentColor"/></svg>

templates/article-sw.html

@@ -135,7 +135,7 @@
 
         <hr>
 
-        <p><a href="mailto:jackbondpreston@outlook.com">email me</a> to have a conversation</p>
+        <p><a href="mailto:jack@jackbondpreston.me">email me</a> to have a conversation</p>
     </div>
 </div>
 {% endblock %}

templates/article.html

@@ -16,6 +16,6 @@
 
     <hr>
 
-    <p><a href="mailto:jackbondpreston@outlook.com">email me</a> to have a conversation</p>
+    <p><a href="mailto:jack@jackbondpreston.me">email me</a> to have a conversation</p>
 </div>
 {% endblock content %}

templates/shortcodes/defref.html

@@ -0,0 +1 @@
+<p id="ref{{ n }}">[{{ n }}] <a href="{{ url }}">{{ url }}</a> <a href="javascript:history.back()" style="text-decoration: none;">(↑)</a></p>

templates/shortcodes/note.html

@@ -0,0 +1,12 @@
+<blockquote class="note">
+    {% set icon = load_data(path="static/images/info.svg") %}
+    <div class="icon">
+        {{ icon | safe }}
+    </div>
+    <div class="content">
+        {% if header %}
+        <p><strong>{{ header }}</strong></p>
+        {% endif %}
+        {{ body | markdown | safe }}
+    </div>
+</blockquote>

templates/shortcodes/ref.html

@@ -0,0 +1 @@
+{% if not nosup %}<sup>{% endif %}<a href="#ref{{ n }}" style="text-decoration: none;">[{{ n }}]</a>{% if not nosup %}</sup>{% endif %}