Tammy Hart

Frontend Engineer & Designer

From the minds of Chloe & Tammy Hart

A World Website Where Fantasy & Dragons Reign

Immerse yourself where fans and supporters of the TV production project “Heir of Dragons” will launch its presence into the world.

Artwork is used by permission from the artist and copyright holder: Chloe Hart

Problem

Chloe has a lot of art and information she wants to share to help encourage interest in her project but no reliable way to present it

Solution

Create a custom website to present the project to potential fans, supporters, and investors

Story

Premise

Get an introduction to the story and the purpose of this project

Anthology

Read story spin-offs and other related minor works

Official Art

Be enchanted by Chloe’s rich, original story artwork

World

Map

Explore the kingdoms and dragon domains of Asparia

Book of Dragons

Learn about the various dragon types and what magic they wield

Magic of Nature

Flip through the language of Asparia’s unique fauna

Draconic Glossary

Hear the words dragon riders use to communicate with their mounts

Characters

Character Sheets

Get to know the people that make this story come to life

Family Lineage

See the royal ancestry in the Windward family tree

Community

Forum

Connect with Chloe and fans of the project for updates and discussions

FAQ

Find quick answers to common questions or ask your own

Fan Art

Enjoy fan renditions of original characters, dragons, and more

Problem

Chloe needs a way to communicate with fans and supporters as the project progresses to keep track of questions, ideas, and even fan art submissions

Solution

Include a forum for the online community and a way to connect directly with Chloe

  • Chloe designed a logo and provided a rough layout mockup

  • We discussed goals of the project as a whole and for the website

  • We mapped the overall navigation

  • I took to Figma, began laying out the main navigation of the site, and started on the intro graphic

  • On the homepage, I decided to include a feature of content from one area of each section

  • A design language started shaping as I settled on fonts, colors, and icons

  • I started crafting the Forum pages which set the standard for the hero and sidebars

  • Figma prototyping let me click through the views as if it were a live site which helped me make decisions about breadcrumbs and visual hierarchy

  • I decided to jump tracks and see what the mobile experience would feel like

  • Slowly, large sections of the site began to come together

  • There are still plenty of pages to be designed, but I am well on my way

Problem

Chloe needs a way to collect the email addresses of interested supporters as well as donations from those ready to give

Solution

Include email subscription and donation forms

Brand
Gold
White
System
Sand
Sand
Sand wet
Sand floor
Field
Field
Field wet
Field shadow
Sky
Sky
Sky deep
Sky night
Flower
Flower
Flower bright
Flower deep
Shadow
Shadow touch
Shadow light
Shadow
Shadow dark
Light
Light scarce
Light soft
Light
Light bright

Style Display Caps

This function looks at each word in a string and determines if it begins with a capital letter. If it does, it wraps the letter in a span tag so that they can be assigned the proper font face.

View on CodePen
const formatCaps = text => {
  const formattedWords = text.split(" ").map(word => {
    const firstChar = word.charAt(0);
    
    if (!firstChar.match(/[a-z]/i) || firstChar !== firstChar.toUpperCase()) {
      return word;
    }
    
    const cap = document.createElement("span");
    cap.textContent = firstChar;
    
    return cap.outerHTML + word.slice(1);
  });

  return formattedWords.join(" ");
}

Tech Stack

  • Strapi: A headless CMS that provides a rich content and admin experience with a RESTful API

  • Remix: The React Framework I use to deliver the content from the CMS

  • React: The library I use to create my components and view structures

  • TypeScript: The language my frontend work is in, with a nicely organized type library

  • Styled Components: My chosen method for styling and maintaining the design system and component library