Garden Story

Introduction

Garden Story, is a cozy chill video game set in a village. The game follows a grape named, Concord, who travels across the Grove and plans to restore the community!

For my project, I was inspired to re-create a website for a video gaming and gardening. I wanted to explore creativity, improve functionality, and user experience.

Project Requirements

The requirements of this project was to create a one-page website only using HTML, CSS, and Javascript. This site contains:

jQuery Widget / Plugin:

This displays a tab or an accordion using jQuery.

Ajax / API / JSON:

This displays a section where content is loaded by either using an API or a JSON file.

Web Storage:

This displays user information / preferences that is stored to local storage.

Slideshow / Carousel:

This displays a slideshow of images by using a widget/plugin.

Content

Fonts:

Main Font: "Jua", sans-serif

Alt Font: "Abel", sans-serif

Colors:

Main Color:#B24944

Second Color: #B7DAA1

Third Color: #6E4E82

Alt Colors: #5A1C19, #C05C57

Images:

Tools:

Figma & VS Code

Wireframes & Mockups:

For the wireframes and mockups, they were meant to be low-fidelity. I wanted something to reference to when creating the site, but not to be the exact same, based on the plugins I ended up using.

Code

HTML

All the code was written from scratch using VS Code. This site only required one page of HTML, all content is divided in sections based on content such as features, media, etc. This is for accessibility and readability.

CSS

For the design of the site, I wanted to be simplistic, but still have a theme pertaining to it's content. I wanted to think of the user experience, functionality, and consistency when designing, but also be creative.

Javascript

This was the last step in the development stage:

Tabs

I started off with creating and customizing the tabs. I used the Google Hosted Library for jQuery. This was the easiest and simplest code.

The customizing took a while to figure out, due to the class names.

Carousel / Slideshow

For the carousel, I downloaded Accessible 360 Slick, then customized the format in css, to get desired look.

This was the last step, at first I struggled with navigating the carousel and had to settle for a different style.

Local Storage

To save user preferences to local storage, I used 3 buttons to change the theme color of the site. I used jQuery to target the classes by removing and adding values, then updated the body class in CSS.

Surprisingly, took me the longest.

API / JSON

Lastly, to add content onto the page I created my own JSON file, I then used a resource that helped fetch the data, then I created a function to display and format the data onto the page.

This was the most fun, quickest and easiest to play around with.

The Final Website