Site Design

Ryan Pek (b. 2001) | 3rd Year Undergraduate SUTD | Canned food enjoyer

Site Design

It’s built the same way I like writing code and solving problems: start small and from scratch, don’t hide complexity behind tooling, and make sure it works offline.

If something loads slowly, that’s probably on me.

This site is currently hosted on Linode until I figure out how to securely self-host it from my homelab.

There is just something nice about having just having a website that looks like a text document.

If we look at Stroustrup’s or the McMaster-Carr website, they just have everything accesisble at a glance. Both sites look information dense but because there are so little elements or moving parts in the page, it is actually pretty easy to understand what is going on at a glance.

Editing This Site with Vim

All the HTML and CSS for this site is written by hand using Vim with a minimal setup — no frameworks, no IDE bloat, just raw files, a questionable (because I have no clue how python implements it) python abstracted setup of a http server and keystrokes. Below is my vimrc at the time of writing this site:


    execute pathogen#infect()
    autocmd vimenter * hi Normal guibg=NONE ctermbg=NONE
    autocmd vimenter * hi EndOfBuffer guibg=NONE ctermbg=NONE
    syntax on
    filetype plugin indent on
    set autoindent

    set smartindent
    set smarttab
    set tabstop=4
    set shiftwidth=4
    set expandtab
    let g:html_indent_script1 = 1
    let g:html_indent_style1 = 1
    let g:html_indent_tag1 = 1

    set number
    set relativenumber
    colorscheme slate
    

Quick and dirty script I wrote to view the changes and run on a tmux pane, then switch to and ctrl-z the editing pane to modify the site on fullscreen:


    #!/bin/bash
    python3 -m http.server 8000
    

I write everything manually, treating HTML and CSS like LaTeX — structured, minimal, and readable. No build step, no minifiers, just :w and loads of :vsp to view other pages in split.