FrankJamison.com:
Built, Not Assembled

FrankJamison.com is a personal portfolio site built, not assembled. Rather than relying on a site builder, CMS, or pre-packaged template, this 2018 project was constructed directly from HTML, CSS, Bootstrap, and light PHP integration, reflecting a hands-on approach to layout, responsiveness, and long-term maintainability. The site serves as both a professional showcase and a practical demonstration of foundational front-end development skills applied with intention.

Designed to present a growing body of academic, professional, and personal projects, the site emphasizes clarity, structure, and consistency—qualities that matter to recruiters scanning quickly and developers digging deeper.

Purpose and Scope

The primary goal of FrankJamison.com is to function as a centralized portfolio hub. It brings together multiple projects under a single, cohesive presentation, allowing visitors to understand both the breadth of work and the progression of skills over time.

Rather than highlighting a single application or experiment, the site itself is the project. Navigation, layout, asset organization, and responsiveness all contribute to the overall experience, mirroring the responsibilities involved in maintaining a real-world web presence.

Technology Stack and Approach

The site is built using a familiar but effective stack:

• HTML5 provides semantic structure and readable markup.
• Bootstrap supplies a responsive grid system and baseline UI components.
• Custom CSS layers visual identity and overrides framework defaults to avoid a generic appearance.
• PHP is used sparingly to support shared components and reduce repetition across pages.
• Font Awesome icons enhance navigation clarity and visual hierarchy.
• Ekko Lightbox enables clean, focused presentation of portfolio images without disrupting page flow.

This combination allows the site to remain lightweight while still offering flexibility and scalability as new content is added.

Design Philosophy and Layout

Visually, the site favors a clean, professional aesthetic aligned with contemporary portfolio expectations of its era. Bootstrap’s grid system ensures consistent spacing and alignment, while custom styles refine typography, color usage, and section separation.

The layout is intentionally straightforward. Content is easy to scan, project thumbnails are clearly grouped, and navigation remains predictable. This design restraint reflects an understanding that portfolios are often reviewed quickly and should prioritize clarity over visual novelty.

Responsive Design and Usability

Responsiveness is handled through Bootstrap’s grid and utility classes, allowing the layout to adapt smoothly across screen sizes. Content reflows naturally for smaller viewports without requiring separate mobile templates or complex conditional logic.

This approach ensures that the site remains usable across laptops, tablets, and mobile devices—an essential consideration for recruiters and hiring managers reviewing portfolios in varied contexts.

PHP Integration and Maintainability

PHP is used with restraint and purpose. Shared elements such as headers, navigation, or footers can be centralized, reducing duplication and simplifying updates. This keeps the codebase manageable while avoiding unnecessary complexity.

The result is a site that feels cohesive and maintainable, reflecting patterns commonly used in small-to-medium business websites and internal tools.

Asset Organization and Code Structure

The repository demonstrates disciplined organization. Vendor assets and custom styles are clearly separated, making it easy to identify original work versus third-party dependencies. Images are consistently named and grouped, reinforcing good asset hygiene.

This level of structure matters in collaborative environments, where clear organization reduces onboarding time and helps prevent errors during updates or refactors.

Professional Takeaway

FrankJamison.com is a portfolio built with intention and restraint. It demonstrates comfort with responsive layouts, framework-based styling, custom CSS refinement, and light server-side integration, all assembled into a cohesive and professional whole.

For recruiters and employers, the site signals readiness to work within established front-end ecosystems while still exercising independent design judgment. For developers, it reflects a solid grasp of foundational web practices and an appreciation for maintainability, clarity, and structure.

More than a collection of links, this project represents a deliberate step toward professional web development—built, not assembled, and designed to grow alongside the work it showcases.

Frank’s Classic Cars:
Built the Old-School Way

Frank’s Classic Cars is built the old-school way—server-rendered PHP, a MySQL backend, shared includes, and session-based authentication working in quiet concert. The application favors clear control flow and explicit logic, showcasing the kind of foundational web development patterns that powered countless production systems and still matter when reliability, maintainability, and understanding the full request lifecycle are the goal.

Originally developed in 2018, this project reflects a traditional LAMP-style architecture that emphasizes hands-on problem solving over abstraction. Rather than relying on modern frameworks to handle routing, authentication, or data access, the application implements these concerns directly, making its behavior transparent and easy to reason about for developers reviewing the code.

Application Overview

Frank’s Classic Cars is a PHP/MySQL web application with both public-facing and authenticated employee-only functionality. The public side provides entry points for account creation, login, product viewing, and RSS feed consumption, while the protected employee area offers administrative tools such as customer management, inventory reporting, credit-limit analytics, and session-based access control.

The project is organized around reusable includes for layout, configuration, and shared logic, reinforcing consistency across the application and reducing duplication. Styling is handled with a centralized CSS file, and the interface reflects the straightforward, utilitarian design typical of internal business tools.

Core Technologies and Architecture

The backend is implemented entirely in PHP using the mysqli extension to interact with a MySQL database. Each page follows a clear request-response pattern: accept input, validate it, perform database operations, and render output. This explicit flow makes the application easy to trace and debug, a valuable trait in production maintenance environments.

Session management is used to gate employee-only pages, ensuring that administrative tools are not accessible without authentication. Shared header and footer includes maintain a consistent structure across both public and private sections of the site.

In addition to standard HTML output, the application demonstrates alternative server-side outputs, including RSS XML feeds and dynamically generated PNG charts, highlighting an understanding of content negotiation beyond the browser viewport.

Authentication and Account Management

Employee account creation and login are handled through dedicated forms that validate required fields and check database constraints such as unique usernames and employee numbers. Upon successful login, session variables are set and used to control access to restricted areas of the application.

While the authentication flow is intentionally straightforward, it mirrors patterns commonly found in legacy and internal systems where clarity and predictability outweigh abstraction. The project also provides a clear foundation for discussing modern improvements such as stronger password hashing and prepared statements—an important skill when maintaining or upgrading existing systems.

Customer Management and Validation Logic

The employee-facing customer creation tool demonstrates more advanced input handling. Field-level validation is implemented using reusable helper functions and regular expressions, ensuring that required fields meet expected formats before database insertion.

Dropdown lists are dynamically populated from database queries, reinforcing data integrity and reducing the risk of invalid selections. Optional fields are handled carefully to avoid blocking valid submissions, reflecting real-world form complexity rather than simplified demo logic.

This section of the application highlights practical experience with form-heavy workflows, a common reality in administrative and enterprise software.

Inventory Reporting and Pagination

Inventory data is presented through a paginated reporting interface that allows employees to browse products by product line. Pagination logic is implemented manually, reinforcing an understanding of result limits, offsets, and page state management.

Rather than relying on third-party libraries, the project constructs pagination links and product listings through custom helper functions. This approach demonstrates familiarity with backend-driven data presentation and reinforces foundational SQL querying patterns.

Server-Side Chart Generation

One of the more distinctive features of the application is its use of PHP’s GD library to generate bar charts dynamically. Credit limit data is retrieved from the database, grouped into ranges, and rendered as a PNG image that visually summarizes customer distribution.

This feature moves beyond basic CRUD functionality and illustrates how server-side logic can be used to produce visual assets on demand. It also reflects real-world reporting needs commonly found in internal dashboards and management tools.

RSS Feed Generation

The application includes an RSS feed generator that outputs product data in RSS 2.0 format, optionally styled with an XSL stylesheet for browser readability. Product feeds are filtered by product line and ordered by recency, providing an alternate consumption channel for the same underlying data.

This feature demonstrates an understanding of structured data formats and the importance of making content available beyond standard web pages, a skill that remains relevant in integrations, syndication, and API-adjacent workflows.

Design Philosophy and Maintainability

Visually, the application embraces a fixed-width, desktop-oriented layout consistent with its era and purpose. While not responsive by modern standards, the interface prioritizes clarity, consistency, and ease of navigation—traits that remain valuable in internal-facing tools.

From a code perspective, the project emphasizes readability and explicit logic. Configuration values are centralized, shared functionality is abstracted into includes, and the overall structure makes it easy for another developer to step in and understand how the application works.

Professional Takeaway

Frank’s Classic Cars is a grounded example of traditional PHP/MySQL web development done with intention. It demonstrates hands-on experience with authentication, session management, form validation, reporting, pagination, RSS generation, and server-side image rendering—all without leaning on heavy frameworks.

More importantly, it shows an understanding of how real systems are built, maintained, and incrementally improved. For employers and developers alike, this project illustrates not just the ability to write code, but the ability to reason about systems—built the old-school way, with fundamentals that still matter.

2017 RPG Stat Roller:
Thoughtful Front-End Craft

Some projects shout. This one hums—steady, deliberate, and built to last. The 2017 RPG Stat Roller is a static, dependency-free web application designed to generate tabletop RPG ability scores with precision, clarity, and respect for the user. It’s small by footprint, big by intent, and shaped like something you could actually ship.

This post walks through the design and development decisions with employers, recruiters, and fellow developers in mind—because even a modest tool can reveal how someone thinks.

Product Intent & Scope

