The idea
In 2017, I didn’t know how to create anything on the internet. Only how to use it. I wanted to change that. A personal site felt like the right place to start: learn how the web works, show that I could build on it, and have something to point to that demonstrated branding, design, and technology sense. It’s been evolving ever since.
Who it’s for
- The recruiter or hiring manager. Lands on the site, wants to quickly understand what I build and how I think. Needs a clear, fast-loading page that shows real work, not a wall of buzzwords.
- The cofounder, partner, or investor. Evaluating whether I can ship. Wants to see real products with real users, not mockups. Reads the case studies to understand how I scope, iterate and make trade-offs.
- The fellow builder. Curious about the technical decisions behind a project. Wants to see the journey, not just the outcome. Reads the case studies.
- Me. A forcing function for learning new tools and keeping a public record of what I’ve shipped. Every rebuild is an excuse to learn something new.
WordPress era
Problem: I needed the most accessible way to get something live. No coding experience, no framework opinions. Just a desire to put something on the internet.
Solution: Built on WordPress with the Pro theme framework. Over the years it grew into a full portfolio site: About, Work, Travel, Blog, Contact, a tools grid, project showcases, and domain listings. I’d add new pages periodically, mostly to challenge myself to see what I could build.
Outcome: The site served as a living resume for years. The Goodberry’s blog post became my most-trafficked page organically. But WordPress started feeling bloated for what I actually needed. Most of the platform’s power was going unused.
Astro rebuild
Problem: WordPress was overkill. I wanted a faster, leaner site that I could evolve quickly, and AI tooling made it realistic to build and maintain a code-first site without a CMS in the background.
Solution: Rebuilt from scratch with Astro 5, Tailwind CSS 4, and Cloudflare Pages. Went from a multi-page WordPress site to a single-page app-like experience with scroll-triggered reveals, a project showcase powered by content collections, and individual case study pages for each project. Self-hosted fonts, design tokens, dark mode, accessibility foundations. All things WordPress handled with plugins, now handled with code I control.
Outcome: The site loads fast, deploys on push, and costs nothing to host. The blog moved to blog.alekdarr.com so the main site stays focused. Old WordPress URLs redirect properly to preserve SEO rankings.
Design system
Problem: The WordPress site inherited whatever the theme gave me. Fonts, colors, spacing were all someone else’s defaults. I wanted a system I could reason about.
Solution: Built a full design token system in Tailwind CSS 4 using CSS custom properties via @theme. Typography follows a Major Third scale (1.25x ratio) from 0.75rem to 3rem. Spacing uses an 8px base unit. Two complete color palettes for light and dark mode with semantic tokens for text, backgrounds, borders and accents. Self-hosted Ubuntu for headings and Noto Sans for body text as WOFF2 with font-display: swap for fast paint.
Outcome: Every element on the site pulls from the same token set. Dark mode isn’t an afterthought. Colors meet WCAG AA contrast ratios, and the reduced motion media query disables all animations for users who prefer it.
Scroll reveals and motion
Problem: A static page felt flat. I wanted the site to feel alive when you scroll without being distracting or inaccessible.
Solution: Built an IntersectionObserver system that reveals elements as they enter the viewport. Elements start at opacity: 0 with a slight vertical offset and transition in when 15% visible. The endeavor cards stagger their reveals at 60ms intervals, capped at 480ms. The hero section uses animated gradient blobs that drift independently. All motion respects prefers-reduced-motion.
Outcome: The page has a rhythm to it. Sections build as you scroll. Nothing jumps or flashes. Users who disable animations get the same content, just without the motion.
Project case studies
Problem: The old site listed projects as screenshots with short descriptions. It didn’t tell the story of how things evolved or why they were built. Just that they existed.
Solution: Added a content collection for projects with Zod-validated frontmatter schemas (title, tagline, stack, URL, status, sortOrder). Each project gets its own page with a timeline format that traces the evolution from idea to current state: the problems, the decisions, and the outcomes along the way. Vitest validates that all frontmatter is well-formed, referenced images exist on disk, sort orders are unique, and every page has markdown content.
Outcome: The projects section is now the centerpiece of the site. Instead of a static portfolio, it’s a living record of how I think about building things.
SEO and redirects
Problem: The WordPress site had years of indexed URLs. A rebuild would break every inbound link and tank whatever organic traffic existed.
Solution: Mapped every old WordPress path to its new equivalent in a Cloudflare _redirects file. The blog gets a subdomain redirect to blog.alekdarr.com. Old /wp-* paths are blocked in robots.txt. Each page generates Open Graph and Twitter Card meta, JSON-LD structured data (WebSite + Person on the homepage, CreativeWork on endeavor pages), and canonical URLs.
Outcome: Search rankings preserved. The Goodberry’s blog post still drives traffic. Social previews render cleanly when links are shared.
Performance
Problem: WordPress page weight was high. Plugins, jQuery, theme CSS, admin overhead. The site was doing more work than it needed to.
Solution: Astro outputs static HTML at build time with zero client-side JavaScript by default. Fonts are self-hosted and preloaded. Images are optimized. The performance budget targets LCP under 2 seconds, CLS under 0.05, INP under 100ms, and total page weight under 500KB. View transitions use the native ViewTransition API through Astro’s ClientRouter for smooth page navigation without a full reload.
Outcome: The site is fast. No framework runtime, no unused CSS, no third-party render-blocking scripts. Deploys automatically on merge to main via Cloudflare Pages Git integration at zero cost.