Professional Profile
The working history behind the projects
Experience, skills, and selected work give hiring teams a direct route through the career behind the code.
See this surface →More room than an interview
I started albertoduran.com after I was laid off. A résumé can list experience, but it cannot show much of how I think or build, and a short interview rarely leaves enough time to walk through the work properly.
What began as a personal introduction grew into a portfolio, a set of project case studies, and a place for all kinds of writing. Astro resolves the content, routes, diagrams, charts, and responsive images before deployment, so the site itself can demonstrate the engineering choices I want readers and hiring teams to inspect.
Choose how deep to read
Visitors arrive with different amounts of time and curiosity. They can scan the profile, open a project overview, read one focused article, or follow a complete architecture vault without moving to a separate product.
Project showcases
A useful overview before the source tour
Each landing page explains the problem and the result, then links to the technical record for readers who want the implementation.
See this surface →The Journal
The decisions that do not fit on a project card
Standalone articles and structured vaults document architecture, debugging work, tradeoffs, and contributor boundaries.
See this surface →Technical media
Diagrams and charts stay close to their source
Mermaid and ECharts produce static SVG during the build, so technical visuals remain part of the article when JavaScript is off.
See this surface →From source to reader
Source files move through named ownership boundaries. Collections and manifests decide what publishes, integrations handle visual rendering, Astro emits the complete file graph, and Workers Static Assets serves it. The browser starts with a useful document.
The separation gives each failure a smaller search area. A broken runtime control can be debugged without treating the content manifest or generated page as the same problem.
Flowchart
The browser can take the day off
Both examples below are SVG produced during the build. The Mermaid source travels through the diagram integration, while the ECharts option uses the server renderer. Neither visual waits for client-side JavaScript to become readable.
Mermaid source becomes a static diagram
This flow is stored as readable Mermaid text in the repository. The build converts it into themed SVG and places the result in the page.
Flowchart
ECharts renders before hydration
This chart uses an illustrative dataset and the same EChart component available to journal authors. No hydration mode is set, so the output stays a static SVG by design.
Decisions that shape the experience
Content becomes routes before deployment
Collections validate MDX, the manifest applies publication rules, and Astro generates every known article route before deployment.
Read the implementation detail →Visual explanations arrive as static assets
Mermaid diagrams and ECharts figures render during the build. The browser receives useful SVG before any optional interaction starts.
Read the implementation detail →Runtime code stays deliberately narrow
Theme persistence, overlays, and article navigation improve complete HTML instead of becoming prerequisites for reading it.
Read the implementation detail →Production receives finished work
Workers Static Assets serves the generated file graph. It does not need to understand MDX, vault rules, or page assembly.
Read the implementation detail →The Journal has publication rules
An article enters the site as MDX, then the publication manifest gives it a route, navigation context, breadcrumbs, and a place in the reading sequence. Authors work with content while the build applies those rules.
Typed content and visible publishing rules
Schemas and manifest tests catch malformed metadata, draft leaks, missing images, and broken vault structure before routing begins.
Follow the publishing detail →Directory-driven vault navigation
Folders become ordered reading paths with nested sections, breadcrumbs, responsive navigation, and previous or next links from one model.
Follow the publishing detail →MDX with a controlled component vocabulary
Articles can use editorial components, diagrams, charts, code, and tables while keeping typography and static output consistent.
Follow the publishing detail →A complete page before enhancement
The browser receives a complete document first. It then handles facts the build cannot know, including the reader's theme preference, viewport, focus position, scroll state, and local timezone.
Theme continuity without a flashAn inline bootstrap applies the initial preference, while a small manager preserves it across Astro route swaps.Read the design decision →Navigation that respects the reading surfaceVault explorers, heading tracking, pagination, and mobile overlays adapt without making the article depend on client rendering.Read the design decision →Images and fonts prepared ahead of timeAstro prepares responsive image variants and registered fonts during the build, with selected preloads for the first reading surface.Read the design decision →Generated output receives a final passVite bundles assets, the HTML minifier protects code fragments, and the build emits inspectable files for deployment.Read the design decision →
From validation to deployment
- Validate source
- Resolve content
- Render assets
- Test output
- Deliver files
Tests follow the failure boundary
Astro diagnostics protect source and content shapes. Vitest covers manifest rules, content loaders, the JavaScript bundle budget, and HTML minification. A deterministic production build replaces unstable outside inputs, and Playwright checks selected reader behavior in Chromium.
Hosting serves the finished file graph
Production receives complete routes, metadata, fonts, images, themed diagrams, chart SVG, CSS, and runtime modules. Workers Static Assets serves that file graph without assembling journal pages per request.
The outcome
One site connects who I am, what I have built, and how I work.
- Hiring teams get a concise professional overview with technical evidence close at hand.
- Developers can learn from the architecture, tradeoffs, diagrams, and tests behind a working project.
- The portfolio and journal remain useful with JavaScript disabled, including their technical visuals.
Technical deep dives
Follow the project beyond the landing page. Each publication focuses on one architectural boundary, implementation decision, or operational lesson.
Four repositories, one artifact
- Four repositories, one artifactSection overview3 min read · #architecture #astro #cloudflare
The system behind the site: what each repository owns, what is left in the app, and the single static artifact they all serve.
- What is left in src after extraction4 min read · #architecture #astro #bloomwright
The app got smaller when the packages left. A tour of what remains in src, and one publication change traced through the boundaries that stayed.
- Working across four repositories4 min read · #astro #bloomwright #architecture
The Node 22 devcontainer, how github dependencies resolve, and what a source-shipped package asks of the workspace that consumes it.
- From dist to the reader4 min read · #cloudflare #performance #architecture
How the static build reaches Cloudflare Workers Static Assets, the caching and security headers it ships, and where configuration ends and platform capability begins.
Nothing renders in the reader's browser
- Nothing renders in the reader's browserSection overview3 min read · #mermaid #echarts #architecture
How the site turns diagrams and charts into static SVG at build time, and the rule that decides which tool draws what.
- The Mermaid pipeline, scan to emit4 min read · #mermaid #astro #performance
The build integration that finds diagrams, batches them, checks a cache, renders the misses, and writes themed SVG assets.
- Why rendering lives outside the build4 min read · #mermaid #cloudflare #architecture
The site deploys to Cloudflare, so why is there a second Cloudflare thing? The four-part answer, and the honest counterweights.
- The render service, end to end5 min read · #mermaid #cloudflare #architecture
The full round trip from the build to the Cloudflare Worker and back, what happens inside while the build waits, and two live mismatches.
- When the renderer is unreachable4 min read · #mermaid #cloudflare #testing
The provider chain that keeps a render outage from ever crashing a build, and the fixture mode that keeps tests offline.
- Making a raw SVG safe and themeable5 min read · #mermaid #css #architecture
The HAST pass that strips scripts, rewrites ids, scopes CSS, and merges light and dark into one asset, plus the palette that survives the network.
- Charts as static SVG, with optional life4 min read · #echarts #performance #astro
How an ECharts options object becomes a server-rendered SVG at build time, how it is cached and emitted, and the five ways it can wake up.
- The published chart catalog8 min read · #echarts #charts #mdx
Every chart family rendered in a real article, with a note on the question each one answers, so an author can choose by looking at output.
The packages behind the site
- The packages behind the siteSection overview5 min read · #bloomwright #architecture #astro
Why albertoduran stopped owning its UI kit and render engines, and how it now consumes them as two versioned packages.
- bloomwright-ui as a component kit7 min read · #bloomwright #daisyui #css
The four component families, the pure logic layer that keeps fences and components identical, and why icons ship as props.
- bloomwright-ui as a render core6 min read · #bloomwright #mermaid #echarts
How a package that was meant to stay a dependency-free leaf deliberately reversed course and absorbed build-time rendering.
- bloomwright-mdx, extraction and glue6 min read · #bloomwright #mdx #astro
The integration that turns code fences into rendered output, why it registers before mdx, and why it no longer renders Mermaid itself.
- The three inversions7 min read · #bloomwright #architecture #mermaid
Extraction worked because three decisions moved from the packages to the app: what publishes, where bytes are cached, and who renders.
- What extraction actually cost6 min read · #bloomwright #css #architecture
The honest counterweight to the extraction story: duplicated CSS, git-ref versioning, source-shipped compilation, and two bugs only the real build found.
The publication compiler
- The publication compilerSection overview3 min read · #mdx #content #astro
Writing an article is really compiling one. The path a candidate MDX file takes from schema, through policy and routing, to a rendered page.
- The schema, and what it refuses3 min read · #content #mdx #astro
The live Zod schema every publication satisfies, the glob that hides partials, and the one field the schema accepts but the page never shows.
- Drafts, vaults, order, and read time4 min read · #content #astro #architecture
The manifest is where publication policy lives. Draft scoping, the invariants a vault must satisfy, image inheritance, ordering, and the read-time formula.
- Code fences as an authoring API4 min read · #mdx #daisyui #bloomwright
Why an author writes a fenced block instead of importing a component, how parity is guaranteed, and when to reach for the component after all.
- Satteri, the component map, and highlighting4 min read · #mdx #astro #bloomwright
The Markdown processor, why the fence integration registers before mdx, how Markdown elements become components, and how code gets two themes.
- Static paths and the article shell4 min read · #astro #content #architecture
How a catch-all route turns published entries into a finite list of pages, and the shell of sidebars, dock, and overlays that surrounds every article.
The visual system after extraction
- The visual system after extractionSection overview3 min read · #css #daisyui #bloomwright
What the app still owns of its look, what bloomwright-ui now owns, and where the line between them falls after the UI kit moved out.
- The ordered stylesheet and its duplication4 min read · #css #daisyui #bloomwright
One global stylesheet imported in ten numbered stages, the DaisyUI parts it opts into, and the duplicated partials the extraction left behind.
- Themes, tokens, and three deadlines4 min read · #css #daisyui #runtime
DaisyUI 5 OKLCH themes and semantic tokens, and the three separate moments a theme has to be correct, each owned by a different layer.
- The runtime boundary, split across repos4 min read · #runtime #astro #bloomwright
Every browser enhancement improves a baseline that already renders. The custom elements that do it now ship from two repositories, and why failures stay local.
- Live data at build time5 min read · #astro #content #runtime
Consuming an unstable third-party source during the build, validating it like any other content, and letting the browser finish the one job the build cannot.
- Moving through an article4 min read · #runtime #astro #architecture
The app-owned reading experience: heading tracking with sticky offsets and page edges, the vault explorer tree, and previous-next pagination.
- Project pages and the profile4 min read · #astro #architecture #content
The surfaces outside the journal: project landing pages that act as vault front doors, and the recruiter-facing profile built from typed data.