At its core, this project solves a familiar problem: rolling ability scores quickly, consistently, and transparently for different RPG rule sets. But the real goal is broader—demonstrating production-ready front-end thinking without leaning on frameworks, build tools, or third-party libraries.

No dependencies. No build step. No tracking. No noise.

Just HTML, CSS, and JavaScript doing their jobs.

Information Architecture & Page Design

The application is split into multiple HTML pages, each representing a distinct stat-rolling rule set. This keeps logic isolated, avoids configuration sprawl, and makes each page independently understandable.

Shared UI patterns—controls, results display, history, and layout—are visually and behaviorally consistent across pages. The result feels cohesive without being monolithic.

Design priorities include:

• Immediate clarity: users see where to roll, what was rolled, and what it means.
• Low cognitive load: no modals, no hidden state, no surprise interactions.
• Visual restraint: neutral colors, readable typography, and dice imagery used sparingly for flavor rather than distraction.

JavaScript Architecture & Logic

The JavaScript is intentionally plain, readable, and modular in spirit—even without a formal module system.

Key characteristics:

• Rule logic is explicit and deterministic per page, making behavior easy to audit.
• Shared interaction patterns (roll, copy, clear, history handling) are centralized and reused.
• State is managed locally and transparently, avoiding unnecessary abstraction.

This approach favors:

• Debuggability over cleverness.
• Maintainability over novelty.
• Predictable execution over magic.

If you’ve ever inherited a “simple” project that wasn’t, you’ll appreciate this restraint.

State Management & Persistence

Roll history is stored using localStorage, scoped entirely to the user’s browser.

Why this matters:

• No backend required.
• No data leaves the device.
• Sessions persist naturally without accounts or cookies.

History is easy to clear, impossible to accidentally leak, and fast by default. It’s privacy-first UX without making a speech about it.

Accessibility-Minded UX

Accessibility is treated as a baseline, not a feature request.

The UI leans on:

• Semantic HTML structure.
• Keyboard-operable controls.
• Visible focus states.
• Sufficient contrast and readable sizing.

While formal audits (Lighthouse, axe, screen readers) are listed as future improvements, the foundational choices are already there. This is the difference between “we’ll add accessibility later” and “we didn’t break it in the first place.”

CSS & Visual Consistency

Styling is handled through a single, shared stylesheet that prioritizes:

• Predictable spacing and alignment.
• Clear hierarchy between controls, results, and history.
• Minimal overrides and low selector complexity.

There’s no framework here—just deliberate CSS that won’t fight you six months later.

Performance & Reliability

With zero dependencies and no network requests, performance is effectively instant. Pages load fast, interactions respond immediately, and failure modes are limited and understandable.

This is front-end reliability through subtraction.

What This Project Signals to Employers

This project quietly demonstrates:

• Comfort with vanilla web fundamentals.
• An understanding of user experience beyond visuals.
• Respect for accessibility and privacy.
• Architectural thinking applied at a small scale.
• The ability to ship something clean without overengineering it.

It’s not trying to be impressive. It’s trying to be correct. That’s rarer than it should be.

Future-Facing Improvements

If this were headed toward a broader release, the next steps are already clear:

• Formal accessibility audits and documentation.
• Deterministic testing via a seeded RNG.
• Lightweight linting and CI validation.
• Exportable roll history for power users.

The foundation supports growth without demanding it.

Final Thoughts

The 2017 RPG Stat Roller is a quiet project with sharp edges sanded down and strong decisions baked in. It’s a reminder that good front-end work isn’t about how many tools you used—it’s about how intentionally you didn’t.

Built like a well-balanced character sheet: nothing wasted, nothing missing, and ready for the long campaign.

Riverside Massage And Spa:
A Static Business Website

The Riverside Massage & Spa website is a thoughtfully constructed multi-page static site that demonstrates disciplined front-end fundamentals and a strong understanding of how real small-business websites should function. Built in 2017, the project emphasizes clarity, structure, and maintainability over trend-chasing—resulting in a calm, professional interface designed to serve both users and business needs effectively.

This project is representative of a period in web development where craftsmanship mattered more than tooling. It highlights an approach grounded in semantic HTML, carefully authored CSS, and deliberate layout decisions, without reliance on JavaScript frameworks or build systems.

Project Purpose and Scope

The site functions as a full brochure-style web presence for a local spa business. It includes:

• A welcoming home page introducing the business
• Dedicated pages for services such as massage and facial treatments
• Staff profile pages to build trust and personalization
• A scheduling page for client engagement
• A contact page with a structured inquiry form

Each page is intentional and focused, avoiding unnecessary complexity while providing all the information a prospective client would expect.

Information Architecture and Navigation

The website follows a consistent page structure across the entire project. A shared header and navigation system orients users immediately and reinforces brand identity. Navigation links are manually maintained across pages, reflecting an understanding of consistency and user expectation in a static environment.

Content is divided into clear sections, making pages easy to scan and understand. The hierarchy guides users naturally from high-level information down to specific details without visual or cognitive overload.

HTML Structure and Semantics

The HTML is clean, readable, and well structured. Proper document setup, logical heading levels, and semantic elements are used throughout the site. Images include descriptive alternative text, and forms are built with labels and accessible input fields.

The markup is written for longevity and comprehension. There is no generated code or abstraction layer obscuring intent, which makes the site easy to maintain or extend over time.

CSS Design and Layout Approach

All styling is handled through a centralized, hand-written stylesheet. The CSS demonstrates a clear grasp of layout fundamentals and the cascade:

• Reusable layout and navigation styles
• Consistent spacing and alignment rules
• Flexbox used for horizontal layout and content flow
• Typography choices that prioritize readability
• Visual hierarchy established through spacing and contrast

The design avoids over-engineering. Rules are explicit, easy to follow, and designed to scale across the site without duplication or confusion.

Responsive and Adaptive Behavior

While not driven by an extensive media-query system, the layout is designed to adapt naturally to different screen sizes. Flexible containers and scalable images allow content to reflow without breaking, ensuring usability across desktop and smaller displays.

This approach favors robustness and longevity over brittle, breakpoint-heavy layouts.

Forms and User Interaction

The contact and scheduling interfaces are straightforward and approachable. Inputs are clearly labeled and grouped logically, reducing friction for users. Call-to-action elements are visually distinct without being intrusive.

By focusing on clarity and accessibility rather than scripted behavior, the site reinforces trust—an essential factor for service-based businesses.

Visual Design and Branding

The visual tone balances professionalism and warmth. Imagery is used deliberately to convey the spa’s atmosphere without overwhelming the layout. The color palette is restrained, and typography choices support a calm, welcoming aesthetic.

Nothing in the design feels accidental or decorative for its own sake. Visual elements exist to support content and guide user attention.

Development Philosophy

This project reflects a clear development mindset:

• Use simple tools appropriately
• Prioritize readability and maintainability
• Respect browser defaults and standards
• Design for real users and real businesses

It demonstrates that strong front-end work does not require heavy tooling—only a solid grasp of fundamentals and intentional design decisions.

Why This Project Matters to Employers

For employers, recruiters, and developers, this site demonstrates:

• Strong HTML and CSS fundamentals
• Experience building complete, multi-page static websites
• Attention to structure, accessibility, and usability
• Design discipline and restraint
• Code written for humans, not just machines

It shows an understanding of how the web works at its core—and how to build something reliable without unnecessary complexity.

Final Thoughts

Riverside Massage & Spa is a quiet, confident project. It doesn’t rely on trends or frameworks to make its case. Instead, it demonstrates thoughtful front-end execution, clear design intent, and a respect for both users and maintainers.

In a portfolio filled with loud demos, this project stands out by doing exactly what it needs to do—and doing it well.

2017 Stopwatch Application:
Front-End Timekeeping Tool

Some projects are loud. This one is precise.

The 2017 Stopwatch Application is a polished single-page Stopwatch + Countdown Timer built with plain HTML, CSS, and JavaScript—no frameworks, no build tooling, no dependencies doing the heavy lifting off-screen. It’s the kind of project that looks simple until you try to implement it cleanly… and then you discover timekeeping logic is where good intentions go to die.

This code doesn’t die. It behaves.

What This Demonstrates to Employers, Recruiters, and Developers

If you’re scanning this as a hiring signal, this project shows:

• A product-minded UI approach (consistent layout, controls, and presentation)
• Comfort with browser fundamentals (DOM, events, timing loops)
• Clean separation between state, UI rendering, and time formatting
• Input validation that prevents broken states rather than “hoping the user behaves”
• Thoughtful visual design choices (dark theme, component styling, responsive layout)

UI and Layout Design

The application presents as “Time Tools” with two primary panels:

• Stopwatch (count up)
• Countdown (count down)

The layout is built as a responsive grid: each tool lives in a card-style panel that spans half the width on larger screens and collapses to full-width on smaller screens (a breakpoint at 820px). This keeps the UI readable and “app-like” rather than looking like a loose demo page.

The CSS leans into a modern, restrained dark theme using CSS custom properties (variables) for:

• background layers
• text/muted text tones
• borders and shadows
• accent gradients

Each card is subtly themed with its own accent colors:

