💻 ketoMe-365

KetoMe365 is a personal project for a 365 day-a-year ketogenic food subscription delivery site. Inspiration drawn from Hello Fresh and Gousto.

📖 Description

Features sticky nav bar, mobile navigation, 180° rotating hover animation on pricing cards using CSS perspective property, fully responsive and accessible thanks to the power of flex box and CSS Grid.

🔗 Demo

Live view by clicking the badge (use Ctrl/Cmd + Shift to open a new window):

You can also clone the project and open it in localhost (See Prerequisites below).

🛠 Technologies

HTML
CSS
JavaScript

🎱 Why I Chose This Project

I wanted to showcase my ability in creating a visually striking landing page writing my own 'copy' (content) rather than Lorem placeholder text.

I built the project using HTML, CSS and JavaScript with particular focus on CSS for a fully responsive and highly accessible user experience.

🏗️ How I Worked on This Project

I used git to track my files locally and created branches using git switch -c new-branch.
I designed a rough paper sketch of the layout of each section so I had a mental model of html elements.
I envisioned user goals, what they wanted to accomplish and established consistent design patterns to reinforce UI/UX principles
For future projects I intend to explore using Jira for a more formal project management experience.

⏲️ If I Had More Time I Would Change

Add more branding colors. I approached the project using a green branding color, synonymous with health and vitality. I used tints and shades of the primary color to provide visual hierarchy for a better user experience.

However, I feel that the design needs additional brand colors, especially for the pricing section which indicates the 3-tier pricing structure. I will return to this project soon, add css variables for all colors and add a wider range of color palettes.

📦 Prerequisites

Before cloning/forking this project, make sure you have the following tools installed:

Git
NodeJS

⚙️ Installation

Fork the project
Clone the project
Follow the instructions in the console:
Navigate to the project directory cd directory-name
Install the dependencies npm install
Run the project npm start

🏁 Finished product

Fully responsive and fluid layout.
Professional and sleek design designed in line with UI/UX best practices.
Use of correct semantic elements such as figure, blockquote etc.
Optimised images for browsers by using 'srcset' attributes on <img> tags.

peterirlam/ketoMe-365