Web Portfolio/CV Website

Once my co-op terms came to a close, I wanted an easier way to show off my projects, work history, and other information, ouside of my Resume. I had been struggling to pick skills and projects to show off on my Resume, so I thought why not throw it onto a website and reference to that!

I had already made my Etoolbox website from scratch, how hard could this be? Well I didn't know what I was getting myself into.

Thankfully, I discovered the existence of Static site generators -- more specifically a tool by the name of MkDocs. This was a static site generator that runs using :simple-python: Python, and utilizes :simple-markdown: Markdown to create each page.

I was a big fan of using Markdown for creating each page because it meant I can spend more time writing about my projects and less time adjusting HTML elements and playing around with CSS styling.

The MkDocs site started out a little bland, but eventually I was able to incorporate it into my project plans, updating my blog page as I worked on projects.

2025-02-16

Setup

I used MkDocs Material by squidfunk. It was sleek looking, and had a wide variety of features, themes, and plugins.

MkDocs utilizes a file named mkdocs.yml to configure the site. In this file I include the extensions I want, the plugins, and configure themes. Additionally, in the yaml configuration file, I specifiy the navigation tree and define the markdown files I want to display on the site.

Below I show the different Here are some of the plugins, extensions, and features I utilize,

Plugins

plugins:
	- glightbox
	- search
	- blog
	- include-markdown

Extensions

markdown_extensions:
	- attr_list
	- md_in_html
	- admonition
	- tables
	- pymdownx.details
	- pymdownx.blocks.caption
	- pymdownx.blocks.html
	- pymdownx.details
	- pymdownx.superfences
	- pymdownx.keys
	- pymdownx.arithmatex
	- pymdownx.betterem:
		smart_enable: all
	- pymdownx.caret
	- pymdownx.critic
	- pymdownx.tilde
	- pymdownx.highlight:
		anchor_linenums: true
		line_spans: __span
		pygments_lang_class: true
	- pymdownx.snippets
	- pymdownx.tabbed:
		alternate_style: true
	- pymdownx.inlinehilite
	- pymdownx.magiclink
	- pymdownx.mark
	- pymdownx.smartsymbols
	- pymdownx.tasklist:
		custom_checkbox: true
	- pymdownx.emoji:
		emoji_index: !!python/name:material.extensions.emoji.twemoji
		emoji_generator: !!python/name:material.extensions.emoji.to_svg
		options:
			custom_icons:
				- docs/overrides/.icons
	- toc:
		permalink: true
		toc_depth: 3

Themes & Features

	features:
		- navigation.tabs
		- navigation.sections
		- navigation.top
		- navigation.path
		- toc.follow
		- content.tabs.link
		- navigation.footer
		- search.highlight
	
	
	palette:
	# Palette toggle for automatic mode
	- media: "(prefers-color-scheme)"
	primary: black
	accent: blue
	toggle:
		icon: material/brightness-auto
		name: Switch to light mode

	# Palette toggle for light mode
	- media: "(prefers-color-scheme: light)"
	primary: black
	accent: blue
	scheme: default 
	toggle:
		icon: material/brightness-7
		name: Switch to dark mode

With the site setup complete, I began writing my project and about sections.

Hosting the site

To host the site, I needed to generate it first. As I write the markdown pages, I could preview how the site would look by running the mkdocs serve command in powershell, but eventually for simplicity I turned it into a simple batch script to click on.

@echo off

mkdocs serve --livereload --watch-theme
pause

When I was ready to host the site, I chose to use Cloudflare, as I could host a static webpage for free so long as it is under 20,000 files, and each file is under 25 MB each.

The challenge came when I would write a project page that includes a video. I would always exceed the 25 MB file size and spend time searching for which file was the culprit. To do some pre-screening, I wrote a batch script that checks all the file sizes, and if all are under the file size limit, builds the site, compresses it, and gets it ready for upload to Cloudflare.

@echo off

:: make site
mkdocs build

:: Get Current time
for /f %%a in ('powershell -NoProfile -Command "Get-Date -Format yyyy-MM-dd_HHmm"') do set "fullstamp=%%a"

:: Make sure all files are less than 25 MB as per CloudFlares requirements for pages
setlocal enabledelayedexpansion

set SEARCH_DIR=%~dp0site\
set FILE_SIZE=24000000
set COUNTER=0
echo "%FILE_SIZE%" | findstr "\"[0-9][0-9]*\"" > NUL
if errorlevel 1 (
    echo Usage: %~nx0 directory file_size_in_bytes
    echo Lists all files in given directory and its subdirectories larger than given size.
    exit /b 1
)
if not exist "%SEARCH_DIR%" (
    echo "%SEARCH_DIR%" does not exist.
    exit /b 1
)
for /R "%SEARCH_DIR%" %%F in (*) do (
    if exist "%%F" if %%~zF GEQ %FILE_SIZE% echo %%F && set /A COUNTER=COUNTER+1
)
if %COUNTER% GTR 0 (
	echo %COUNTER% Files greater than %FILE_SIZE% bytes found.
	pause    
	exit /b 1
)

cd site
tar acvf "../site_%fullstamp%.zip" *
cd ..
REM rmdir /S /Q site
timeout /t 10

A disclaimer, some of the script is bodged together by various sources on StackOverflow. But it still works to this day, and catches all files that are larger than the file limit, saving me my time and sanity.

Conclusion

I don't have too much else to write about on this project, as it was more of a laundry-list item relative to the rest of my projects. I enjoy the functionality it provides me, and was very easy to get set up.