• Stopwatch uses a purple gradient accent
• Countdown uses a cyan/teal gradient accent

This is a nice “product polish” touch: the tools feel related, but not identical.

Component Styling and Product Feel

The card components are designed like real UI surfaces:

• A top gradient strip (via ::before) acts as a visual identity line.
• A soft highlight overlay (via ::after) adds depth without clutter.
• Hover states slightly lift the card and adjust border colors, creating a tactile feel.

Buttons are styled as reusable components (.btn variants), keeping interaction consistent across both tools. Controls are grouped logically and spaced so the UI doesn’t feel cramped, even when the viewport shrinks.

Stopwatch: Digital + Analog Time Representation

The stopwatch includes:

• A digital readout in mm:ss:hh (minutes, seconds, hundredths)
• An analog stopwatch face, using an image background (stopwatch.png) and SVG hands layered above it

This analog piece isn’t just decoration—it reinforces the concept visually and demonstrates DOM-driven animation through CSS transforms.

Analog Hand Logic (SVG + Transform)

The analog hands are positioned and rotated via JavaScript using style.transform with rotation math:

• Seconds sweep: one full rotation per minute
• Centisecond hand: fast rotation derived from hundredths (mapped into millisecond phase)

There’s also an optional “minute indication” path that rotates a third hand based on minutes, showing the code was built to support richer analog behavior without tangling it into the core stopwatch loop.

Timing Engine: Hundredths of a Second as the Base Unit

Both tools use a shared conceptual model:

• Time is tracked as an integer count of hundredths of a second.

That makes formatting predictable and math straightforward:

• 100 ticks per second
• 6000 ticks per minute

The stopwatch increments with a recursive setTimeout(..., 10) loop:

• watchTime++
• update digital output
• update analog hands
• schedule the next tick

This structure is easy to reason about, keeps the logic readable, and avoids complex timing abstractions.

Countdown Timer: Strict Validation and Safe State

The countdown timer is built with a defensive approach: it validates user input up-front instead of trying to recover later.

Input Format

It requires the user to enter exactly:

• mm:ss:hh (leading zeros required)

Upper Bound

It enforces a maximum of:

• 10:00:00

That limit is implemented directly in the validation regex, preventing “giant countdown” states that are likely to be user mistakes (or performance footguns).

Once valid, the timer converts the formatted string into total hundredths:

• minutes * 6000 + seconds * 100 + hundredths

Then it decrements in a setTimeout(..., 10) loop until it hits zero.

When the countdown reaches 0, it:

• stops running
• surfaces a clear message (“Time is up!”)
• syncs the UI into a consistent stopped state

No weird half-running limbo. No “negative time” bug parade.

UI State Synchronization: Predictable Controls

A standout detail: the UI labels aren’t hardcoded per click—they’re derived from state.

The syncUI() function updates button text based on whether the tool is running and whether there’s time already accumulated:

Stopwatch:

• Start → Pause → Resume (depending on state and elapsed time)

Countdown:

• Start → Pause → Resume (depending on state and remaining time)

That’s the kind of behavior users expect from real apps, and it’s the kind of detail that’s easy to skip when you’re rushing a project out the door.

DOM Performance and Maintainability

The JavaScript uses a simple, effective pattern:

• A ui cache object stores DOM references on window.onload.

This prevents repeated getElementById calls and makes the code easier to follow because DOM access is centralized. It also signals something recruiters love even if they don’t know why: “this person writes maintainable code.”

Practical Engineering Notes

The project intentionally stays framework-free, which makes it excellent as a fundamentals signal:

• No React/Vue/Angular doing state management for you
• No build step hiding asset behavior
• Direct control over browser timing and rendering

You also see “real dev workflow” awareness in the repo’s approach to iteration (the project mentions cache-busting during development), which is exactly the sort of detail that shows someone has built and debugged front-end work outside of tutorial land.

Where This Project Can Grow (Without a Rewrite)

Because the code is structured around clear state + rendering functions, it’s easy to extend:

• Keyboard shortcuts (space to start/pause, R to reset)
• Countdown presets (00:30:00, 05:00:00, etc.)
• Accessibility pass (ARIA live regions for status changes, focus order improvements)
• Timing drift correction using performance.now() for more accurate long runs

The foundation is solid enough that improvements are additive—not surgical.

Why It Belongs in a Portfolio

The 2017 Stopwatch Application is a strong portfolio piece because it proves the kind of competence that scales:

• UI that feels intentional
• Logic that behaves under edge cases
• Code that another developer can read without cursing your name

Timekeeping apps are famously easy to get mostly right—and surprisingly hard to get clean. This one gets clean.

JavaScript Guessing Game:
Front-End Fundamentals

This project is a deliberately scoped front-end application designed to demonstrate core JavaScript fundamentals in a clear, intentional way. Built using only vanilla JavaScript, HTML, and CSS, the JavaScript Guessing Game emphasizes logic flow, state management, and responsive user feedback without relying on frameworks or external libraries.

Rather than pursuing complexity for its own sake, the project focuses on correctness, readability, and interaction discipline—reflecting a foundational approach to front-end development where understanding the mechanics matters more than abstraction.

Project Purpose and Scope

The application challenges users to guess a randomly generated number between 1 and 100 within a limited number of attempts. With each guess, the interface responds immediately, guiding the user higher or lower while dynamically tightening the valid input range. This constraint-based interaction reinforces logical thinking and mirrors real-world front-end requirements such as validation, conditional rendering, and state-aware UI updates.

The scope is intentionally narrow, allowing the implementation to remain focused, understandable, and maintainable.

Structure and Separation of Concerns

The project is organized with a clear separation between structure, presentation, and behavior.

The HTML provides a semantic, accessible foundation for the interface, defining input controls, feedback areas, and the overall game container without inline styling or scripting.

All visual styling is contained in a dedicated CSS file. The stylesheet uses CSS custom properties to establish a consistent color system and spacing rules, enabling easy refinement and reuse. Layout decisions favor clarity and contrast, ensuring feedback remains readable and visually prioritized. A reduced-motion media query is included to respect accessibility preferences.

JavaScript handles all game logic and interaction. Behavior is fully decoupled from markup and styling, reinforcing maintainability and clarity.

Game Logic and State Management

The JavaScript implementation relies on explicit, readable state variables to track the target number, remaining guesses, and current allowable range. User input is validated before being processed, preventing invalid or out-of-bounds guesses from affecting the game state.

Feedback messaging is centralized through a helper function, ensuring consistent UI updates and avoiding repetitive DOM manipulation. As the game progresses, the script narrows the valid guessing range, reinforcing player feedback while keeping the interface aligned with the underlying logic.

Win and loss conditions are handled cleanly, transitioning the interface into a reset-ready state without requiring a page reload.

User Experience and Interaction Design

The interface is intentionally restrained, prioritizing clarity over ornamentation. Visual hierarchy ensures that feedback is immediately visible after each guess, while spacing and contrast support quick comprehension.

Subtle transitions enhance responsiveness without becoming distracting, and the game remains fully usable for players who prefer reduced motion. At every step, the user is informed of what happened, what it means, and what to do next—an essential but often overlooked aspect of interactive design.

Development Takeaways

This project reflects a fundamentals-first development philosophy. By avoiding frameworks, the code maintains a direct relationship between user input, application state, and UI updates.

For employers and recruiters, the project demonstrates comfort with core front-end technologies and disciplined problem solving. For developers, it shows readable logic, intentional structure, and respect for maintainability even at a small scale.

Final Thoughts

The JavaScript Guessing Game serves as a concise example of foundational front-end engineering. It succeeds not by being complex, but by being clear, correct, and deliberate—showcasing an understanding of how interactive web applications function at their most essential level.

FrankJamison.com:
A Purpose-Built Resume Website

This project is a static resume website built with intention, restraint, and a clear understanding of how people actually read professional information online. Created in 2017, it stands as a thoughtful alternative to overengineered portfolio sites, prioritizing clarity, structure, and longevity over trends.

At its core, this site is not about visual spectacle. It is about communication—presenting qualifications, experience, and skills in a way that is direct, readable, and trustworthy.

Architectural Overview

The site is built entirely with hand-authored HTML and CSS, deliberately avoiding JavaScript frameworks, build tools, or server-side dependencies. Each major resume section—Education, Employment, Skills, Awards, and Organizations—exists as its own dedicated HTML page.

This architectural choice accomplishes several things simultaneously:

• The content is modular and easy to maintain.
• Each section can be read independently or linked directly.
• The markup remains focused and semantically meaningful.
• The site loads instantly and behaves predictably across environments.

For employers and recruiters, this structure makes information easy to scan and digest. For developers, it reflects comfort with foundational web architecture and intentional separation of concerns.

Semantic HTML & Content Hierarchy

The HTML emphasizes semantic correctness and content hierarchy. Headings are used consistently to establish structure, lists are employed where enumeration is appropriate, and paragraphs are kept concise for readability.

This approach benefits both accessibility and search indexing while reinforcing a professional tone. The content reads like documentation rather than marketing copy—clear, factual, and respectful of the reader’s time.

