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
Sand
Field
Sky
Flower
Shadow
Light
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.
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
