MIT licensed.

This repository hosts all assets and source code used to build the website showing the internet who I am.

In economics and academia, uniquely designed websites that are optimised and follow best practices are rare. My website is an exception.

View it here: Paul Le Tran dot com

(back to top.)

If you discover a vulnerability/error/mistake in the production code of my website, please refer to the instructions found in SECURITY.md for instructions on reporting these issues. I will then address the problem as soon as possible.

(back to top.)

Below are some features of my website that I feel are noteworthy:

• The website source code is entirely vanilla HTML5, CSS, and JS. This was consciously done to make the source code (and all of its mistakes) completely understandable to all programmers

• Entire website is written in semantic HTML

  • Usage of div and span tags are strictly for styling purposes and kept at a minimum
  • Semantic HTML tags also comply with ARIA accessibility requirements (e.g., sections and articles having headings)
  • Every img tag has a relevant alt attribute for both screen reader compatibility and legal requirements

• HTML5 and CSS code of every website page pass the W3C validators with no errors

  • HTML5 code is checked using the Nu HTML checker
  • Usage of the modal pseudo-class in reset.css results in the W3C CSS validator to throw an error because the pseudo-class is currently in Selectors Level 4. However, because the pseudo-class works as intended in all modern browsers, I do not view this as an actual CSS code error
  • W3C "validation" links are displayed in the footer of every website page
    • Links allow for quick re-validation of every page
    • I am not including the links into my project sub-sites (e.g., econ-grad-app-deadlines) The reason for this is because these sub-sites are generated using the default GitHub Pages theme of Cayman. As a result, the W3C validation results wouldn't be reflecting my own design and code

• Entire website uses JetBrains Mono as its sole font. This choice is because the font is not only clean and legible (e.g., increased letter height), but has ligature support, italics support, wide language support, and is both free and open source

  • The font is also my font-of-choice for all development interfaces

• Every website page is fully interactive within 2 seconds, including on 3G mobile connections. This speed is achieved by:

  1. All CSS and JS are minified at the source code
  2. All HTML, CSS, and JS are Zstandard compressed via Cloudflare to browsers, with Brotli then Gzip compression as a fallback order
  3. remedy.css and reset.css are both inlined in the head tags
  4. Critical CSS for initial rendering of every page are inlined in the head tags
  5. All non-critical CSS are preloaded with low priority then lazy-loaded in such a way that works with any kind of strict Content Security Policy that disallows unsafe-inline
  6. Web fonts (i.e., JetBrains Mono) are preloaded with high priority, loaded with font-display: swap; and use locally hosted fonts before pulling from origin or cache. The website's fallback font, Courier New (Courier for MacOS), has been tuned and optimised to mimic JetBrains Mono. This makes the web font "nice to have" rather than a critical component to experiencing the website Thus, the font property and attribute prevents FOIT allows for JetBrains Mono to appear on first page view without being a render-blocking resource
     • I will retune my fallback fonts using the new @font-face attributes (e.g., ascent-override) when they have broad browser support
  7. All JS are preloaded with high priority then defer loaded
  8. All graphics are served in compressed .webp format (with compressed .jpg as a fallback)
     • All below-the-fold graphics are lazily loaded for minimal FOIT

• Entire website is designed to be responsive for almost all common display resolutions, both desktop and mobile

  • This design covers displays as small as the JioPhone2 to as large as widescreen desktop monitors
  • Uncommon display resolutions such as the Galaxy Fold, Surface Duo, and Nest Hub are also supported

• Entire website is designed to be accessible for all input types

  • Every page is verified as WCAG 2.2 compliant and displays the "compliance" links in the footer
    • Links allow for quick re-validation of every page
    • I am not including the links into my project sub-sites (e.g., econ-grad-app-deadlines) The reason for this is because these sub-sites are generated using the default GitHub Pages theme of Cayman. As a result, the WCAG 2.2 compliance results wouldn't be reflecting my own design and code
  • Every page, menu, and link can be navigated using a mouse, keyboard, or touch
  • Research and More pages feature live filtered search for publications with ARIA22 accessibility by explaining what occurs in the live search when keywords are typed and displaying number of results in real-time

• Every website page has a Google Lighthouse of 100/100 (99/100) on desktop (mobile).

  • I am not including the Google Lighthouse scores of my project sub-sites (e.g., econ-grad-app-deadlines) This decision is because these sub-sites are generated using the default GitHub Pages theme of Cayman. As a result, the scores wouldn't be reflecting my own design and code

• Favicon support for every platform (with different favicon embedded for night mode support).

(back to top.)

• Vanilla HTML5
• Vanilla CSS
• Vanilla JS
• GitHub Pages for hosting
• Google Domains for the awesome domain
• CloudFlare for DNS management and security, full SSL/TLS encryption mode, HTTPS enforcement, Argo smart routing, Zstandard compression, tiered cache, Cache Reserve, the fancy green lock 🔒, and a whole lot more
• git for source control

(back to top.)

• 100/100 (99/100) for every website page on desktop (mobile) for You can't get anymore optimised than that (technically you can, but marginal utility is negative at that point lol)
  • To view the full reports, please visit this subdirectory and paste the respective JSON file into the Lighthouse Report Viewer

(back to top.)

Below are the awesome resources used to make my website as optimised as possible:

• ymatuhin's online interactive demo of Autoprefixer CSS
• Mario Ranftl's google-webfonts-helper
• Monica Dinculescu's font-style-matcher
  • Extra credit to Michael Duve's Auto Font Matcher that optimises letter-spacing and word-spacing attributes algorithmically.
• FontSquirrel
• Jen Simmons' remedy.css
• Elad Shechter's reset.css
• James Ross' method to preload and lazy-load CSS without any inline scripts
• Google Closure Compiler for minification of JS in strict mode
  • Extra credit to Dimitrii Tikhomirov's web-based UI and REST API for Closure Compiler
• James Hill's Minimal Google Analytics 4 Snippet with localstorage support (2kb v. 179kb+ when compiled with Google Closure Compiler)
• Real Favicon Generator
• jonasjacek's comprehensive robots.txt
• Hilman Ramadhan's live filtered search
• Harry Roberts's ct.css for optimising head tag elements
• Jonas Ohlsson Aden's critical path CSS generator
• Unminify and its wonderful CSS prettification for quick updates of critical inline CSS
• Kevin Powell's tutorial on CSS variables
• Google Squoosh for image compression and conversion using the best-in-class codecs

(back to top.)