CSS Design Philosophy

All styling is centralized in a single custom stylesheet, reinforcing maintainability and clarity. Rather than relying on heavy visual effects, the design uses typography, spacing, and contrast to guide the eye.

Notable design decisions include:

• A serif typeface (Cardo via Google Fonts) chosen for legibility and professionalism.
• A restrained color palette that avoids distraction.
• Consistent spacing rules that improve scanning and reading comfort.
• Reusable class-based styling instead of page-specific overrides.

The result is a visual system that supports the content rather than competing with it.

Navigation & Interaction Design

Navigation is icon-based and includes distinct visual states for default, hover, and active pages. This provides clear feedback to users without relying on JavaScript or complex interactions.

These small but deliberate choices demonstrate an understanding of usability fundamentals and user experience design at a practical level.

Asset Management & Organization

Images and visual assets are organized in a dedicated directory, named descriptively, and applied consistently throughout the site. Background imagery is used sparingly and never overwhelms the primary content.

This level of organization reflects attention to detail and an understanding of maintainable front-end workflows.

Performance & Durability

Because the site is fully static:

• Pages load almost instantly.
• There are no external dependencies to break or expire.
• Hosting requirements are minimal.
• The site remains usable and relevant years after its creation.

In a landscape where many projects degrade quickly due to toolchain churn, this site demonstrates durability and foresight.

README & Professional Framing

The included README clearly explains the project’s purpose and structure. It frames the site as a deliberate professional artifact rather than a casual personal page, helping reviewers understand what to look for and why certain decisions were made.

This kind of framing is often overlooked, but it signals maturity and awareness of how projects are evaluated in professional contexts.

Why This Project Matters

This resume website quietly communicates several important qualities:

• A strong grasp of web fundamentals.
• Respect for clarity and usability.
• Discipline in design and implementation
• The ability to deliver complete, maintainable work independently.

For employers and recruiters, it reflects sound judgment and professionalism.
For developers, it reflects craftsmanship and intentional design.

No frameworks. No unnecessary complexity. Just a purpose-built site that does exactly what it sets out to do—and continues to do so reliably years later.

FrankJamison.com:
A Modern Resume Website

If you’re hiring for someone who can communicate clearly and build a polished interface without hiding behind a framework, this project is a great signal.

FrankJamison.com is a multi-page, static resume website built with HTML + CSS + JavaScript, enhanced with two flavors of accordion navigation and smooth page transitions. It’s intentionally “classic web”: straightforward to host, easy to audit, and structured to help busy readers find the important stuff fast.

What This Project Is

At the repo root, the site is organized into six primary pages:

• index.html (landing / summary)
• employment.html
• education.html
• skills.html
• awards.html
• affiliations.html

Supporting assets are cleanly separated:

• _css/style2.css (single, site-wide stylesheet)
• _javascript/script.js (jQuery UI accordion + Animsition setup)
• _javascript/main.js (custom checkbox-driven accordion behavior for Education)
• _images/ (banners, nav icons, logo motif, profile image)
• _fonts/ (embedded webfont families + license files)

This is the kind of structure you want when you value maintainability and predictability—and when you expect someone else may touch the code later without summoning a séance.

Design and UX: Consistency as a Feature

A repeatable page layout system

Each page follows the same overall rhythm:

• Header with name/title branding
• Primary navigation bar
• A page banner (hero image)
• Main content (often collapsible/accordion-based)
• An aside/contact area
• Footer

That consistency matters for employers and recruiters because it reduces friction: once a reader understands one page, they understand the whole site.

Visual identity: the “cube” motif + restrained palette

The CSS makes branding explicit and repeatable. A “cube” mark appears in the header and is reused as a small motif in headings across the site. It’s subtle, but it unifies the pages into a cohesive “product” rather than a set of disconnected documents.

Section-specific hero banners for orientation

The site uses unique banners per section:

• mainBanner.jpg
• employmentBanner.jpg
• educationBanner.jpg
• skillsBanner.jpg
• awardsBanner.jpg
• organizationsBanner.jpg

This is one of those deceptively simple UX wins: it helps readers orient instantly (“I’m in Employment now”) without having to re-parse the page.

Navigation Design: Fast Scanning for Humans Who Are Busy

The primary navigation is a consistent list of five sections (Employment, Education, Skills, Awards, Affiliations). Each item is styled with a matching icon (e.g., employment25.png, education25.png, etc.), which makes scanning easier and supports quick recognition.

Under the hood, each nav item has a semantic class (employment, education, skills, etc.), making styling predictable and scalable.

Typography and Brand Tone: Embedded Webfonts (Properly Packaged)

Fonts are included locally via @font-face rather than relying on an external font service. The _fonts/ directory includes multiple families and weights (Cantarell variants plus additional typefaces), along with license text files—a practical “this was built responsibly” touch that devs and teams appreciate.

Front-End Development: Progressive Enhancement + Purposeful Interactivity

This project does not try to “app-ify” a resume. It stays content-forward and uses JavaScript where it helps:

jQuery UI accordion for multi-level resume content

_javascript/script.js initializes a jQuery UI accordion on ul.trackAccordion:

• collapsible: true
• heightStyle: "content"

That accordion pattern is used for nested, dense content—especially where categories and subcategories make sense (employment entries, grouped skills, grouped awards, etc.). The HTML uses a multi-level structure (level 1 → level 2 → level 3) that keeps long content navigable.

A custom checkbox-driven accordion for Education

education.html uses a separate accordion approach built around:

• ul.cd-accordion-menu
• nested <input type="checkbox"> + <label for="..."> pairs

_javascript/main.js listens for checkbox changes and slides nested lists open/closed.

Why this matters: it shows the builder didn’t force a single widget onto every page. The Education section is complex (institutions → programs → courses/grades), and the checkbox+label pattern maps neatly to that hierarchy.

Animated Page Transitions: Polished, Not Noisy

The site uses Animsition to fade pages in/out:

• inClass: 'fade-in'
• outClass: 'fade-out'
• inDuration: 800
• outDuration: 500
• transitions trigger via .animsition-link

This is a professional flourish: it makes navigation feel intentional without turning the resume into a theme park ride.

(Theme parks are for weekends. Resume sites are for getting hired.)

Performance and Asset Choices: Small Optimizations That Add Up

One particularly smart detail lives in the CSS: several social icons are embedded as base64 data URIs. That reduces external image requests and makes the site easier to deploy as a portable, self-contained bundle.

Also worth noting: the project relies on CDNs for some libraries (jQuery/jQuery UI/Animsition), which keeps the repo light and setup simple—but also provides a clear improvement path if an offline/airgapped deployment ever mattered.

Maintainability Notes: Honest Tradeoffs, Clear Upgrade Path

The CSS sets a fixed desktop width:

• body { width: 1280px; margin: 0 auto; }

That’s a very “2016” decision (and it matches the era this project represents). Modernizing would be straightforward:

• add a responsive viewport meta tag
• migrate layout to flex/grid
• replace fixed widths with responsive constraints

Also, navigation is duplicated in each HTML page. That’s normal for static sites of this style, and it’s easy to maintain at this scale—but it’s an obvious next step if this were ever moved into templating (server-side includes, a static site generator, or lightweight build tooling).

Why Employers, Recruiters, and Developers Should Care

This project demonstrates:

• Clear communication design: content is structured for real readers
• Consistency: repeatable layouts, icons, banners, and typographic hierarchy
• Practical front-end engineering: interactive where helpful, static where appropriate
• Maintainable organization: clean directories, centralized CSS, scoped JavaScript
• Tasteful polish: animated transitions that enhance professionalism without distraction

In short: a resume site that behaves like a product, not a homework assignment.

From Console to Browser:
The Journey of Virtual World:

Virtual World is a Java-based project originally developed as a console application and later extended into a browser-accessible user interface. The project demonstrates object-oriented design fundamentals, backend logic reuse, and the practical transition from a terminal-driven program to a lightweight web application.

Designed as an interactive “virtual world,” the application allows users to create a personal profile (“Clone”), optionally define a companion dog, and interact with a message-driven system known as the ShoutBox. While intentionally playful in concept, the project’s real strength lies in its architecture and extensibility.

Project Origins and Purpose

The project began as part of an academic Java curriculum focused on object-oriented programming. Rather than remaining a one-off console assignment, the application was later expanded to demonstrate how existing backend logic can be repurposed for a web interface without rewriting core functionality.

This evolution mirrors real-world development scenarios where legacy or internal tools are gradually modernized for browser access.

Core Application Design (Java)

The foundation of Virtual World is a cleanly structured Java application emphasizing clarity and separation of concerns:

• Model Classes represent user data, including the Clone and optional Dog profile.
• Behavioral Logic is centralized in the ShoutBox component, which generates both predefined and randomized messages.
• Input Flow guides users through profile creation and interaction without relying on external libraries.

The design avoids unnecessary dependencies, making the project easy to compile, run, and extend using standard Java tooling.

Transition to a Web Interface

To modernize the user experience, the project introduces a minimal browser-based UI layered on top of the existing Java logic.

This extension includes:

