Colophon
This page details the architecture, technologies, and design principles behind this website. It serves as both documentation and a tribute to the tools that make this site possible.
Architecture
This website follows the islands architecture pattern, combining static site generation with dynamic islands of interactivity. Content is primarily static for optimal performance, with interactive components selectively hydrated only when necessary.
The site is built with Astro, a modern framework for building faster websites with less client-side JavaScript. It uses server-side rendering with a content collection pattern for blog posts.
Hosted on Cloudflare Pages with 100% renewable energy, the site leverages edge functions for dynamic content while maintaining near-instant load times.
Core Technologies
- Astro — Main framework for static site generation with dynamic islands
- JavaScript with JSDoc — Type-safe JavaScript without TypeScript
- TailwindCSS & UnoCSS — Utility-first CSS frameworks for styling
- Vue — Used for interactive components and islands
- MDX — Extended Markdown for writing blog posts with embedded components
- Swiper — For image carousels and sliders
The site integrates with the LastFM API to display recently played tracks, combining static assets with dynamic components for an optimal user experience.
Changelog
This section automatically displays the latest changes to the website from the GitHub commit history. Commits are categorized by type for easier navigation.
Feature
| Change | Author | Date | |
|---|---|---|---|
 | Add micro-interactions and simplify bookmark card design | Waleed H.Khan | |
| | Add new blog post about graph databases and LLM context | Waleed H.Khan | |
| | Add JSX dependency and new post for 'Friday Finds' post | Waleed H.Khan | |
| | Add new bookmark entry and update content module imports; redesign Advisory Roles section for improved layout | Waleed H.Khan | |
| | Enhance bookmark processing: add timestamp support for improved sorting accuracy | Waleed H.Khan |
Performance
| Change | Author | Date | |
|---|---|---|---|
| | Refactor bookmarks handling: update timestamp formatting and improve sorting logic | Waleed H.Khan | |
| | Update background color and component styles for improved consistency across the application | Waleed H.Khan |
Fix
| Change | Author | Date | |
|---|---|---|---|
| | Fixed some previous mistakes | Waleed H.Khan | |
| | Fixed interactions | Waleed H.Khan | |
| | Typo Fix | Waleed H.Khan | |
| | Update links and dependencies; fix last update check timestamp | Waleed H.Khan | |
| | Link Fix | Waleed H.Khan | |
| | Link Fix | Waleed H.Khan | |
| | Typo Fix | Waleed H.Khan | |
| | Bugfix: performance and simplify animations across components for improved user experience | Waleed H.Khan | |
| | Reent bookmark fix | Waleed H.Khan |
Other
| Change | Author | Date | |
|---|---|---|---|
| | Changed bookmarks on mobile | Waleed H.Khan | |
| | Replace BookmarkFeed with RecentBookmarks. | Waleed H.Khan | |
| | Update bookmarks | Waleed H.Khan | |
| | Update date formatting to use 'en-US' locale and UTC timezone for consistency across components | Waleed H.Khan |
Design Principles
The design follows Bauhaus minimalist principles with influences from Berlin brutalist architecture, focusing on:
- Performance First — Optimized for speed and efficiency, with a focus on core web vitals.
- Simplicity — Minimalistic design that avoids unnecessary complexity.
- Responsive Design — Works well on various devices and screen sizes.
- Accessibility — Designed to be accessible to all users, including those with disabilities.
- Content First — Prioritizes content and user experience over design elements.
Typography
Two carefully selected typefaces are used throughout the site:
Inter — A neo-grotesque sans-serif designed as a versatile typeface for user interfaces. Used for body copy and headings.
JetBrains Mono — A monospaced font created by JetBrains and distributed under the SIL Font License. Used in code blocks and miscellaneous accents.
Visual Elements
Colors are extracted from Untitled UI design system and TailwindCSS color system with personal modifications.
Icons are handpicked from Lucide for UI elements and Simple Icons for brand icons, served via Iconify.
Diagrams are created with Miro and Mermaid, while images in posts are sourced with proper attribution.
Inspirations
This website's design is influenced by multiple sources. Below is a list of inspirations in no particular order: