When I first built this portfolio I went for an editorial look: big type, lots of whitespace, a typewriter effect. It worked, but it never felt like mine. I spend most of my day in a terminal, so this update turns the whole site into one.
The landing is a shell session
Every section on the homepage is now the output of a command you’d actually run:
fastfetchis the hero. ASCII art on the left, system info on the right. The keys follow fastfetch’s real modules, soKernelis my role,Uptimeis how long I’ve been shipping, andPackagesis the stack I use.ls -l ~/projectslists projects as directories, with symlinks pointing to where each one lives.ls -lt ~/blog | head -3shows the latest three posts, newest first.lazygitis my experience. Each job is a commit, and the patch panel shows the details for the selected one.mailis the contact form, built with the same panels as lazygit.
On wide screens there’s a small timeline on the left that tracks where you are on the page. At first it showed the commands too, but that repeated what every section header already says, so now it only shows the section titles.
One font
The previous version mixed a sans serif for headings with a monospace for code. Now everything uses Geist Mono: headings, body text, blog posts. A terminal has one font, so the site does too. I also dropped two font packages I no longer needed.
Colors from the theme
Red is the accent color, and the rest of the palette comes from the syntax highlighting colors. The color blocks under fastfetch used to be sampled from the ASCII art, so they never matched anything else. Now they’re drawn from the same theme tokens as everything else, so they follow light and dark mode.
ASCII everywhere
Decoration is made of characters, not images: the starry sky behind the page, the icon in the footer, and now a vim-style status line at the bottom of every post that shows the file you’re reading and how far in you are:
a-terminal-theme.md [RO] 42%What didn’t make it
Not every piece of ASCII survived. The first fastfetch logo was my initials in the ANSI Shadow figlet font, the way a distro shows its logo:
███████╗███╗ ███╗ ██╔════╝████╗ ████║ █████╗ ██╔████╔██║ ██╔══╝ ██║╚██╔╝██║ ███████╗██║ ╚═╝ ██║ ╚══════╝╚═╝ ╚═╝
Then came the picture. The first take used plain ASCII characters, each one colored to draw the image:
#%@%@@@@@@##@@*======**++=========++++++++=+++++++++++++++++*++*========+*%@@@@@%#########+====*#*####**######################## @@@@@@@@@%####*=======++=============++++*#%%###++++++++++++++++===========%@@@@%########*=====#%####*+==**##################### %@@@@@@@@@@@%%%+=======+===============+%@@%%**%%#++++++++++===============+@@@%#########+=====@@@%#*+=====**################### **%%%%%@@@@@@@@#====================+++++%@%%++*#@%+++++++==================*##*#########+=====******+=======*################## **###%%%%%@@%@@@*====================+++++*%#*#%%%%*=+++=====================*##########+======++=============+*##*############# #%%%%%#***#**#%@@#+========+=**+++====++++=++*****+++========================*########*+=+===========+++*++++==+%@%%##%@@%###### %%%#%%*+*++****%#%#=========+**+++====++++*++=+===+=================+#+======*#######*+==============+==+++++===+*#@@@@@@@%##### ****#%#*++*****%*+**+========++**===========+=++===================++++==++++#%###%#+**+=========================+#+*@@@@@@##### ++++**#*++++++**+****+============================================++++++++++*%@%%%%+==*++=========++==**++=======#@@+#@@@@@##### +++++++++++++++++++****+======================================+++++**+++++*#%@@@%%@%*##**=++=====*+==+***++=======+@@+@@@@%##### ++++++++++++++++++*******++==========================++++++=+++++++++++++*#@@@@@%%%@@%+++=#*==*=====++====+*%#+====+%+%@@@%##### +++++++++++++++++**********+++=======+++=========++++**++#+++++++++++++*#%@@@@@@@%%%*====##+++**+==*+==+**+*@@@#*+=====%@@@%#### ++++++++++++++++**************++=====+*+++++++++++++++++++++++++++++++*#@@@@@@@@%%%*===+#####**#@@+====++++@@@@@@%*=====%%%%#### +++++++++++++++*****************=======+++**++++++++++++++++++++++++*#%@@@@@@@@@@%*+==+#########%%#=+*+=+**#@@+=*=======+####### ++++++++++++++********************+++===++=++++++++++++++++++++++++*%@@@@@@@@@@@%+===+%%########%%#+==+#++*+@%=====+====+####### +++++++++++++**************************+++++++++++++++++++****##*#%%@@@@@@@@@@@#+=+*#%%#####%%%%%%*=+***++=+##====++====######## ++++++++++++*************************####************###########%%%%%%%@@@%%#*++***#%%#####%%%%#*++=+**+=++++#*===%*+==%@%@@@@%# +++++++++++**************************################################%%#*+++**##**########%%##*+++=====++=+=+##+==%%==*@@@@@@@%# +++++++++**************************##############################******+=+#%%%%%#%%###%%%@@#*+++++======*+===#@%==+#==#@@@@%%%## ++++++++*************************##############################%#+#*+**###%%########%%%%%%#*++++++======++====%%=+====%%%####### ++++++**************************###############################%##*+#%%%#%%#####%##%%%%#**++++++=+=====+======+@+=+==+@@%#%%%%%% +++++**************************#################################%%#%@%%%%@@@@@%%%%%%%#*+++=+++++++=============@%++==@@@%#%%%%%% +++**************************###############################%%%%%%@@@@@@@@@@%%@%%%%#*+++++=+++++=++*%@+=======+@@*===*@@%%%%%%%% ++*************************#############################%%%%%%%%%%@@@@@@@@@#+##%%##++++++++++==+#%@@@@+=+=====#@#=+===#%%%%%%%%% **************************###########################%%%%%%%%%%%%%%%%%%%%#+==*####+++++++=+**##@@@@%%%#++++===%@=#%=+=+###%%%%%+ ************************##########################%%%%%%%%%%%%%%%%%%%%%%%*==+****++===++*#%@@@@@@@%@@@@*++**==**=++=+=======++== ***********************#########################%%%%%%%%%%%%%%%%%%%%%%%%%*==#*++======#%@@@@@@@@@@@@@@@#+++*+=+======+========== ****#****************########################%%%%%%%%%%%%%%%%%%%@%%%%%%%%*=+*=======+%@@@@@@@@@@@@@@@@#++++++++======+++*+=+++== **#######**********################@@@@%%@%%%%%%%%%%%%%%%%%%%%%@@%%%%%%%@#=**=#+====%@@@@@@@@@@@%#%##+==+*++++=+++=+##**#*+=+=== ##%##%%%%%#*######%%%%##%%%%%%%%%@@@@@@@@@@@@%%%%%%%%@@@@@%%%%@@@%%%%%%@@#=+*@@*====#@@@@@@%%%*=======+===+++==+++++++++======== %%%%%%%%%%%%%%###%%%@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@#*+%%++====+@@#*+=============+++=++===*==============* %%%%%%%%%%%%%%#%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%@@@@@@@@@%#%%*+*+===+*=====++++====++++***++===+**======+++***+* %%%%%%%%%%%%%%%%%%%###%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#%#*+*+===+=+++=+++**++**+++++=+*====*+*#++++++**##**+ %%%%%%%%%%%%%@@@@@@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#**##+++++++*#%@@@@##@%*+**+==+*****+++*++*++=++===*+++==+**##*++++***#++* %%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*============++++#@@%#%@%*****+=+++++*+++=++++===+++**+*+==+***##*********+* @@@@@@@@%%%@@@@%###%#*#*****#%@@@@@@@@@@@@@%@@%%%%*++=++***#*++**++++=*%%#%%%*******+++=+++++**+++++++++*++=+===+***##*##**++++* @@@@@@@@@@@@@@#+===========++++%@@@@@@@*+**=**+=+*#####**##**+*+++*########%#********+*++++++*++**+*++=**===++==+*****++++++++++ @@@@@@@@%@@%*+==+++++**++*++++=+#@@%#**+++++==+++****#####*+**############%@#*******++**+++***+++++++=+*++++++++=++**+++++++++++ @@%%*+#*++**#****++****+++++*****#%+=++***#*++++++++++++*++++++*****#***##@@#*******++**+**+++++++++++#+++++++++++=+*+++++++++++ #+++====+++**#*###*#**++****#######**+++++**#*#*++*+++++****++++++=+*+*##%@%#******+++**+++++++++++++**+++++++++++++++++++++++++ *****++++++++++++**+++++**#*##********++++++*+*#**#####***************#%%@%#***************++++**+++*#++++++++++++++++++++++++++ *++******+++++++++***+++++++++*******++++++++++***++********#######**#%%@#*********#****+++++*******#+++++++++++*+++++++++++++++ +++++***#***####*******+*+*+++****+**++++*+++++++++++++*****#####**+#%%%#*******###***+++++********##++++++++*****++++++++++++++
It had a twin for light mode, with near-white areas left blank and every color pulled darker so it read as ink on paper:
+===- -*+ #@@@@@@##%%@@@@@@@@%%%%%%%%%@%%%%%%%%%%%%%%%%%#%%#@@@@@@@@%#+ =+*******+*%@@@@#******************************** ++**+#@@@@@@@%%@@@@@@@@@@@%%%%%%#*++***#%%%%%%%%%%%%%%%@@@@@@@@@@@= +*******+#@@@@@++****#%@%#********************** +--------- -===%@@@@@@@%@@@@@@@@@%%%%%@#=--=+*#+=+%%%%%%%%%%@@@@@@@@@@@@@@@%- -=+********%@@@@@- -+*#%@@@@@#******************** #*==+=+=------ +@@@@@@@@@@@@@@@@@@@%%%%%%+=+=%%**-+%%%%%%%%@@@@@@@@@@@@@@@@@#************%@@@@@*#####%@@@@@@%#****************** ##**++=++=-==-- #@@@@@@@@@@@@@@@%@@@%%%%%%*+*#+=+=+#%%%%@@@@@@@@@@@@@@@@@@@@@***********%@@@@@@%%@@@@@@@@@@@@@%#+*************** ++++=++*#*****+--*%@@@@@@@@%%##%%%@%%%%%%%%%####*#%%%@@@@@@@@@@@@@@@@%@@@@@@@#*********%@%@@@@@@@@@@@%%##%%%%@@%=-=+*+=--+****** ++++++########*+*+*@@@@@@@@@%##%%%@%%%%%%%#%%@%%@@%%@@@@@@@@@@@@@@@@%*%@@@@%@#+******#%@@@%@@@@@@@@@@%@@%%%%%@@@%*+- +***** ###*+++########+*###%@@@@@@@@%%##@@@@%%%@@@@%@%%@@@@@@@@@@@@@@@@@@%%%%%%%%%%%*+++++*%*#%@%@@@@@@@@@@@@@@@@@@@@@@@%*## =***** %%%%#**#%%%##########%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%##==++==#@@*%%@@@@@@@@@%%@%*#%%@@@@@@@* %* ***** %%%%%%%%%%%%%##########%@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@@%%@@%%%%%%%%##%%%%##*= -=+=-=#**##@%%@@@@%#%@@%###%%@@@@@@@%--% =***** %%%%%%%%%%%%%############%%@@@@@@@@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%%%%%%#*+= -=++--+#%%%*#@%#@@@@@%%@@@%%*=*%@@@@%=%= +***** %%%%%%%%%%%%################%%@@@@@@@%%%@%@@%%%%%%%%%*#%%*#%%%%%%%%%%%%#*+- -=+++#@@@@**%%%##%@@##@@#*### *#%@@@@@+ +**** %%%%%%%%%%%####################%@@@@@%#%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%#+- -=++#@@@%*****##+-=%@@@@%%#%- - +#@@@@@++++**** %%%%%%%%%#######################@@@@@@%%%%##%%%%%%%%%%%%%%%%%%%%%%%%#*= --+*%@@%*****++**+++@%#%@###* -%@#@@@@@@@%******* %%%%%%%%##########################%%%%@@%%%%%%%%%%%%%%%%%%%%%%%%%%#*+- -- +%@@@%++******++++*%@@%*%%#%-+@@@@@%@@@@#+****** %%%%%%%##########################***###%%%%%%%%%%%%%%%%%%####*****+=--- -+%@%#*+=+++*++===++#@%#*#%%@%**@@@@%#%@@@***++**+ %%%%%%###########################*********######************+++++++++===--=+*#%%##**++++++++=++*#%%@%##%@%%%%+#@@@+#%@@= =- -++ %%%%%##########################*******************************++++**++++#%%%#*++#**++++++++=+*#%%%@@@@@#%@%@%++%@@+=@@* ++ %%%%##########################****************************+++++++######%@%*+=+++++++++++===+##%%%%@@@@@@#%@@@* +%@%*@@+ --=++++ %%##########################***************************+++++++++*%*####*++++++++++++++===++#%%%%%%@@@@@@%%@@@@=+@%@%@@+=++++++++ %##########################**************************+++++++++++*+##++++++++++++++++==+*##%%%%%%%%@@@@@%@@@@@@% #@%@@%- =+++++++ #########################**************************+++++++++++++++*+-=++=- ---=+++==+*#%%%@%%%%%%%@@@@@@@@@@@@@ =%%@@- =+++++++ ########################************************++++++++++++++++++ ++-++++*#%%%%%%%%%%%@%%#+ %@@@@@@@% #@@@* -++++++++ ######################***********************+++++++++++++++++++++ -*%*+++**%%%%%%%%%%%@%+=- %@%@@@@@* *@%@@@++++++++++ #####################***********************+++++++++++++++++++++++===++=+%@@*****%%%%%%%@%##*+ =++*%%%%@@@+-@++@%@%+*++++++% ####################*********************++++++++++++++++++++++++++++++++#@@%*###%%%@@%%#+= -=--- ##%#*@@##@%%@%@@@@@@@%%@@ ##################*********************++++++++++++++++++++++++++++++++++#@@*#%%@@@@@%*= +%%%#%@%%@@@@@%@@@@@@@@@@ ####*############********************++++++++++++++++++++++++++=-=+++++++*@##@@@@@@@#= *%%#%%%%%@@@@@@%%%#%%%%%@@ ##**++****#####*******************+=---++-=+++++++++++===++++== =====+=-*@##@*%@@@@= -=*++*%@@%##%%%@%%%@#***#*#%%%@@@ +++++++++++**+****+=+++*+=+++==+==- -- -+++++++=- =++= -======- *%%*--#@@@@* -=++#@@@@@@%%@@@%%%@@%%%%%%%#%@@@@@@@@ +++++++++++++++*+====--==-------- -- - -======= - *#%==%%@@@@% =**%@@@@@@@@@@@@@%%%@%%@@@#%@@@@@@@@@@@@@# +++++++++++==+++==++===---------- --- -== +++=#%#%@@@%#@@@@@%%%%@%@@%%%%####%@@@%**@@@@@@%%%#*### ++++++============+++++---------- --- - --- +*++*##%@@@%%%#%@%%%*#%%##%%%%%%%#@@@@##**%%%#%%#***##% ===============-=--==+=---------- - +*##**%#%%%%##++ -*+-=*###%@@%#####%%##%%##%%%%@@@#%#%@@%##**#%%%##***%%# ========++==--=--- --- -- -=#@@@@@@@@@@@%%%%%* =*+ +#####%@%%%####%%%%%%%@@%%%%##%#%@@%###+*#########%# ===----=====---=+**++#*#####*=- - =- ++==*%%@#####**####%%%%%#=+*+=+########%%%%%%%%###%%%%%%%%*%%@%@@@###*+****##%%%## -==--------- *%@@@@@@@@@@@%%%%+ -*%*#@##%@%#++***##***###%###****++*+=+###########%%%%########%%@##@@@%%@@%#####%%%%%%%%%% --------=--=*#@@%%%%%##%%#%%%%@%*--=*##%%%%%@%%%%####*****####****++****+*+-+#######%%##%%####%%%%%%%@##%%%%%%%%@%%###%%%%%%%%%% -+=#%**%%#**########*#%###%####*++%@%%##**#%%%%%%%%%%%##%%%%%%#####**#*+*=-*##############%%%%#%%%%%%*%%%%%%%%%%%@%##%%%%%%%%%% *%%%@@%%%%%#********####*###*******##%%%%###***#%%#%%#%######%%%%%@%###*+=-+*######%%%##%%%%%%%%#%%%%*#%%%%%%%%%%%%%%%#%%%%%%%%% ######%%%%%%%%%%####%%%##**#***###**##%%%%%####*#*******###*##########*++-+*###############%%%%####%#*%#%%%%%###%%%%%%%%%%%%%%%% #%%#*#####%%%%%%%#####%%%%%%%%########%%%%%%%%%###%#########*******##++=-**######****###%##%########+#%%%%###%%##%%%%%%%%%%%%%%% %%%%%#*#**##****#########%##%%#########%%#%%%%%%%%%%%%#####*******#%*+==*###**#*****###############**%%%%%########%%%%%%%%%%%%%%
Both got replaced by the ANSI half-block version that’s there now. Each character cell holds two pixels, one in the text color and one in the background, so it has twice the vertical detail.
The footer had a cat for a while, before the current icon took its place:
/\_/\
( o.o )
> ^ <I also tried a Matrix-style rain of falling characters as the background. It was too busy, so the stars stayed.
The blog
Each post now opens like cat post-name.md and shows the author with a small avatar. Click the avatar and a profile panel opens. It’s a native <dialog> element, so Escape, focus handling and the backdrop come for free.
Less of my name
My name used to show up in the header, the fastfetch title, the file owners in every ls and the footer. That was too much. Now the header is just ~/, the fastfetch title is a generic user@localhost, and my name appears once, in the User row, where it belongs.