• A lightweight Java HTTP server responsible for serving static files and handling requests.
• A simple REST-style API that exposes application functionality to the frontend.
• A vanilla HTML, CSS, and JavaScript interface that mirrors the original console workflow.

The web UI replaces terminal prompts with form-based interactions, allowing users to create profiles and trigger ShoutBox messages directly from the browser.

Frontend Design and User Flow

The interface is intentionally straightforward and readable, focusing on usability rather than visual excess.

Key UI characteristics include:

• Clear navigation between sections such as About, Your Clone, and Your Dog
• Form-driven input replacing console prompts
• Instructional content that guides users through the application flow
• Consistent styling with a restrained color palette suited for a technical demo

The frontend is framework-free, emphasizing fundamentals and making the logic easy for other developers to review.

Backend Endpoints and Integration

The embedded server exposes endpoints that support:

• Health checks
• Profile submission
• ShoutBox message generation (random and predefined)
• Custom message input

This structure reflects common microservice patterns at a small scale and demonstrates how backend logic can be surfaced cleanly to a UI without introducing unnecessary complexity.

Technical Stack

• Java (console application and HTTP server)
• HTML5
• CSS
• Vanilla JavaScript
• Localhost-based execution for development and testing

Why This Project Matters

Virtual World highlights several skills relevant to professional software development:

• Applying object-oriented principles in Java
• Designing reusable backend logic
• Extending existing applications without rewriting core systems
• Bridging backend code to a browser interface
• Implementing basic API patterns and client-server interaction

While modest in scope, the project demonstrates thoughtful engineering decisions and an understanding of how applications evolve over time.

Conclusion

Virtual World is a practical example of transforming a console-only Java application into a browser-accessible tool while preserving clean architecture and code reuse. It reflects a mindset focused on maintainability, adaptability, and real-world development patterns—qualities valued by recruiters, employers, and fellow developers alike.

Jamison Web Design:
A Static Business Website

The Jamison Web Design project is a fully static business website created to present services clearly, establish credibility, and guide visitors toward contact. The project focuses on clarity, reliability, and straightforward front-end execution—demonstrating how a professional web presence can be built without unnecessary complexity.

This site reflects a practical, real-world approach to web design, prioritizing usability and maintainability over trends.

Design Approach

The design follows a familiar and intentional business-site structure. A consistent page layout—header, navigation, main content, and footer—keeps users oriented and reduces friction as they move through the site.

The homepage features a rotating image slideshow, used to introduce the brand visually and draw attention without overwhelming the content. Typography is customized through embedded fonts, giving the site a distinct identity while maintaining strong readability.

Visual elements such as gradients, shadows, and rounded corners are applied with restraint. These details add depth and polish while keeping the overall aesthetic professional and approachable, aligning with the expectations of service-based clients.

Site Structure & Content

The website is organized around clearly defined pages, each serving a specific business function:

• The Home page establishes tone and purpose.
• The Services page outlines offerings in a clear, client-focused manner.
• The Projects page functions as a portfolio showcase.
• The Testimonials page provides social proof and trust signals.
• The Contact page includes a functional form with success and error feedback.

This structure demonstrates an understanding of information hierarchy and user flow, guiding visitors naturally from introduction to engagement.

Development & Technical Execution

From a development standpoint, the project is intentionally lightweight and portable.

The site is built entirely with static HTML, CSS, and JavaScript. Presentation, structure, and behavior are cleanly separated, making the codebase easy to understand and maintain. Interactive elements, such as the slideshow, are handled with simple JavaScript rather than heavy dependencies.

Feature detection is used to support broader browser compatibility, ensuring the site degrades gracefully where needed. Because there is no backend or build process, the site can be deployed on virtually any standard web host or static hosting platform with minimal setup.

What This Project Demonstrates

For recruiters and employers, this project highlights several core strengths:

• The ability to design and deliver a complete, client-ready website
• Strong front-end fundamentals without reliance on frameworks
• Clean organization and maintainable code
• Practical understanding of deployment and hosting realities
• A user-first mindset focused on clarity and accessibility

Rather than a concept or experiment, this is a finished product designed for real use.

Final Take

The Jamison Web Designwebsite stands as a solid example of classic static web development done right. It emphasizes usability, clarity, and dependable execution—qualities that remain valuable regardless of tools or trends.

For teams maintaining legacy systems, building marketing sites, or valuing strong fundamentals, this project demonstrates a grounded and professional approach to front-end work.

Mi Familia Taco Catering:
Front-End Design with Intention

Some projects shout. This one speaks calmly, confidently, and knows exactly what it’s doing.

The Mi Familia Taco Catering project is a small static website built for a real business with real goals: present services clearly, guide users toward contact, and work reliably everywhere. Under the surface, it also serves as a grounded example of thoughtful front-end engineering—where structure, usability, and restraint matter more than flash.

This isn’t a demo site. It’s a working one. And that’s where its strength lives.

Intentional Structure, Not Just Pages

The site is organized around a clear, repeatable layout system. Navigation, headers, content blocks, and side elements are consistent across pages, creating a predictable experience for users and a maintainable codebase for developers.

Rather than duplicating chaos, the structure mirrors what modern component systems aim for: reusable patterns expressed through static HTML. The result is a site that feels cohesive, readable, and easy to extend—without relying on frameworks or build tools.

Design That Serves the Business

The visual design is restrained and practical. Typography, spacing, and color choices keep the focus on the content—menus, services, photos, and contact information—rather than decorative noise.

The layout supports scannability and decision-making. Users can quickly understand what’s offered, how it works, and where to go next. This is front-end design aligned with purpose, not aesthetics for their own sake.

A Clear Conversion Path

At its core, the site supports a simple but effective user journey:
learn about the service → view offerings → make contact.

The catering request form is integrated into this flow, supported by success and error handling pages that keep users oriented. While the form submission itself is handled externally, the front-end experience remains cohesive and predictable.

Lightweight, Purposeful JavaScript

JavaScript is used sparingly and deliberately. There are no heavy libraries, no unnecessary abstractions, and no visual gimmicks.

Scripts handle focused enhancements such as navigation behavior and a photo gallery slider. These additions improve usability and presentation without becoming dependencies. The site remains functional even if JavaScript is unavailable, reinforcing a progressive enhancement mindset.

Progressive Enhancement as a Baseline

The site works as a complete experience with HTML and CSS alone. JavaScript layers on polish rather than serving as a structural requirement.

This approach improves accessibility, performance, and long-term stability, while demonstrating respect for the web as a resilient platform.

2026 Refresh: Modernized With Restraint

In 2026, the project received a careful update focused on longevity rather than reinvention.

Legacy elements were removed, markup was modernized, and outdated dependencies were eliminated. Older patterns such as unnecessary shims and library reliance were replaced with clean HTML5 and lightweight vanilla JavaScript. The photo gallery was refreshed with a simpler, more maintainable slider, and responsive behavior was refined for modern devices.

Importantly, the site was not rewritten. The update preserved the original structure and intent while bringing the implementation forward—demonstrating an ability to maintain, improve, and modernize existing codebases without disruption.

This refresh reflects real-world front-end work: incremental improvement, respect for working systems, and decisions guided by usefulness rather than trends.

Why This Project Matters

The Mi Familia Taco Catering website demonstrates something increasingly valuable: restraint paired with intention.

It shows how a small static site can reflect professional front-end thinking—clear structure, purposeful design, clean code, progressive enhancement, and thoughtful long-term maintenance. For recruiters and employers, it offers a grounded example of how real websites are built, cared for, and improved over time.

Sometimes the most honest measure of front-end skill isn’t how much technology is used—but how well the fundamentals are respected.

Chronicles of the
2015 RPG Book Project:

The 2015 RPG Books Project is a static web catalog designed to organize and present tabletop role-playing game books with clarity, consistency, and intent. Built during a period when simplicity and portability mattered more than frameworks, the project demonstrates a thoughtful balance between structure, usability, and technical restraint.

Rather than chasing trends, this project focuses on fundamentals: clean information architecture, predictable UI patterns, and an implementation that can be deployed anywhere with zero configuration.

Purpose and Scope

The project’s primary goal is to present a structured, browsable library of RPG books organized by game system and category. Each section reflects how users naturally think about collections—by edition, system, and type—making navigation intuitive even as the catalog scales.

Key characteristics include:

• A system-based organizational model (e.g., multiple editions and RPG lines)
• A static, dependency-free build designed for longevity
• Human-readable markup that prioritizes clarity over abstraction

For employers and developers, this signals a strong grasp of real-world constraints: speed, reliability, and ease of maintenance.

Information Architecture

The site’s structure mirrors its content model. Each RPG system lives in its own directory, with subpages dedicated to specific categories such as core rulebooks or adventure content. This predictable hierarchy allows both users and maintainers to understand the site at a glance.

There is no hidden magic here—just deliberate, well-planned organization. Pages are connected through relative paths, enabling seamless navigation whether the project is viewed locally or deployed to a server.

This is content-first architecture: the structure exists to serve the data, not the other way around.

Visual Design and Layout Strategy

