Solution Architecture

Architecture Overview

The business needs justified having a static website over a dynamic one, so we just need an html file in an AWS S3 bucket. To facilitate people reaching it securely, I've set up DNS routing through Route 53, distributed through CloudFront, and implemented a firewall (WAF) prior to reaching content. Another bucket is used as a backup. This isn't the entire prcoess for security reasons, but the diagram should convey the overall flow.

Implementation Details

I started by creating a Hosted Zone to host the domain. This should be thought of as your area to work in for the network. If you have a site already you would like to bring over (like I did), take special note of the details portion to view the 4 AWS Name Servers. These are effectively your preferred DNS. It's highly recommended to change these on your site prior to beginning the transfer process to ensure traffic will continue without interuption. If you don't do this now, doing it later will cause the site to be unavailable for a couple of days as services get updated.

After bringing the domain over and configured properly, I set up 2 buckets. 1 to point directly to the static site and another to serve as a backup in another region. If my site goes down, I can redirect to the backup bucket. While there may be more advantageous backup solutions, this works well for a currently simple site.

For additional accessibility and security, I also used CloudFront. This allows me to provide quick access of cached content and enable WAF (a decent firewall). Enabling CloudFront also meant walking through the process of creating a SSL certificates and securing the site.

Finally, Route53 was configured to ensure www.whitesheepgaming.com redirects properly to whitesheepgaming.com.

The website design itself utilizes a CSS file for styles to keep the html content relatively clean across all pages, as well as provide easy scaling so content can be viewed on a variety of mobile devices. This was tested using the Device Selector within the Inspector Tool of the browser.

The html pages were primarily composed in Notepad++, but I've been adapting to Microsoft's Visual Studio Code and using Amazon's CodeWhisperer extension to expand AI knowledge/interaction. If the site grows, I would move twoards EC2 instances for scaling.

Website Updates

This website has gone through a massive redesign to showcase a modern, responsive design built with clean HTML5, CSS3, and vanilla JavaScript. The architecture focuses on performance, accessibility, and maintainability.

The original design was created from scratch so I would have applied experience in creating html pages. After exploring other similar sites, I used a couple of AI tools to assist increating a more dynamic design. AI is a wonderful tool as long as you understand what it's trying to accomplish so you can make your own corrections!

Key Features

• Responsive grid layout that adapts to all screen sizes
• CSS Grid and Flexbox for modern layout techniques
• Smooth animations and hover effects for enhanced UX
• Secure cost-effective structure using AWS
• Backup solution and Versioning for redundancy

Design Principles

Multi-Cloud Integration

A friend of mine mentioned that they made a purchase in my game. While I could find the transaction history, I wished I had a direct notification. So I used this as an opportunity to design. I wanted specifically an email with variable info within the subject line and the body containing Who, What, When, above any other info or metadata. I sat down and created a multi-cloud solution that's nearly free given the expected volume for a small business. This method also allows me to store information in a streamlined approach instead of a pull/download.

Architecture Components

Implementation Benefits

• Customized communication with relevant information
• Cost optimization by leveraging each platform's strengths
• Scalable architecture that grows with user demand