Go back to articles

Building the Spotlight Portfolio

A recap of three productive development sessions: adding a Services section, redesigning Projects with case study fields, building a Studio component library, and launching a full contact form with captcha and email notifications.

Devlog: Building the Spotlight Portfolio — April/May 2026

Over the past three days I shipped a significant chunk of features for this site. This post is a quick recap of what got built, why, and what’s next.

v0.3.0 — Services and a Redesigned Projects Page

The first major milestone was adding a Services section. I wanted a clean way to communicate what I actually offer to potential clients — not just a list of past projects, but a description of the kinds of engagements I take on. The result is a new Service entity with full admin CRUD backed by a LiveView, stored in PostgreSQL alongside everything else.

At the same time, the Projects page got a meaningful upgrade. Each project can now carry full case study content: a challenge description, solution approach, and documented results. These fields are optional, so existing projects don’t break, but for key case studies they allow me to tell a proper story rather than just show a title and a screenshot.

The admin interface for projects was extended accordingly — longer-form fields managed through the new markdown editor (more on that below).

v0.4.0 — Site Refactor, Studio Components, and the Contact Form

This was the bigger session. A lot of things came together here.

Studio Component Library

I extracted a set of reusable Phoenix components into a studio/ namespace. These are purpose-built for the public-facing pages and map closely to the layout patterns from the Tailwind Plus Spotlight design:

  • page_intro — hero-style introductions with title and lead text
  • section_intro — section headings with optional description
  • grid_list — flexible grid layouts for projects, services, and similar collections
  • content_list — vertical lists for articles and structured content
  • stat_list — metrics and key numbers
  • tag_list — inline tag/badge collections
  • border — subtle horizontal separators

Having these as proper Phoenix components makes the templates clean and consistent. Changing the visual style of a pattern now means editing one component, not hunting through templates.

Markdown Editor

The admin previously used plain textareas for long-form content. I built a proper markdown editor component — a SpotlightWeb.Admin.MarkdownEditor Phoenix component backed by a LiveView JavaScript hook. It provides a split-pane preview, toolbar shortcuts, and live rendering of the markdown output. It’s wired to the existing Earmark pipeline so what you see in the admin preview is exactly what appears on the public site.

Contact Page and Email Notifications

The site now has a working contact page. The form is protected by a hCaptcha integration (via Spotlight.Captcha) and on successful submission fires an email through the Spotlight.ContactNotifier module using Swoosh. The page itself was fully rebuilt in Phoenix templates, replacing a placeholder.

Profile CTA Fields

Profiles gained two new fields: a call-to-action label and URL. These surface on the home page and allow me to direct visitors toward a specific action — whether that’s scheduling a call, downloading a CV, or reading a specific page.

Admin QoL Improvements

Across the board, admin LiveViews got polish: better form layouts, consistent use of admin_form_container, improved validation feedback, and fixes to translation group IDs that were breaking the bilingual admin workflow.

v0.4.1 — Seeds Cleanup and Content Strategy

The final session was shorter but strategically important. The seeds file had ballooned to nearly 2000 lines of generated article and project content. That content doesn’t belong in seeds — seeds are for structural demo data, not for long-form copy.

This article is the first one written using that new workflow.

Built with Phoenix 1.8, LiveView, Ecto, Tailwind CSS, and PostgreSQL. Deployed on a VPS with Docker and Caddy.