Visually, the project favors consistency and familiarity over experimentation. Book covers are presented in uniform thumbnail tiles, arranged in structured grids that repeat across pages. This repetition reduces cognitive load and creates a stable browsing experience.

Tables are used intentionally to enforce alignment and predictable spacing, reflecting the era’s standards while also guaranteeing visual stability across environments. The result is a layout that may be understated, but never confusing.

The design philosophy is simple: if every page behaves the same way, users don’t have to relearn the interface.

Code Organization and Maintainability

Assets are cleanly separated from content. Stylesheets, scripts, and images live in dedicated resource directories, while content pages remain focused on markup and structure.

Naming conventions are consistent and descriptive, making it easy to locate assets and understand their purpose. Adding new content follows a clear, repeatable workflow: place the image, add the markup, and link it into the appropriate index.

This approach lowers the barrier for future contributors and minimizes the risk of accidental breakage.

Deployment Philosophy

The project is intentionally static. There is no build step, no runtime dependency, and no environment-specific configuration. If a browser can open a file, the project works.

This makes the site:

• Extremely fast
• Portable across hosting environments
• Resistant to long-term breakage

It’s a reminder that reliability often comes from simplicity, not complexity.

Intentional Constraints

Technical decisions such as strict markup standards and traditional layout techniques are deliberate, not accidental. They reflect a disciplined mindset: choosing tools based on stability and predictability rather than novelty.

The project also acknowledges future evolution. Its structure naturally lends itself to modernization—responsive layouts, semantic HTML updates, or enhanced accessibility—without requiring a rewrite. That forward-thinking restraint is a quiet but valuable skill.

What This Project Demonstrates

For recruiters, hiring managers, and fellow developers, the 2015 RPG Book Project highlights:

• Strong information architecture and content modeling
• Consistent, repeatable UI patterns
• Clean separation of concerns
• A pragmatic understanding of deployment and longevity
• The ability to build systems that scale without overengineering

This is not a flashy demo. It’s something better: a calm, well-reasoned example of how to design and build a maintainable web project with intention.

Final Thoughts

The 2015 RPG Books Project feels like a well-used rulebook—dog-eared in the right places, easy to reference, and built to survive years of use. It reflects a developer who values structure, clarity, and sustainability. In a world obsessed with novelty, that kind of discipline quietly stands out.

FrankJamison.com:
Front-End Foundations

The 2015 version of FrankJamison.com represents a clear, inspectable moment in the evolution of a developer learning the web by building it directly. This repository captures a static portfolio site from an era when frameworks were optional, experimentation was manual, and understanding the fundamentals actually mattered.

For recruiters and developers reviewing this work today, its value lies not in trend-chasing, but in evidence of foundational skill development.

What This Project Is — Explicitly

FrankJamison.com in this repository is a static portfolio website built with classic front-end technologies and designed for straightforward hosting and maintenance. It’s a clear artifact of someone learning how to construct a responsive web presence from scratch and demonstrates hands-on understanding of core web development principles.

What This Project Actually Is

This project contains a single-page static website delivered through plain HTML, CSS, and JavaScript. Instead of relying on frameworks or build systems, the site leverages:

• A traditional index.html as the sole entry point
• A responsive grid and layout provided by Bootstrap
• jQuery for legacy interactions
• Custom styling and optional theme “skins” via CSS
• Assets (fonts, icons, images) used directly from relative paths

There’s no compilation, bundling, or framework setup — just front-end fundamentals assembled in a way that any recruiter or developer can open locally or serve with a simple static server.

Design & Development Features

Recruiters and engineers reviewing this codebase can immediately see:

Responsive layout powered by Bootstrap

The site structure is built around well-organized section blocks and grid patterns, making it usable across screen sizes without complex responsive media queries.

Optional theming via CSS “skins”

Instead of hard-coding colors throughout the base styles, the project includes interchangeable color stylesheets in css/colors/ — a simple but effective theming method that separates palette from structure.

Clear separation of concerns

Markup (index.html), styles (css/), behavior (js/), and assets (images/, fonts/) are each placed in their own folders. This makes the project instantly navigable and extensible without tooling overhead.

No build step, no dependencies beyond the essentials

This site can be served directly from any static host, GitHub Pages, or a simple local HTTP server. There’s no Node, no bundlers — just the web as it was meant to be consumed.

Why This Matters to Recruiters

This portfolio site is particularly valuable because it reveals intent and competence:

• ou chose not to hide behind abstractions — you worked with the technologies at the browser level.
• The structure is logical and maintainable, not generated by an opaque toolchain.
• A reviewer can clone the repo, run a static server, and see exactly what you built without onboarding piles of dependencies.

That transparency speaks loudly to both developers and recruiters who want to understand how a candidate constructs architecture and organizes a project.

Final Thoughts

This is a portfolio site with real code you can hold in your hands — not a compiled artifact hidden behind toolchains. For its time and for today, it shows a developer comfortable with:

• The DOM, layout, and responsive design
• Classic JavaScript behavior
• Project structure and organization
• Deployable static delivery with minimal friction

In short: a solid demonstration of front-end fundamentals done deliberately and understandably.

FrankJamison.com:
A Personal Web Presence, Structured by Craft

What you’re looking at with the 2013 version of FrankJamison.com isn’t a template, a boilerplate, or a modern static-site generator project. It’s a real, preserved legacy personal site from 2013, intentionally kept static, no build tools, no frameworks — just classic web fundamentals tuned for real browsers and real humans.

In a world where projects spin up with React/Vite in minutes, there’s something grounding about code that was written to work everywhere, from old desktop browsers to modern phones. Let’s unpack both how it works and why it matters technically.

What This Project Actually Is

At its heart, the 2013 version of FrankJamison.com is:

• A static, multi-section personal site — home, portfolio, writing archives, galleries, music, poetry, resume, and contact form.
• Written in classic HTML / CSS / JavaScript with no dependency on modern build systems.
• Includes a working PHP contact form that talks to SMTP instead of relying on mail() — important for real-world reliable email handling.
• Preserves legacy tech like a Flash banner by embedding it via Ruffle (a WebAssembly Flash emulator) so it still runs in modern browsers without plugins.

This isn’t a museum piece glued together; it’s maintainable and runnable today. It even includes instructions for local virtual host configuration.

Architectural Overview

Directory Layout & Static Pages

The repository follows a traditional folder structure:

• index.htm — main landing page
• resume/, portfolio/, gallery/, music/, poetry/ — sectioned content folders
• contact/ — contact form and server integration
• resources/ — shared CSS, JS, images, and Ruffle assets

There’s no index.html by design — it’s index.htm, a choice that harks back to early web servers and compatibility considerations.

Shared UI, the Old-School Way

Instead of components or includes at build time, this site uses runtime JavaScript includes to import repeated UI elements (header, menu, footer). The core pattern:

• menu.js — primary nav
• resumeMenu.js — side nav for resume section
• header.js — sets up the Ruffle instance to play the Flash animation
• footer.js — shared footer markup

These scripts use DOM methods like document.write() to inject HTML. Yes, that’s frowned upon today, but in 2013 it was a standard way to centralize shared layout before templating engines were mainstream.

Preserving Legacy Flash with Ruffle

One of the coolest parts living in this repo is the Flash banner:

• Original .swf file lives at: resources/sfw/header.swf
• Loaded in the browser using the bundled Ruffle WebAssembly build found in: resources/ruffle/

This is a real-world example of running historically obsolete content using modern browser tech — a great case study in graceful degradation and forward-facing compatibility layers.

Contact Form: PHP + SMTP

Instead of mail(), the site uses SMTP with authentication — much more reliable on shared hosts.

Configurable via:

• Environment variables (preferred)
• A local smtp_settings.php (gitignored)

The code even logs failures to contact/sendmail_failures.log, a simple but pragmatic debugging pattern.

Technical Considerations for Modern Maintenance

Absolute Root Paths

The site uses absolute-root URLs like /resources/... and /resume/.... That’s fine for a root deployment, but it breaks under subpath hosting unless you rewrite paths — a classic gotcha when migrating legacy static sites.

Character Encoding

Most pages declare charset=iso-8859-1. This is unusual today, where UTF-8 is the de facto standard. Keeping this consistent avoids mangled text (mojibake) in older content.

GitHub Metadata

• No description or topics are set for the repository, which lowers discoverability.
• No releases, stars, or forks — but this is intentional; it’s a portfolio preservation project, not a deployable piece of infrastructure.

Why Developers Should Care

Even if you’ll never write HTML like this again, this project is a miniature case study in:

Web Fundamentals

• Static pages tuned for browser compatibility
• Manual DOM manipulation for shared UI
• Handling server interactions with minimal backend code

These are skills that still matter when you’re debugging legacy systems, optimizing performance, or doing a quick proof-of-concept without a toolchain.

Legacy Tech Integration

Ruffle + WebAssembly is an elegant, real example of emulating obsolete tech in a modern runtime — something increasingly relevant with archived games, animations, or legacy UIs.

This repo isn’t just a snapshot; it’s an exemplar of incremental preservation — keeping old tech alive without reinventing the wheel.

TL;DR for Devs

