Skip to content

Commit

Permalink
update hops and beans page
Browse files Browse the repository at this point in the history
  • Loading branch information
test committed Apr 6, 2024
1 parent b3641c6 commit e253b63
Show file tree
Hide file tree
Showing 646 changed files with 21,772 additions and 43,267 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
25 changes: 25 additions & 0 deletions .history/components/navs/HbNav_20240406020231.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Link from 'next/link';
import React, { useRef, useEffect, useState } from "react";



function HbNav() {

return (
<nav className="hidden md:block sticky mb-5 bg-white md:bg-transparent md:pr-8 lg:pr-12 h-10 top-0 md:top-[80px]">
<ul className="flex justify-between md:flex-col pt-2 md:pt-0 md:space-x-0 list-none bg-white md:bg-transparent text-slate-900 md:space-y-2">
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Overview</a></li>
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Content</a></li>
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Research</a></li>
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Design</a></li>
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Build</a></li>
<li><a href="#6" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Thoughts</a></li>
</ul>
</nav>



);
}

export default HbNav
25 changes: 25 additions & 0 deletions .history/components/navs/HbNav_20240406020325.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Link from 'next/link';
import React, { useRef, useEffect, useState } from "react";



function HbNav() {

return (
<nav className="hidden md:block sticky mb-5 bg-white md:bg-transparent md:pr-8 lg:pr-12 h-10 top-0 md:top-[80px]">
<ul className="flex justify-between md:flex-col pt-2 md:pt-0 md:space-x-0 list-none bg-white md:bg-transparent text-slate-900 md:space-y-2">
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">OVERVIEW</a></li>
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">CONTENT</a></li>
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">RESEARCH</a></li>
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Design</a></li>
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Build</a></li>
<li><a href="#6" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">Thoughts</a></li>
</ul>
</nav>



);
}

export default HbNav
25 changes: 25 additions & 0 deletions .history/components/navs/HbNav_20240406020351.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Link from 'next/link';
import React, { useRef, useEffect, useState } from "react";



function HbNav() {

return (
<nav className="hidden md:block sticky mb-5 bg-white md:bg-transparent md:pr-8 lg:pr-12 h-10 top-0 md:top-[80px]">
<ul className="flex justify-between md:flex-col pt-2 md:pt-0 md:space-x-0 list-none bg-white md:bg-transparent text-slate-900 md:space-y-2">
<li><a href="#1" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">OVERVIEW</a></li>
<li><a href="#2" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">CONTENT</a></li>
<li><a href="#3" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">RESEARCH</a></li>
<li><a href="#4" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">DESIGN</a></li>
<li><a href="#5" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">BUILD</a></li>
<li><a href="#6" className="text-sm font-medium hover:text-light-blue-300 active:text-light-blue-700">THOUGHTS</a></li>
</ul>
</nav>



);
}

export default HbNav
174 changes: 174 additions & 0 deletions .history/pages/cards/hopsandbeans_20240405174314.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import hbcomputer from '../../public/cards/hb-computerG.png';
import hbvisualdesign from '../../public/cards/hb-visualdesign.png';
import hbfigjam from '../../public/cards/hb-figjam.png';
import hbtimeline from '../../public/cards/hb-timeline.png';
import hbinfoarch from '../../public/cards/hb-IA.png';
import hbfigma from '../../public/cards/hb-figma.png';
import hbelementor from '../../public/cards/hb-elementor.png';
import HbNav from '../../components/navs/HbNav';
import NavMain from '../../components/Nav.js';

