Gamecraft: a portfolio website

This is a static website for a fictional videogame creation tool called Gamecraft, made for Code Institute's 1st submission project.

Live version is available here.

Important notes

The site features both internal and external links. Since Gamecraft doesn't actually exist, the external links are intentionally non-functional, and are only there to make the site look more believable. You can identify these links on desktop by the cursor changing to the "forbidden" sign when you hover over the link.

For the same reason, images of Gamecraft features and example projects are stock images rather than real screenshots.

The documentation is split across three files:

• README.md (this file): Overview of the website. Read this to get an idea of the basic structure, technologies used and project conventions.
• DESIGN.md: UX design notes crafted during early stages of development. The design process is described entirely, from basic premise and market research, through information structuring to visual design principles and color palettes.
• TESTING.md: Testing procedures. The site has been automatically validated and manually tested with procedures noted down in this file.

Highlights

Site can be navigated using the sticky header (which collapses into a hamburger menu on smaller screens,) as well as inline links to related content.

The eye-catch section features an attractive scrolling image behind a clear statement of purpose and immediate call to action.

The features section lists the most important points that distinguish the product from the competition.

The website's design changes dynamically depending on screen size, all the way down to 320px.

The footer section lists all internal and external links and important section anchors together, as well as business details.

The Asset Store page showcases thumbnails of some 3D models featured in the product, as well as interactible audio assets, with a link to access the full store within the product itself.

The Pricing page features a pricing table with clearly defined tiers.

The Support page contains a contact form, with field validation and browser auto-complete support. The form is sent to a "form dump" endpoint.

Technologies

• HTML5
  • Semantic tags used whenever applicable
  • Images served as WebP for smaller download size
  • Fonts from Google Fonts
  • No redundant containers for styling purposes
• CSS3
  • Layout with Flexbox and border-box sizing
  • Transitions and animations to make interaction more pleasant
  • Box shadows, gradients and backdrop filters to help with text readability and intuitive flow
  • Media queries for responsive design

An inline Javascript one-liner is used to initiate audio playback on the Asset Store page.

The site uses no frameworks, and the only externally loaded resources are the fonts. WebP images are exported with lossy compression set to 90. All code and text files are formatted with Prettier, with indentation using tabs (not spaces.) The CSS is split into sections with #section markers, which can be collapsed in most IDEs and code editors.

The compatibility goal was all commonly used desktop and mobile browsers, updated to the latest or second-latest version. In particular, this means no compatibility with IE11, since it is out of general support since June 15, 2022. The service Can I use? was used to ensure that the compatibility goal is met.

Directory structure

• / (root): HTML files, README.md, environment configuration
• assets/css: CSS files
• assets/images: WebP images served by the HTML pages
• assets/icons: SVG images used as icons by the HTML pages
• assets/audio: Opus audio playable on HTML pages, with MP3 version as fallback
• doc: Additional Markdown files, PNG images used by Markdown files, any additional documentation files

Deployment

As this is a fully static website (no server component), it can be trivially deployed to any file hosting service. For the purpose of this project, the live version is deployed via GitHub Pages.

Bugs

A few issues were encountered during development, they are documented below.

• Form autocomplete doesn't match page style
  This is caused by browser-specific styles overriding the CSS when the browser's autocompletion feature is used. The solution would require research for the right CSS vendor prefixes to use to style the form controls during autocomplete, and there wasn't time to look deeper into this during project time. A workaround of setting form controls to "light mode" was applied, which improved text legibility in this situation.
• Hamburger menu doesn't have the backdrop blur effect
  The area behind the hamburger navigation was not blurred, even though the whole header had the property applied, and the header is a parent of the navigation. This resulted in a minor decrease to legibility of the navigation on mobile screens in some scenarios. Was not able to find the cause during project time. As a workaround, a darker background was applied to the header and the navigation, replacing the blur effect entirely.
• Button outline on click effect not working on mobile in some cases
  Works on some buttons, but not others. Cause is unknown, as it works on desktop even with the same simulated screen size. Most likely a rendering quirk. Very little impact, since the focus state is less relevant on mobile.

Attribution

All external code snippets are attributed inline.

Stock images

• hero.webp by Patricio González from Pixabay
• feature1.webp by Stefano Intintoli on Unsplash
• feature2.webp by Matthew Kwong on Unsplash
• feature3.webp by Wahid Khene on Unsplash
• feature4.webp by Ralston Smith on Unsplash
• gallery1.webp by Raghav Verma on Unsplash
• gallery2.webp by Pramod Tiwari on Unsplash
• gallery3.webp by Nick Brunner on Unsplash
• gallery4.webp by Anita Chong on Unsplash
• ball.webp by Rodion Kutsaiev
• cart.webp by emirhan bal from Pixabay
• cat.webp by Andy Hermawan on Unsplash
• hand.webp by cottonbro CG studio

• gunshot.opus by deleted_user_2104797
• sheep.opus by klankbeeld

SVG icons: CSS.gg