• Classic static web project from 2013 with modern maintenance touches.
• JS includes instead of templating engines.
• Flash preserved via Ruffle (WASM).
• PHP SMTP instead of mail().
• Absolute root paths and iso-8859-1 encoding warrant careful handling.

Globe Bank:
Global Finance, Structured by Design

The Globe Bank project is a throwback to the era when financial institutions presented themselves on the web with calm authority and no unnecessary flourishes — and it backs that design with a real database-driven system rather than a static mockup. This project lives in the sweet spot between historical aesthetic and functional engineering, showing how early CMS-style sites were built with practical PHP, MySQL, and thoughtful routing.

At its core, the Globe Bank project isn’t just pixels on a screen — it’s a working content management system where site content, navigation subjects, and pages are stored in a database and rendered dynamically for both visitors and authenticated staff.

Design Philosophy: Quiet, Balanced, Predictable

The visual design respects the expectations of a global finance interface from the late 2000s:

• A grid-based structure that reinforces clarity and hierarchy
• Typographic choices that prioritize legibility over flair
• A subdued palette (think blues and neutrals) that evokes trust and stability
• Navigation that’s intuitive rather than clever, because in financial contexts, familiarity isn’t boring — it’s reassuring

This kind of design communicates one thing clearly: you can rely on this interface to show you what you need, without noise or distraction.

The interface doesn’t surprise the user with animations or unexpected layouts: it’s about function over flash, a reflection of how users expected bank sites to behave in that era.

Tech Stack: PHP, MySQL, and Intentional Simplicity

GlobeBank is implemented using a classic LAMP-style stack:

This isn’t a modern framework — it’s the real deal: raw PHP with structured code organization that separates public site rendering from admin interfaces.

Instead of bundling CSS and JS frameworks, the project keeps dependencies minimal, focusing on:

• Semantic HTML
• Clean, purposeful CSS
• Minimal JavaScript only where interactions benefit the user

These choices keep the system fast, clear, and easy to maintain, which was critical in an era of varied connection speeds and browser capabilities.

Real Database Integration: Making It Functional

One of Globe Bank’s strengths is that it isn’t a static brochure — it’s backed by a MySQL database with real schema files included (setup_database.sql). The database contains structured tables such as:

• subjects: which represent navigational sections
• pages: which hold the actual content displayed publicly
• admins: for staff access control

Through this database, the site can:

• Dynamically generate navigation
• Render pages based on database content
• Allow authenticated staff to add or edit content

This is a true content management experience, albeit simple and focused, demonstrating how early CMS systems delivered flexibility without the overhead of modern frameworks.

Routing and Site Structure

The project uses a thoughtful approach to routing that reflects the flexibility needed in different deployment environments:

• A root index.php file redirects into public/, where the public-facing site lives
• The application computes a root directory dynamically, allowing the site to work whether the public/ directory is the web root or not
• A structured private/ directory contains database connections and shared templates that are not directly web-accessible

This separation between public code and internal logic enhances security and mirrors good practice even by modern standards.

Staff Area: Authentication and Administration

The staff area is password-protected, providing:

• A login screen
• An admin menu
• Pages to manage content such as subjects and pages

The authentication logic leverages PHP sessions and bcrypt-hashed passwords, with clear guidance on originating a first admin account by inserting a hashed user directly into the database — a practical approach for early dev workflows.

Why This Project Matters

The Globe Bank project is more than a historical reconstruction — it’s an honest, functional example of how database-backed PHP sites powered real content in the late 2000s. It shows that:

• Structured, predictable design supports user trust
• Database integration enables durability and reuse
• Clean, minimal stacks can still be expressive and purposeful

As a portfolio piece, it speaks to both design sensibility and practical backend engineering, highlighting a thoughtful grasp of how sites were built — and how foundational skills still matter today.

Web Discipline and Authority:
MSJC Administration of Justice Dept. Website

Somewhere between dial-up patience and broadband optimism, this site quietly did its job. The 2006 MSJC Administration of Justice project is a time capsule from an era when academic websites were less about flair and more about function. No parallax hero images. No performative gradients. Just structure, clarity, and a firm belief that information should stand at attention and be counted.

Built for the Administration of Justice Department at Mt. San Jacinto College, the site reflects the mindset of both the discipline and the moment. Criminal justice programs in the mid-2000s emphasized hierarchy, procedure, and systems—and the web design mirrors that worldview. Navigation is straightforward. Content is clearly segmented. Every page feels like it’s been pressed into a uniform and told not to fidget.

Visually, the site leans into early-web academic norms: restrained color palettes, table-driven layouts, and typography chosen for legibility over personality. This wasn’t a site trying to impress strangers. It was built to serve students—to house coursework, outline expectations, and provide a dependable reference point in a pre-LMS world where Blackboard was still finding its footing.

What makes this project interesting now isn’t just nostalgia; it’s restraint. The design resists excess. It assumes the reader is there with purpose. In today’s attention-economy web, that kind of confidence feels almost radical. There’s an implicit trust that the content matters enough to stand on its own, without animation begging you to look.

As part of the broader 2006 archive, this project shows how educational web design once functioned as infrastructure rather than branding. It’s a reminder that before websites tried to be experiences, they were tools—and sometimes, that was exactly enough.

Clean. Orderly. Slightly stern. Very 2006.
Like a syllabus that didn’t smile—but absolutely knew what it was doing.

The Zita Worley Project:
An Early Instructor Website

Some websites age like fine wine. Others age like a forgotten energy drink left in a hot car. And then there are sites like Zita Worley's website—a perfect fossil from the mid-2000s web, preserved not because it was polished, but because it was real.

This project is a faithful reconstruction of a personal website from 2006, back when the web was less corporate, less optimized, and wildly more sincere. No frameworks. No build steps. No analytics whispering judgment into your ear. Just HTML, CSS, and vibes.

The original site lived in that liminal space between GeoCities glitter chaos and the coming wave of Web 2.0 polish. It’s a reminder that personal websites used to be personal—built to express identity, interests, and presence online rather than to convert, monetize, or scale.

What This Project Preserves

At its core, Zita Worley's website is about historical accuracy and restraint. The goal wasn’t to “improve” the site, but to respect it.

The layout reflects fixed-width design assumptions common at the time, when screen resolutions were predictable and mobile devices were a distant rumor. Typography leans on system fonts and simple hierarchy. Styling is modest, sometimes earnest, sometimes awkward—exactly as it should be.

There’s a quiet confidence in how little JavaScript is doing here. Pages load instantly not because they’re optimized, but because there’s barely anything to optimize. Each page exists because someone wanted it to exist, not because an SEO checklist demanded it.

Why This Still Matters

This project isn’t nostalgia for nostalgia’s sake. It’s a study in how the web evolved—and what it lost along the way.

Rebuilding a site like this highlights how modern development workflows, while powerful, often distance creators from the immediacy of publishing. In 2006, you edited a file, refreshed the browser, and saw yourself reflected back instantly. That feedback loop shaped a generation of self-taught developers.

For recruiters and web history nerds alike, this project demonstrates an understanding of web lineage: knowing where our tools came from, what problems they were solving, and what tradeoffs they introduced.

The Quiet Takeaway

Zita Worley's website isn’t flashy. It doesn’t want to be. It stands as a small, stubborn monument to a time when the web felt like a collection of bedrooms with ethernet cables—messy, expressive, and deeply human.

Sometimes progress means moving forward. Sometimes it means pausing, looking back, and saying: yeah… this mattered.

If nothing else, this project proves one thing with absolute certainty—
we survived Comic Sans, fixed-width layouts, and inline styles… and somehow, we’re better developers for it.

Moonwalk Manor:
A Hotel on the Moon?

In the mid-2000s, the future still felt bold, shiny, and just around the corner. Space tourism was “inevitable,” moon bases were practically booked, and websites loved to imagine what life up there might look like. Moonwalk Manor was built squarely in that mindset—a speculative hotel website imagining luxury accommodations on the Moon, created with the tools and sensibilities of 2006-era web design.

Moonwalk Manor wasn’t parody or horror. It was optimism. A sincere attempt to visualize a futuristic hospitality experience using static HTML, early layout techniques, and design conventions that predate responsive grids and modern UI frameworks. The project framed the Moon not as a distant scientific outpost, but as a destination—complete with amenities, comfort, and aspirational travel copy.

Visually, the site leaned into space-age themes common at the time: dark backgrounds, starry imagery, high-contrast text, and layouts designed for fixed desktop resolutions. Navigation was straightforward, content was page-based, and imagination carried more weight than technical sophistication. This was the era of building first and refining later—if ever.

From a development perspective, Moonwalk Manor represents an important stage of growth. It reflects learning through experimentation: structuring content, organizing pages, and thinking about user experience long before “UX” was a household acronym. The project shows an early understanding that websites could tell stories—not just present information.

Today, Moonwalk Manor serves as a time capsule. It captures how the early web dreamed about the future, and how personal projects often reached beyond current technology to explore what might be possible. In a modern portfolio, it stands as evidence of long-term curiosity, creative thinking, and a willingness to explore ideas well ahead of practical implementation.