function Hopsandbeans() {
return (
<div className="scroll-smooth">
<Head>
<title>Hannah McGowan Portfolio</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/kirbyicon.png" />
</Head>

<NavMain />
<main className="px-5 md:px-20 lg:px-40 pb-20 pt-10 bg-gray-50">
<section className="items-center text-center md:min-h-screen pb-10 md:pb-0">
<div className="pt-5 pb-10">
<Image src={hbcomputer} priority={true} className="object-contain mx-auto" width={700} height={700} alt="example UI of compass app"/>
</div>
<div className="px-2 py-4">
<h1 className="font-semibold text-xl md:text-4xl text-slate-900">Hops & Beans Website</h1>
<p className="text-slate-400 text-sm md:text-base mt-10">A case study of a website design and build for Hops & Beans Cafe.</p>
</div>
</section>
{/* breaks up rest of case study between nav and information */}
<section className="md:flex">
<HbNav />
<div className="md:flex-grow">
{/* first screen: overview motion-safe:animate-fadeIn */}
<div id="1" className="md:pl-10 min-h-screen xl:min-h-0 xl:pb-20">
<div className="grid grid-cols-2 gap-4 md:grid-cols-4 text-sm">
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Role</p>
<p className="">Designer + Developer</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Timeline</p>
<p>Oct 2023 - March 2024</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Client</p>
<p>Hops & Beans Cafe</p>
</div>
<div className="text-slate-500 font-light">
<p className="font-semibold text-slate-900">Tools</p>
<p>Figma, Figjam, Wordpress, Elementor</p>
</div>
</div>
<div className="mt-20 text-slate-500 font-light">
<p className="font-semibold text-slate-900 pb-1">About</p>
<p>Hops and Beans is a locally-owned cafe within a historical building that serves coffee, beer, and a great selection of foods.
When I worked there as a barista, the cafe lacked a fully functioning and designed website - so I offered up my skills.
Having an established rapport with the cafe owner and anecdotal experience from the cafe gave me great insight and starting ground
with designing the website.
</p>
</div>
<div className="mt-10 text-slate-500 font-light">
<p className="font-semibold text-slate-900 pb-1">Timeline</p>
<div className="pt-5 pb-10">
<Image src={hbtimeline} priority={true} className="object-contain md:mx-auto rounded-md" width={900} height={900} alt="Hops & Beans Website Design and Build Timeline"/>
</div>
</div>

</div>
<div>
<div id="2" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">CONTENT</h2>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Goals</p>
<p className="text-slate-500 font-light">First step was to carve out how we wanted this project to go, what we wanted out of it, and what would deem it a successful website.</p>
<ul className="list-disc pl-10 mt-5">
<li>Make a website that has a consistent brand image</li>
<li>Allow for the display of nice pictures</li>
<li>Keep the website clean and easy to follow</li>
</ul>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Users & Accessibility</p>
<p className="text-slate-500 font-light">In addition to understanding the perspective of the cafe and what they wanted to portray through the website, we considered who the user base could consist of and how that might affect the design of the website.</p>
<ul className="list-disc pl-10 mt-5">
<li>colors are AAA contrast and avoid colorblindednessproblems</li>
<li>design is responsive</li>
<li>white space is used intentionally; action items are made obvious and clear; information is concise and laid out nicely idk</li>
</ul>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Information Architecture</p>
<p className="text-slate-500 font-light">Figuring out what the primary navigation menu tabs were going to be was the first step. Based on the owner's idea of the most important elements they wanted to display, we came to an organizational structure as shown below. </p>
<div className="pt-5 pb-10">
<Image src={hbinfoarch} priority={true} className="object-contain md:mx-auto rounded-md" width={800} height={800} alt="Hops & Beans Website Information Architecture"/>
</div>
</div>
</div>
</div>
<div id="3" className="md:pl-10 pt-10 min-h-screen pb-20">
<h2 className="text-2xl text-light-blue-800">RESEARCH</h2>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">Competitive Analysis</p>
<p className="text-slate-500 font-light">Performed an information competitive analysis on tons of other websites - for cafes, restaurants, beer gardens, etc.</p>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">Moodboard</p>
<p className="text-slate-500 font-light">Used a moodboard to help nail down desired visual deisgn elements using visual cues - helps to define the general aesthetic, layout, colors, etc.</p>
<div className="pt-5 pb-10">
<Image src={hbfigjam} priority={true} className="object-contain md:mx-auto rounded-md" width={800} height={800} alt="Hops & Beans Website Figjam Moodboard"/>
</div>
</div>

</div>
<div id="4" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">DESIGN</h2>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Branding</p>
<p className="text-slate-500 font-light">I would sometimes show screens with two example color palettes (like dark footer vs white footer) to give the option of choice to the owner.</p>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Visual Design</p>
<p className="text-slate-500 font-light">Since this is a volunteer-led project, every member of the team has been intimately involved in each step of the design process.</p>
<div className="pt-5 pb-10">
<Image src={hbvisualdesign} priority={true} className="object-contain md:mx-auto rounded-md" width={800} height={800} alt="Hops & Beans Website Visual Design Elements"/>
</div>
</div>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">The Workflow</p>
<p className="text-slate-500 font-light">I would sometimes show screens with two example color palettes (like dark footer vs white footer) to give the option of choice to the owner.</p>
<div className="pt-5 pb-10">
<Image src={hbfigma} priority={true} className="object-contain md:mx-auto rounded-md" width={800} height={800} alt="Hops & Beans Website Figma Pages"/>
</div>
</div>

</div>
<div id="5" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">BUILD</h2>
<div className="mt-10">
<p className="font-semibold text-slate-900 pb-1">Wordpress and Elementor</p>
<p className="text-slate-500 font-light">
The original website was built in Wordpress using Elementor, so I familiarized myself with the platform and implemented the design system into the global elements to make the workflow easier.
Elementor is a fairly intuitive plugin, which allowed me to transfer the design mockups I would make on figma very seamlessly. Moreover, this allowed me to use my draft pages on Wordpress as prototypes instead of having to make them in Figma which was super efficient.
</p>
</div>
<div className="pt-5 pb-10">
<Image src={hbelementor} priority={true} className="object-contain md:mx-auto rounded-md" width={800} height={800} alt="Hops & Beans Website Elementor Workflow"/>
</div>
</div>
<div id="6" className="md:pl-10 pt-10 pb-20">
<h2 className="text-2xl text-light-blue-800">THOUGHTS</h2>
<p className="font-semibold mt-10">I've learned a lot. Here are some of the main things so far:</p>
<ul className="list-disc text-slate-500 font-light pl-3">
<li>Schema setup. Haven’t needed to set up a schema of this scale before - very useful stuff </li>
<li>Typescript. This has given me a great opportunity to learn typescript since we decided to use it for this project.</li>
<li>Product design (from a professional large clientelle perspective)
<ul className="list-disc pl-4">
<li>i.e. Really thinking about who we are making this for and how/if it's going to help them</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
</main>
</div>
)
}

export default Hopsandbeans
Loading

0 comments on commit e253b63

Please sign in to comment.