CASE STUDY / WEBSITE DESIGN + DEVELOPMENT

CASE STUDY / WEBSITE DESIGN + DEVELOPMENT

FAMILY MAN ONLINE

FAMILY MAN ONLINE

FAMILY MAN ONLINE

My dad needed a website redesign for Family Man Online. I redesigned the frontend to reflect the original site, maintaining a clean, consistent, and nostalgic visual language across every page. I built the backend around his existing archive while creating new interfaces for editing, hosting, and publishing.

ROLE

Design + development

MIGRATION

247 articles

CMS

Sanity

HOSTING

Cloudflare Pages

VISIT FAMILYMANONLINE.COM ↗

VISIT FAMILYMANONLINE.COM ↗

Family Man Online homepage

01 / FRONTEND

A new website based on the old one.

A new website based on the old one.

I designed and built a new frontend for Family Man Online. The interface keeps the familiar, homey feel of the original site while making it easier to browse on current devices. It includes a homepage, responsive navigation, a searchable Stories archive, category filters, article pages, an About Gregory page, and a contact form.

I designed and built a new frontend for Family Man Online. The interface keeps the familiar, homey feel of the original site while making it easier to browse on current devices. It includes a homepage, responsive navigation, a searchable Stories archive, category filters, article pages, an About Gregory page, and a contact form.

The homepage also links directly to Gregory’s current work at L.A. Parent, so readers can move between the restored Family Man archive and his newer writing.

The homepage also links directly to Gregory’s current work at L.A. Parent, so readers can move between the restored Family Man archive and his newer writing.

Searchable Family Man Online story archive

02 / CONTENT MIGRATION

247 articles recovered, screened, saved, and archived.

247 articles recovered, screened, saved, and archived.

I exported the original WordPress content, reviewed the files, removed compromised and server-specific material, and preserved 247 usable Family Man articles. I kept an offline copy of the old visual layout for reference and built a private, no-index legacy archive for the family.

I exported the original WordPress content, reviewed the files, removed compromised and server-specific material, and preserved 247 usable Family Man articles. I kept an offline copy of the old visual layout for reference and built a private, no-index legacy archive for the family.

The public archive uses search, topic filters, dates, excerpts, and article thumbnails. The result is a clean content migration with a usable editorial archive instead of a direct copy of the retired WordPress install.

The public archive uses search, topic filters, dates, excerpts, and article thumbnails. The result is a clean content migration with a usable editorial archive instead of a direct copy of the retired WordPress install.

Family Man Online About Gregory page

03 / BACKEND + CMS

Sanity Editing Interface

Sanity Editing Interface

I set up Sanity as the headless CMS and backend for the new site. Gregory can create and edit stories, upload images, assign categories, update author information, manage homepage features, and change site settings without opening the codebase.

I set up Sanity as the headless CMS and backend for the new site. Gregory can create and edit stories, upload images, assign categories, update author information, manage homepage features, and change site settings without opening the codebase.

The content model separates writing from technical publishing fields. The frontend reads Sanity content and also keeps built-in fallback content so the public site still has a usable homepage and archive if the CMS is temporarily unavailable.

The content model separates writing from technical publishing fields. The frontend reads Sanity content and also keeps built-in fallback content so the public site still has a usable homepage and archive if the CMS is temporarily unavailable.

04 / PUBLISHING INFRASTRUCTURE

GitHub, Cloudflare, DNS, and deployments.

GitHub, Cloudflare, DNS, and deployments.

The source code and version history live in a private GitHub repository. Cloudflare Pages hosts the frontend and deploys approved changes from the main branch. Cloudflare also manages the production domain, DNS records, nameservers, HTTPS, edge delivery, and the connection between the repository and the live site.

The source code and version history live in a private GitHub repository. Cloudflare Pages hosts the frontend and deploys approved changes from the main branch. Cloudflare also manages the production domain, DNS records, nameservers, HTTPS, edge delivery, and the connection between the repository and the live site.

SANITY

Headless CMS, content schema, image library, and editor interface.

GITHUB

Private source control, commit history, branches, and recoverable project files.

CLOUDFLARE PAGES

Production hosting, main-branch deploys, preview builds, HTTPS, and edge delivery.

DNS + NAMESERVERS

Cloudflare DNS, domain records, nameserver setup, SSL, and production routing.

L.A. PARENT

External article links connect Gregory’s current writing to the Family Man archive.

RESILIENT FALLBACK

Built-in content keeps core pages usable during a temporary CMS outage.

Private legacy archive for preserved Family Man articles

05 / PRESERVATION

Archiving the Original Site

Archiving the Original Site

I preserved a clean reference copy of the original site and a searchable private legacy archive. The archive is intentionally no-index and has no public navigation link. It contains the screened article export, not the compromised WordPress installation.

I preserved a clean reference copy of the original site and a searchable private legacy archive. The archive is intentionally no-index and has no public navigation link. It contains the screened article export, not the compromised WordPress installation.

Family Man Online article page

06 / HANDOFF

The site is editable, documented, and recoverable.

The site is editable, documented, and recoverable.

Gregory edits the site in Sanity. I wrote a plain-language handoff guide covering the CMS, image uploads, publishing, GitHub, Cloudflare Pages, DNS, nameservers, deployments, backups, and recovery steps.

Gregory edits the site in Sanity. I wrote a plain-language handoff guide covering the CMS, image uploads, publishing, GitHub, Cloudflare Pages, DNS, nameservers, deployments, backups, and recovery steps.

The finished system is a responsive editorial frontend, a structured content backend, a preserved archive, and a documented deployment pipeline. Nearly 250 articles now have a stable public home without relying on the retired server.

The finished system is a responsive editorial frontend, a structured content backend, a preserved archive, and a documented deployment pipeline. Nearly 250 articles now have a stable public home without relying on the retired server.

Family Man Online contact page

looking to start a project or you need consultation feel free to contact me

Los Angeles and San Diego, California

arikeerphotographygmail.com
wwwarikeerphotocom

looking to start a project or you need consultation feel free to contact me

Los Angeles and San Diego, California

arikeerphotographygmail.com
wwwarikeerphotocom