Website Development & Historical Preservation
The story of a family archive growing through website development, historical research, and preservation.
January 2024 — Present
About This Archive
The Family Heritage Project is a long-term website that I designed and built from scratch to preserve my family’s history, photographs, biographies, and relationships across generations.
Rather than being developed all at once, the website has grown through continuous planning, experimentation, redesign, automation, and new feature development. What began as a personal website gradually became a living family archive with public stories, private member tools, connected galleries, and ways to keep family information organized.
This page documents that journey. It serves as both a public changelog and a software development portfolio, showing not only what I built, but also the problems I solved and the thoughtful decisions that helped the website continue growing over time.
The second stage, which I call the Genesis Project, expands that work by gathering, researching, and digitizing the historical materials that allow the archive to reach further into earlier generations.
The Project Stages
The work began with the digital foundation and will continue by recovering and preserving more of the history behind it.
The first stage created the digital home for the archive through biography pages, the family tree, searchable galleries, relationship records, videos, private member tools, and administration features.
Active development since January 2024
The second stage will gather and digitize photographs, VHS films, certificates, and ancestral information so earlier generations can be researched, documented, and added to the family tree.
In 2027, I plan to travel to Peru to research my grandmother’s home library, where many of these family records are preserved. The materials will be cataloged, scanned, and connected to the correct relatives wherever possible.
Planned milestone: Peru archive visit in 2027
How the Website Works
The visible website stays simple and fast. Firebase and connected Google services handle the parts that need sign-in, saved information, photo organization, approvals, and automation.
Responsive pages, shared navigation, breadcrumbs, search, carousels, galleries, and accessible controls create a consistent experience on computers and phones.
Firebase securely organizes member accounts, family profiles, relationship records, photo tags, requests, and approval status.
Google Drive, Google Contacts, YouTube, Blogger, and other services bring photos, videos, contacts, and updates into the project.
Private administration pages make it easier to review members, tag media, publish changes, correct information, and maintain the website.
Archive Timeline
🚀 Initial Foundation
The domain already existed, but active development began in January 2024 with a much bigger idea: create one lasting place for family history, photographs, relationships, personal updates, and professional work.
A content map covering personal story, family heritage, galleries, updates, professional material, and future private experiences.
Balancing intimate family content with a public professional presence while planning for privacy boundaries from the beginning.
Established the principles that still guide the site: preservation, clarity, respectful access, and incremental growth.
🎨 Planning & Design
The broad idea became a visual and editorial plan. I worked out how biographies, generations, places, memories, and photographs could feel connected while still allowing every person’s page to have its own voice.
Page standards for biographies, relationship groupings, gallery destinations, navigation categories, and reusable visual hierarchy.
Designing for variable biography lengths, incomplete photographs, bilingual material, and changing family information.
Created an editorial model that later supported dozens of profiles without requiring a different design for every person.
🧭 Project Structure
Before publishing the first complete version, I chose a lightweight structure built with HTML, CSS, and JavaScript. This kept the public website fast and easy to understand while leaving room for accounts, databases, and private tools later.
A delivery approach using HTML, CSS, JavaScript, source control, custom-domain hosting, and an extensible directory structure.
Avoiding framework complexity while preserving a path toward authentication, databases, APIs, and administration.
Kept the public site portable and fast while leaving room for the application layer that followed.
🌐 First Website Launch
The first surviving Git history records the homepage, shared styling, About pages, images, and the project’s first visual identity. The domain was no longer an unused address; it had become the beginning of a real family archive.
Core HTML structure, site-wide CSS, typography, brand imagery, page metadata, and the initial content hierarchy.
Creating a coherent design language for family storytelling, professional information, and media-heavy pages.
Established the visual foundation and Git workflow used by every later feature.
🏠 Homepage & Navigation
January brought the first major expansion. I redesigned the homepage, created shared navigation and breadcrumbs, improved the mobile experience, and added a carousel and useful content blocks so visitors could move naturally through a growing number of pages.
Why it mattered: shared behavior replaced repeated page markup, reducing drift and making global navigation changes possible from one source.
📝 Family Stories & Updates
The website grew beyond its original pages as I added family updates, milestones, photographs, and changing homepage content. Each addition helped the project feel current, personal, and useful rather than like a finished archive that would never change.
Family-update publishing surfaces, expanded Alyssa content, gallery revisions, custom-domain routing, and richer social metadata.
Maintaining visual consistency as content volume and media formats grew quickly across desktop and mobile.
Turned the site into an active memory archive and established an iterative test-and-refine rhythm.
🔍 Smart Search & Everyday Features
Search and everyday homepage features made the site easier to use. Recent updates, calendar information, live dates, exchange rates, event content, and better content ordering gave visitors useful reasons to return.
Why it mattered: the homepage became a modular dashboard for current family, editorial, and project information.
👪 Family Directory
The Family Directory was a major turning point. Approved relatives could sign in, view family information, manage parts of their profiles, and use private features while the public stories remained safely separated.
Why it mattered: the project gained secure identity, structured data, and an operational back office without replacing its fast static front end.
☁️ Firebase Architecture
Firebase and Cloud Functions allowed me to move sensitive work away from the public browser. Sign-in checks, approvals, image processing, protected actions, and automated tasks could now happen securely behind the scenes.
Authenticated image conversion, profile claiming, public tag suggestions, rate limiting, secure lead workflows, email delivery, and protected downloads.
Coordinating permissions, tokens, server secrets, CORS, file limits, and third-party APIs without exposing privileged credentials.
Made higher-risk workflows enforceable, auditable, and reusable across the platform.
📷 Interactive Photo Tagging
As the photo collection grew, manually adding every image to a page was no longer practical. I built a Google Drive and Firebase workflow that lets photographs be discovered, named, tagged, reviewed, and connected to the right people.
Why it mattered: media management became a repeatable workflow instead of a collection of hard-coded image links.
🌳 Family Tree & Relationships
The original family tree grew into a connected relationship system. A person can now appear in the tree, directory, biography pages, and galleries while still being recognized as the same family member across the website.
Why it mattered: one person can be recognized reliably across multiple systems without duplicating or exposing private account data.
👤 Biography Pages
Dozens of family and personal profiles were brought into one consistent format with portraits, relationship context, meaningful subtitles, gallery links, clean addresses, and a familiar blank portrait when no photograph is available.
Reusable biography structure, long-form page decisions, image fallbacks, canonical aliases, redirects, and connected albums.
Preserving individual voice while correcting inconsistent names, links, image paths, page lengths, and historical relationships.
Expanded the archive rapidly without sacrificing navigation consistency or maintainability.
Privacy was handled deliberately: selected people pages remain accessible by exact URL but are excluded from navigation and generated site search.
📺 YouTube Synchronization
The gallery expanded from photographs to family videos. YouTube synchronization and separate photo and video views made it possible to manage both kinds of memories without making the administration page confusing.
Why it mattered: the gallery became media-agnostic while administration stayed understandable at growing scale.
🤖 Automation Workflows & AI Integration
Automation and AI-assisted development helped with code review, repetitive profile work, writing cleanup, link checks, debugging, testing, and planning. I still review personal content and make the final decisions about design, privacy, and publication.
Use AI to accelerate analysis and repetitive implementation while retaining human judgment over architecture, privacy, tone, and release decisions.
Verify generated changes against source history, browser behavior, data rules, and the intended context of family content.
Increased development throughput while strengthening documentation and systematic quality checks.
⚡️ Performance Improvements
Recent work has focused on details visitors may never notice but always benefit from: faster loading, dependable text encoding, protected search results, smaller releases, clearer error messages, and testing across computers and phones.
Why it mattered: releases became smaller, safer, easier to diagnose, and less dependent on manual cleanup.
🛠️ Ongoing Development
The project is still active. Future work will continue improving family relationships, member self-service, gallery management, automated checks, performance, and the tools that make this growing archive easier to care for.
📚 Historical Collection
I plan to travel to my grandmother’s home in Peru to work through the records preserved in her library and identify materials that can deepen our understanding of earlier generations.
Why it matters: records stored in one home can become an organized digital collection that future generations can explore and continue.
More Than a Family Archive
Connected blog posts, family updates, and homepage features keep visitors informed without requiring the same content to be written in several places.
Career pages, a downloadable resume, contact options, and this Family Archive page show the professional work behind the website and its preservation efforts.
A separate browsing, product, cart, and contact experience explored how the same website foundation could support a small online shop.
Bilingual baptism pages, godparent invitations, seasonal homepage moments, calendar information, and special announcements make family events part of the archive.
A separate property experience added inquiry forms, file uploads, private management tools, email notifications, status tracking, and printable materials.
Live camera controls, real-time status pages, and archived experiments gave me a place to test new ideas before deciding whether they belonged in the main project.
Lessons From the Work
I take responsibility for the idea, design, development, content, launch, problem-solving, and continued maintenance.
The public website stays lightweight, while cloud services are added only when they solve a real need such as sign-in or saved information.
Drafts, approvals, retries, duplicate checks, and cleanup tools matter just as much as the feature visitors see.
Private areas, search exclusions, secure sign-in, exact-link access, and human review help protect sensitive family information.
Shared page elements, consistent names, connected records, and reusable tools make the next improvement easier to build.
Small design refinements, bug fixes, performance updates, and workflow improvements steadily make the website more dependable.
Behind the Scenes
HTML5 · CSS3 · Vanilla JavaScript · Firebase Hosting · Firebase Authentication · Cloud Firestore · Realtime Database · Cloud Functions for Node.js · Firebase Storage · Google Drive API · Google Contacts API · YouTube Data API · Blogger feeds · Git · GitHub · PowerShell automation · responsive and accessibility testing
The Story Continues
Each stage connects technology, research, documents, photographs, films, and family memories so the archive can continue growing for future generations.