The Moon didn’t get its hotels—yet—but the ambition behind Moonwalk Manor still holds up. Sometimes the most interesting projects aren’t about what was achievable, but about what was imagined.

Keystrokes Under Pressure:
A 2006 Typing Speed Test

Some projects shout. Others just sit there quietly, stopwatch in hand, waiting for you to blink. The 2006 Typing Speed Test is firmly in the second camp—simple, focused, and a little bit ruthless in the way only a timer can be.

This project was built as an exploration of clean JavaScript logic, real-time input handling, and UI feedback that doesn’t get in your way. No accounts. No leaderboards chasing dopamine. Just you, a block of text, and the uncomfortable truth about how many typos you actually make when no one’s watching.

And honestly? That’s the charm.

Why a typing test?

Typing speed tests are deceptively elegant problems. On the surface, they look trivial: display text, track input, calculate words per minute. Under the hood, though, you’re juggling state, timing, accuracy calculations, and user experience all at once. Every keystroke matters. Every mistake compounds.

This project leans into that tension. It’s not flashy—it’s precise. The goal wasn’t to reinvent typing tests, but to understand them from the inside out and build one that feels fair, responsive, and honest.

No smoke. No mirrors. Just data.

What it does

At its core, the app presents a predefined passage and starts the clock the moment you begin typing. From there, it tracks:

• Total time elapsed
• Characters typed versus characters correct
• Accuracy as a first-class metric, not an afterthought
• Words per minute calculated from real input, not optimistic guesses

The results update cleanly and clearly, giving you feedback that’s useful without being condescending. You don’t get a gold star. You get numbers. Cold, beautiful numbers.

Design philosophy

The interface stays intentionally minimal. Typing tests live or die by distraction—or the lack of it. Fonts are readable. Spacing is forgiving. The focus stays where it belongs: the text you’re typing and the rhythm of your hands.

There’s a quiet, almost meditative quality to it. Until you miss a character. Then it becomes personal.

Technical notes

From a development perspective, this project emphasizes fundamentals:

JavaScript handles real-time input evaluation, timing logic, and metric calculation without external libraries doing the heavy lifting. State management is explicit and readable, making it easy to reason about what’s happening at any moment during the test. The structure favors clarity over cleverness—future-proofing by being understandable six months from now.

This was less about showing off tricks and more about building trust in the code.

Why it still matters

Typing is still one of the primary interfaces between humans and computers. Faster frameworks and flashier tools come and go, but the keyboard remains undefeated. A project like this reinforces how much user experience depends on tiny, cumulative details—milliseconds, characters, edge cases.

It’s also a reminder that small projects aren’t small achievements. They’re controlled environments where fundamentals get sharpened, instincts get trained, and bad assumptions get quietly corrected.

Final thoughts

The 2006 Typing Speed Test isn’t trying to gamify your productivity or rank you against the internet. It’s just a mirror. Sometimes flattering. Sometimes brutal. Always accurate.

If nothing else, it will teach you one important truth: you type faster when you stop panicking—and slower when you pretend accuracy doesn’t matter. Funny how that works.

Go ahead. Start the test. The clock’s already waiting.

A 2006 Time Capsule:
FrankJamison.com v1.0

Every developer has an origin story. Some start with a bootcamp. Some with a framework tutorial at 2 a.m. Mine? A raw, caffeinated plunge into HTML and CSS in 2006—when rounded corners were a luxury, gradients were loud, and tables were still hanging around like uninvited guests at a LAN party.

This project is a preserved snapshot of that era: the original 2006 FrankJamison.com. Not a remake. Not a refactor. This is the artifact itself—rough edges, earnest ambition, and all.

Back then, the web felt smaller and more personal. You didn’t install a stack; you opened a text editor and started typing. This site grew line by line, fueled by curiosity and a stubborn need to understand how the pieces fit together. Layouts were hand-built. Styles were trial-and-error. JavaScript was used sparingly, because breaking things was easy and debugging tools were… aspirational.

And yet—there’s something beautiful in that simplicity.

This project matters because it shows the long arc of learning. Before frameworks. Before pipelines. Before “best practices” hardened into doctrine. It captures the mindset of a developer at the very beginning: experimenting, breaking things, fixing them, and learning by doing. The design choices reflect the mid-2000s web aesthetic—bold colors, structured layouts, and a clear desire to make something real and public.

Looking at it now, with modern eyes, it’s tempting to critique. But that misses the point. This site isn’t here to compete with modern standards—it’s here to document growth. It’s proof that progress doesn’t start polished. It starts messy, curious, and slightly chaotic.

In a portfolio full of recent projects, this one plays a different role. It’s the prologue. The “level one character with questionable stats.” The reminder that every clean, responsive, well-architected build stands on a pile of early experiments that dared to exist.

So this project stays exactly as it is. No modernization. No cleanup. Just a preserved moment from 2006—when the web was weird, learning was manual, and the spark first caught.

And honestly? I wouldn’t reroll it.

Building Time:
The 2006 Analog Clock Project

Some projects are about scale. Others are about speed. This one? This one is about precision—the quiet, relentless ticking of logic doing exactly what it’s supposed to do.

The 2006 Analog Clock Project is a deceptively simple web application that recreates a classic analog clock using modern front-end techniques. No libraries doing the heavy lifting. No shortcuts. Just JavaScript, CSS, and the stubborn belief that understanding fundamentals is never a waste of time. (Unlike meetings that could’ve been emails.)

Why an Analog Clock?

Because analog clocks are brutal in the best way.

They demand:

• Continuous motion
• Trigonometry hiding in plain sight
• Real-time synchronization
• Visual accuracy down to the degree

Digital clocks forgive you. Analog clocks expose you.

This project was an exercise in translating time as data into time as motion—turning hours, minutes, and seconds into rotating hands that never drift, stutter, or lie.

Under the Hood

At its core, the clock runs on JavaScript’s Date object, polling the current time and converting it into rotational values.

Each hand:

• Seconds rotate at 6° per second
• Minutes rotate at 6° per minute (with second-based offsets for smooth motion)
• Hours rotate at 30° per hour (plus minute offsets, because accuracy matters)

CSS handles the transforms, anchoring each hand at its base so rotations feel natural—no helicopter blades here. Subtle transitions keep motion smooth without introducing lag, because a clock that jitters is existentially unsettling.

Design Philosophy

The visual design stays intentionally restrained.

This isn’t about flashy gradients or glassmorphism flexing for attention. It’s about clarity, contrast, and balance. The face is readable at a glance. The hands are distinct. The clock looks like a clock—an underrated achievement in web design.

Dark backgrounds were chosen to reduce visual noise and keep focus on motion, reinforcing the idea that time should flow, not shout.

What This Project Proves

This project demonstrates:

• Comfort with JavaScript timing and real-time updates
• Practical use of CSS transforms and positioning
• Attention to mathematical detail
• Respect for classic UI metaphors
• An understanding that fundamentals scale better than frameworks

It’s also a reminder that not every portfolio piece needs to be a sprawling app with fifteen dependencies and a build step that could summon ancient spirits.

Sometimes, mastery looks like restraint.

Final Thoughts

The 2006 Analog Clock Project is a quiet project—and that’s its strength. It ticks along faithfully, doing one thing well, every second, without complaint. Honestly? Goals.

Time is relentless. Code doesn’t have to be.

And if you can make something as unforgiving as an analog clock behave perfectly in the browser, you’re probably ready for much bigger monsters.

Next project. Same discipline. Fewer mercy rolls.

Hello, World
(But Make It Intentional).

Every portfolio has a beginning. This is mine.

I’ve spent years working at the intersection of structure and creativity—teaching mathematics, supporting learners with wildly different needs, troubleshooting systems when they fail at inconvenient times, and quietly building things after hours just to see if I could make them work. Somewhere along the way, code stopped being a curiosity and became a language I wanted to speak fluently.

This site exists to document that journey.

Not as a highlight reel—those are easy—but as a living record of growth. The experiments that worked. The ones that didn’t. The bugs that taught me more than the tutorials ever did. The small wins that stack into real momentum.

Why Software Development?

Because software rewards clarity.
Because systems thinking feels like home.
Because solving a problem once—and solving it well—is a kind of quiet magic.

Coming from education and technical support, I’ve learned how people actually interact with systems, where they get stuck, and how fragile confidence can be when technology doesn’t behave. That perspective shapes how I approach development: practical, empathetic, and relentlessly user-focused.

What You’ll Find Here

This blog will evolve alongside my skills. Expect posts about:

• Projects I’m building (and rebuilding)
• Front-end and back-end experiments
• Lessons learned the hard way
• Design decisions and tradeoffs
• The occasional rant about why something should be simpler

If you’re here to skim code, great.
If you’re here to understand how I think, even better.

Where This Is Going

The goal isn’t perfection. It’s progress.

Each post is a marker on the road—proof that I’m moving forward, refining my craft, and taking ownership of the work I put into the world. I believe good developers aren’t just problem solvers; they’re communicators, learners, and builders with taste.

This blog is part of that practice.

Thanks for stopping by.
The next post will be more technical. Probably less poetic.
But no promises.

— Frank