Personal Website

Brief Description

This website was built in Sveltekit, then migrated to Astro for better performance and layout dedicated for static website.

• Implemented a static website with minimalistic design in Typescript and tailwindcss to showcase my portfolio including projects and notes.
• Implemented a Rust program to extract the first heading, last modified date, and creation date of markdown files and use them as frontmatters in Astro.
• Implemented a remark plugin remark-h1-to-title.ts to extract the first heading of a markdown file and use it as the title of the page.
• Implemented a remark plugin remark-updated-date.ts to extract the last modified date of a markdown file in git commit history and use it as the updated date of the page.

Technical Details

How does flex wrap work?

• flex-wrap

Centering a flex container with left-aligned items

• grid-template-columns with auto-fill seems feasible but not working
• grid-auto-flow: column seems feasible but somehow not working (20 minutes spent)
• ghost element seems to be the only way to center a flex container with left-aligned items
  • empty cells
  • fillers
• How to center a flex container but left-align flex items

References

Several days were spent to conduct a research on how to build a good personal website. Here are the websites that I found inspiring.

Collections

• What’s the best portfolio website you’ve ever seen? — Reddit — great discussion and honest votes
• awesome-dev-websites — really awesome list of dev websites
• Astro Themes — checked all 14 pages of themes with blog and portfolio categories as of 2024-09-17

Minimalistic design

• Astro Cactus — design, main template
• astro-blog-zozo — dark mode, design, list style, tag page, font
• markhorn.dev — design
• Astro Sphere — home page, background, design
• devolio — design, list style with tags
• astro-gaia — design, list style, tag, navigation
• astro-void — list style with photos
• Astro Nano — design
• blogster-bubblegum — list style
• blogster-minimal — list style
• resume — list style
• devfolio — home page, background
• Nemanja Mitic — list style with photos, tag filter
• Typography — typo, background
• Simon Camacho — home page, minimalistic design, background color
• eva.town — home page, now
• AstroPaper — tags navigation, search page, dark mode
• the-void — list style with photos and tags
• astro-tech-blog-ten — design, dark mode, tags
• astro-agency02 — about page, project page, blog list style, content bottom navigation
• godruoyi — blog list, blog content style, timeline page, personality
• astro-simple-portfolio — home page, animation
• saastar — design, list style
• Youssouf

Academic

• Matti — blog structure, tags, toc
• TK Kinoshita — minimalistic design, list style, font, content, tags
• dennybritz: Great articles on AI, rust, gaming, visualization, minimalistic design, content
  • poe-crafting — rust, ai, visualization
  • Deep Learning ideas that have stood the test of time
• distill.pub — content, design, list style
• Amit Chaudhary — blog content, list style with photos, one-liner, tag filter
• Andrew M. Webb — minimalistic design, list style with photos, one-liner
• Cameron Raymond — tag filter
• Andrej Karpathy blog — blog content
• Chip Huyen — blog content
• otoro.net — home page, list style with gifs, blog content

Data journalism

• New York Times Graphics
  • 2023 year in graphics
• Bloomberg Graphics
  • 2023 in graphics
• Washington Post Graphics
• FiveThirtyEight
• The Pudding

Linux OS alike

• vivek9patel
• dustinbrett

Visualization

• Italia Personal Finance — great design, layout, use of colors, blog list, preview photo aspect ratio
• hakim.se
• lynnandtonic.com
• Not a Number
• colah’s blog
• adamhartwig
• robbowen

Typography

• rauno.me — typography, side nav
• shud.in

Useful Plugins

• pagefind — search for pages in your static site
• Giscus — comments for your static site
• quarto — An open-source scientific and technical publishing system
• Intersection Observer API — for highlighting current section in table of contents