Live link to deployed project (loosenthedark.tech)
NB: This project is an expanded version of the original (built in July 2021), the repository for which can be found here
Brew Barberista is a thriving independent coffee shop and barber in North Dublin. Opening its doors at the height of lockdown, the business has not only survived this period of uncertainty, it has firmly established itself as a community hub, showcasing the best of local produce as well as selling art and literature from Dublin-based creatives.
While the company has made good use of social media (notably Instagram) throughout its early days, one thing the pandemic has brought home to business owners everywhere is the importance of building a robust and reliable online presence - something that can remain as a proverbial shop window for customers if and when physical premises might have to close their doors due to Covid restrictions.
At the time of writing, the company's existing site appears to be somewhat unfinished, while it is also displaying out-of-date information about opening hours etc. (last updated in December 2020). In addition, its design falls well short of being sufficiently responsive for today's mobile-first consumer landscape:
| mobile | tablet | desktop |
|---|---|---|
| Home | Home | Home |
| Brew Coffee | Brew Coffee | Brew Coffee |
| Brew Barber | Brew Barber | Brew Barber |
Brew Barberista old website screenshots
Add to all of this the ongoing #DeleteFacebook movement and growing public concern over the lack of privacy across SNSs, and there is clearly a need for Brew Barberista to consolidate its brand identity and ties to the community by creating a bright and engaging standalone website.
This Brew Barberista rebuild is a fully-responsive frontend website, offering users a visually appealing overview of the business's services, local partnerships and core values. Both first-time and returning visitors will be impressed by the site's mobile-first design as well as its intuitive navigation and layout, while their knowledge of Brew Barberista's offerings and message will be enriched by the site's informative and regularly-updated content.
click to view
click to view
click to view
Initial design inspiration for the project's layout and aesthetic came from this Frontend Mentor challenge spec
-
click to view
mobile tablet desktop - There is a full-width nav bar fixed to the top of the viewport on all device sizes
- The site's core navigation menu is hidden off-canvas initially to create a spacious feel across the landing area, where the user is greeted by the Brew Barberista
.navbar-logoon the left-hand side and a.navbar-togglerbutton (aka 'hamburger icon') to the right - This logo is a modified version of the one featured in the nav bar of the business's existing website
- The dark blue and gold colours that make up this logo directly inform this project's primary palette. A lighter shade of 'queen blue' (featured throughout the current site's
footer, for instance) is taken directly from the premises' brightly-painted shopfront.
click to view
mobile tablet desktop - The off-canvas
navbar-navmenu mentioned above can be expanded by clicking on the.navbar-togglerbutton. This functionality has been enabled using custom JavaScript by listening for a relevant user click(s) and sliding the.navbar-navinto the viewport with CSS class toggling involvingabsolutepositioning and appropriate transition effects. In addition, the icon comprising the.navbar-togglerbutton animates on click to produce a dynamic yet smooth transition that is both distinctive and pleasing to the eye. - The expanded polygon-shaped menu contains links to each of the website's six internal sections containing content (see below), as well as a seventh link entitled 'Press'.
- Clicking on this 'Press' link triggers an additional absolutely-positioned submenu featuring external links to recent Brew Barberista media appearances. Each of these links opens in a new browser tab due to the
<a>tag'stargetproperty being set to_blank. - The bottom 'Contact' link consists of a blue call-to-action
button. In keeping with UX best practices, clicking on any of the links embedded in the.navbar-navwill cause the menu to revert to its default off-canvas location as the site navigates to the designated location. Smooth scrolling has been enabled to streamline the navigation experience through use of thescroll-behavior: smooth;CSS rule on the document'sbodyelement. - It's worth noting that one further section of the site, a tiled image gallery, is purely decorative, and so no anchor link was deemed necessary.
mobile tablet desktop
click to view
 |
 |
|---|---|
<header> HTML code snippet |
.hero-header and .overlay CSS code snippets |
 |
 |
 |
|---|---|---|
| mobile | tablet | desktop |
-
- The site's above-the-fold real estate on mobile and tablet features a clean, soothing background image of a horizon out to sea. This was chosen due to Brew Barberista's prime location just off the Howth Road in Raheny, less than a kilometre uphill from the Dublin Bay coast road.
- On page load this landing area is brought to life using animated hero icons: one a takeaway cup of hot coffee, the other a silhouette of a man with a striking hairstyle. These icons have been enlarged and had a 'zoom-into-view'
@keyframes icon-revealanimation effect applied to them in order to capture the visitor's attention and hint at the services available at Brew Barberista. - There is also a gold-coloured downward-pointing chevron icon used to hook the user and encourage them to explore below the fold. This functionality has been enhanced by adding a gentle
@keyframes bobbinganimation effect in the project's stylesheet
-
- A decision was made to change the
headerarea's aesthetic on desktop devices. In place of the background image with animated icons are two short complementary video backgrounds: one showing a barista pouring a cup of coffee, the other featuring a closeup of a barber trimming a customer's hair. - Both of these
videoelements have had theiropacityreduced to keep them from being seen to occupy the foreground (and/or overly distract the user from the site's main content). - There has also been an
.overlayclass applied to an absolutely-positioneddivelement that acts as a subtle filter in line with the site's prevailing colour palette - One more additional
divwithbackground-colorset to semi-opaque blue has had aclip-pathrule applied to it. This has the effect of creating a symmetrical pair of roughly triangular 'corner areas', each containing an icon and a heading, which act as navigation links to 'Brew Coffee' and 'Brew Barber', respectively.
- A decision was made to change the
-
click to view
mobile tablet desktop - The site's first textual content appears in the area immediately below the
header(referred to as the About section here for the sake of convenience). Thissectionis in turn subdivided into twodivs, Brew Coffee and Brew Barber, each accompanied by eye-catching background imagery and short, snappy summaries of the two sides of Brew Barberista's operations.
click to view
mobile tablet desktop - Each About subsection contains a 'More Info' hyperlink, which brings the user to the relevant follow-on subsection for that Brew Barberista service (Brew Coffee / Brew Barber).
- These two More Info subsections are stacked on mobile and tablet, and lie side by side on desktop
- Each panel contains informative blurbs highlighting a variety of USPs offered by Brew Barberista. The text is set against carefully-positioned full-width and -height background images.
- As screen width increases and space permits, several (initially hidden) elements are revealed across tablet and desktop devices. These include supplementary paragraphs of text and call-to-action
buttons. - The 'OUR PARTNERS' CTA
button(visible on desktop only) in the Brew Coffeedivdirects the user to the Our Partnerssectionof the site, while the 'BOOK NOW'button(visible on tablet and desktop) beneath the 'Get in touch' Brew Barber heading causes the page to scroll right down to thefooter, where the business's contact details can be found.
click to view
mobile tablet desktop -
The Customer Reviews
sectionboasts a selection of reviews from Brew Barberista customers, shining a light on what the business has to offer. -
Each review consists of a customer avatar, excerpt from that customer's review, customer name and the source from which the review has been taken.
-
Semantic HTML elements have been used here: each review is wrapped inside a
figureelement, with nestedimg(avatar),blockquote(review body) andfigcaption(name and review source) elements.
<figure>HTML code snippet -
As with several other
sections, the layout has been achieved using a combination of CSS positioning and flexbox on smaller screens, with CSS grid rules applied on desktop.
click to view
mobile tablet desktop - As stated previously, the (untitled) image gallery is for decorative purposes only
- A flexible and fluid layout has been achieved with flexbox - more specifically, through use of the
flex-wrapCSS property - The gallery displays as a 2x2 grid on mobile, 3x2 on tablet (two extra image
divs having had theirdisplayproperty toggled fromnonetoblock) and a single row containing four images (each with amax-heightrule applied when the screen width reaches 1440px) on desktop
click to view
mobile tablet desktop - A similarly fluid approach has been taken for the site's Our Partners
section, which consists of a grid of logos belonging to companies/organisations that Brew Barberista has either championed or worked alongside - Each logo
imgis also a clickable link to the relevant company's website, with all of these external links opening in a new browser tab - Due to device width constraints, and in order to avoid generating a cluttered feel, two of the
section's twelvefigureelements are hidden on mobile
click to view
mobile tablet desktop -
The last
mainsectionbefore thefooteris a full-width rendering of the business's location on Google Maps -
This has been implemented using a straightforward
scriptcall to the Maps API just insideindex.html's closing<body>tag -
Map configuration and rendering is processed in a
maps.jsfile located in the project'sjssubdirectory of thestaticdirectory
maps.jsfile JS code snippet -
A
max-widthvalue of60remhas been set on the.map-containerdivacross desktop devices to prevent the map from sprawling too far horizontally. -
To create a bespoke and memorable user experience, the default Maps Marker image has been replaced by a miniature version of the dark blue and gold Brew Barberista circular logo
click to view
The site's footer element is far from an afterthought, as it contains important contact information and social media links for Brew Barberista. There are three main ways the user might arrive here:
- By simply scrolling manually through the entire website
- By clicking the blue 'CONTACT' call-to-action
buttonlocated at the foot of the off-canvas.navbar-navnavigation menu - By clicking the gold-coloured 'BOOK NOW' CTA button located at the foot of the second
section#more-info > divon tablet and desktop
As outlined previously, the choice of a specific shade of blue as the background-color for this area was inspired by the actual coat of paint used on the facade of Brew Barberista's physical premises in D5 (cf. device mockups footer screenshots at the bottom of this README document).
click to view
One other important UX feature is a fixed-position dark-blue button containing an upward-pointing chevron icon that becomes available to the user as a single-click avenue back to the top of the page when they have scrolled more than 500px vertically downwards. This functionality has been put in place by listening out for a window scroll event in the project's script.js file. The #btn-back-to-top element's display property is then toggled back and forth between none and block in order to show/hide the button in the bottom right-hand corner of the viewport.
 |
 |
|---|---|
script.js file event listener JS code snippet |
#btn-back-to-top CSS code snippet |
 |
 |
 |
|---|---|---|
| mobile | tablet | desktop |
click to view
-
The site's current favicon has been crudely created by simply cropping a circular cutout of the main Brew Barberista brand logo. A more professional-looking image (to be designed from scratch) would therefore be preferable going forward.
-
These may vary (e.g. Brew Coffee is open seven days a week, whereas Brew Barber is closed two of those days), and will need to be confirmed in consulatation with the business owner. A couple of options for displaying these would be to place them in the
footeror else maybe to make them viewable on click by toggling a modal from the site'snavbar-navmenu. -
At present, the user is unable to either contact Brew Barberista or make an appointment for a haircut from within the site itself - the Contact link in the
navbar-navjust directs them to thefooter, which lists the company's contact details along with social media links. A more comprehensive UX would incorporate a native form for reaching out to Brew Barberista without having to open a separate tab/window. Again, a pop-up modal might be suitable for this purpose, or else the form could maybe fit alongside the.map-containerdivon wider screens. -
One way of engaging the user further would be to display prices for all of Brew Barberista's products and services. This would likely necessitate building an additional page(s), as the current landing page is probably too long to accommodate much more scrollable content.
-
One more potential feature to add would be a brief introductory profile section for each front-of-house member of the 'Brew Crew', as they're known. It would be best to maybe bring in a professional photographer if possible to take production-ready shots of the team at work. Together with a short, vox pop-style interview with each staff member, this would add a nice personal touch to the site and help connect the business more tangibly to its customer base.
click to view
- HTML5: used for structuring the site
- CSS3: used for styling the site
- JavaScript: used for site logic and web page behaviour
click to view
- Google Fonts: used to import the Poppins and Lora fonts into the project's stylesheets
- Font Awesome v5.15.3: used to add appropriate and visually appealing site icons
- Gitpod: used as the online IDE for the project
- Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub
- GitHub: used to compile and remotely store the project's codebase following successive local commits initiated from the command line
- Google Maps API: used to provide a visual representation of Brew Barberista's location to site visitors
- Adobe Illustrator: used to convert both Shutterstock vector downloads from
.epsto the more manageable.svgfile format - Ezgif image converter: used to convert several of the project image source files from
.webptopng/jp(e)gformats - TinyJPG: used for image compression
- PicResize: used to crop and resize images
- Brackets (desktop app version): used to make coloration edits to SVG files
- Kapwing: used as the project's go-to content editing resource, e.g. to shorten videos and customise Brew Barberista partner logos
- W3Schools HTML Color Picker: used for generating on-the-fly colour pairings and modifications (lightening, darkening etc. of core project colours)
- WebAIM (contrast checker): / WAVE Web Accessibility Evaluation Tool used to ensure site foreground and background colour contrasts meet WCAG 2 accessibility requirements
- Can I Use: browser compatibility tables used to cross-reference the viability of implementing certain HTML5 elements, CSS3 properties, file formats and more
- Editor.md: used to format project Markdown in line with best practices
- Ray.so: used to create the code block images featured throughout this Markdown file
click to view
-
W3C's Markup Validation Service was used to test the validity of all HTML used in this project. The code was validated by direct input, and all suggested corrections were then made. As a result, all of the site's HTML source code now passes W3C validation with just a single warning message being returned, as is reflected in the following screenshot:
-
Likewise, the website's custom CSS stylesheet was checked for errors using W3C's CSS Validation Service. Once again, validation by direct input was the preferred method selected, and all necessary changes were subsequently carried out. Consequently, the stylesheet now passes W3C validation with just a couple of warning/error messages concerning use of the
backdrop-filterproperty being returned, as the following screenshot indicates: -
The issue surrounding the incompatibility of
backdrop-filterwith the W3C validator appears to be a well documented one. However, given that this property is present in the MDN Docs and endorsed by CSS-Tricks, it has been used in this project in spite of the validator's error messages. Its patchy browser support necessitated the use of a@supportsquery on line 698 of the project's stylesheet (with a reasonable fallback option of an opaque background), as suggested in this CSS-Tricks article -
In a similar manner, both of the site's custom JavaScript files were validated against JSHint's error-detection tool, which is available both as an online linter and a Gitpod/VS Code extension for real-time JS problem-solving. After heeding various warning and error messages, at the time of deployment each of these .js documents passed JSHint validation with no problems detected.
 |
 |
 |
click to view
- All testing was performed manually, and on a near-constant basis as the project evolved. Google Chrome DevTools served as an indispensable resource throughout this testing process, allowing incremental adjustments to be made to the site's infrastructure and layout. Firefox Developer Tools was preferred when building out the grid layout on desktop, as this offers a broader suite of grid functionality than Chrome. The site's responsiveness was also closely monitored and rigorously tested from start to finish using the developer-oriented Responsively App browser.
| Devices | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Samsung Galaxy S5 |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Huawei P20 |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Moto G4 |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Kindle Fire HD |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| MacBook Pro |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Acer ΛSPIRE |  |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Android Smart TV |  |
 |
 |
 |
 |
 |
|
 |
|
 |
 |
 |
| Browsers | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
-
A broad selection of physical devices were used to test real-life responsiveness. These ranged in size from a Samsung Galaxy S5 (screen width 360px) right up to a JVC 32" LED Android Smart TV (using this device's native Odin browser/ADK). Other devices used in testing included the Moto G4 and Huawei P20 smartphones, a Kindle Fire HD tablet, an Acer ΛSPIRE F15 Windows laptop and a 13" MacBook Pro.
-
In addition to Chrome, Firefox and the emerging Odin smart TV browser, the site was also viewed numerous times in the Safari, Microsoft Edge and Amazon Silk browsers prior to completion.
click to view
-
CSS
scroll-behaviorremains unsupported in the Safari browser. As ever, CSS-Tricks is on hand to offer suggested workarounds, although the most practical and reliable of these does depend on jQuery (which this project has chosen not to use). Other potential fixes for this diminished UX in Safari will be reviewed at a later date. -
There were several bugs identified during testing of the above-the-fold background video elements on desktop:
- The video functionality was initially freezing at run time when the site was viewed in Firefox - following thorough debugging, it was concluded that the likely cause of this bug was the use of the
HTMLMediaElement.playbackRateproperty to increase video playing speed from within the project'sscript.jsfile. To get around the issue, it was decided to only accelerate video playback speed in browsers other than Firefox - appropriate conditional logic has been put in place on line 95 of the aforementioned JavaScript file to achieve this. - Video playback appears to be absent from the Odin browser (Android APK). The reasons for this are unclear, and since it's not really possible to inspect elements (i.e. use DevTools of any sort) on a smart TV, it was decided that pursuing this problem any further than documenting it here lies beyond the scope of this project.
- A strange bug was observed when the video functionality was first put in place. The brightnesss/contrast/saturation of the barista video (in particular) was noticeably more glaring/'whitened' in several browsers when it looped for a second/third/fourth (etc.) time. This was fixed by hard-coding a reset of the seemingly affected properties between lines 100 and 115 in the project's
script.jsfile. At the time of writing, the exact cause of this bug remains unclear. However, both videos now play successfully on an alternating loop in all browsers tested (except Odin, as noted above).
- The video functionality was initially freezing at run time when the site was viewed in Firefox - following thorough debugging, it was concluded that the likely cause of this bug was the use of the
click to view
This project has been deployed to GitHub Pages. The deployment process carried out was as follows...
- Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
- At the top of the project repository page, select Settings.
- On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.
This will open GitHub Pages....
- Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
- The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the
https://address to be used. - For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).
It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...
- Sign in to your GitHub account and locate the relevant repository.
- Click on Fork, located near the top right-hand corner of the repository page.
- You will now have a copy of this project's repository in your own GitHub account.
It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...
- Sign in to your GitHub account and locate the relevant repository.
- Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
- In order to clone the repository using
HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL). - Next, open Git Bash (see here for an overview of download options, if required).
- Change the current working directory on your local machine to the location where you want the cloning to be made.
- Type
git cloneinto your IDE terminal followed by the URL you copied in Step 3 above, i.e.
https://github.com/loosenthedark/brew-barberista-landing-page.git
- Press Enter.
- Your local clone has now been created.
See the GitHub Docs for more information on all of the above processes.
Where code blocks/snippets/suggestions have been incorporated from external sources into this project's code, these have been noted through the use of comments. Beyond this, the developer made use of the following articles, workarounds and learning resources while building the site:
click to view
- 'Bootstrap 4 simple back to top with smooth scroll' (BBBootstrap)
- 'Show div after 500px scroll' (JSFiddle)
- 'How to crop SVG file within HTML/CSS' (Stack Overflow)
- 'CSS Clipping Path with CSS Shapes' (CodePen)
- 'A Complete Guide to Grid' (CSS-Tricks)
- '15 Compelling Above the Fold Content Examples to Inspire Your Own' (HubSpot)
- 'Create a Website With Video Background' (Traversy Media)
- 'How do I loop through multiple background videos?' (Stack Overflow)
- 'How to detect Safari, Chrome, IE, Firefox and Opera browser?' (Stack Overflow)
- 'How to change the playing speed of videos in HTML5?'] (Stack Overflow)
- ’How can one display images side by side in a GitHub README.md? (Stack Overflow)
- '
<details>: The Details disclosure element' (MDN Web Docs)- My mentor kindly alerted me to this means of making my README more compact and readable via his own demo implementation
- Morten Rand-Hendriksen's LinkedIn Learning courses on CSS, and in particular his advice on the principles of progressive enhancement proved especially useful when implementing a CSS grid layout for larger screens
click to view
- Most of the
bodytext was composed by the developer, and is an extension of the content on Brew Barberista's existing site, along with relevant supplementary information found across the business's social media channels - The social proof copy (customer reviews) is all legitimate and authentic - below are links to the originals of each featured quote:
click to view
| [Website section] Media title/description | Media format | Credit | Link to original media source(s) |
|---|---|---|---|
head |
|||
| Brew Barberista circular brand logo | image | Brew Barberista | Brew Barberista website header |
| Brew Barberista owner press pic | photo | Frank McGrath | Independent.ie |
nav |
|||
| Brew Barberista main brand logo | image | Brew Barberista | Brew Barberista website header |
| gold hamburger icon | icon | Font Awesome | Font Awesome |
| gold coffee mug icon | icon | Font Awesome | Font Awesome |
header |
|||
| 'Calm Sea Under Blue Sky' | photo | cottonbro | Pexels |
| 'Fashion silhouette hipster style' | vector illustration | RomanYa | Shutterstock |
| 'Paper mug with hot drink inside' | vector illustration | Agnieszka Karpinska | Shutterstock |
| 'A Barista Making A Coffee Artistically' | video | Ketut Subiyanto | Pexels |
| 'A Man Shaving A Man's Facial Hair' | video | Pavel Danilyuk | Pexels |
main |
|||
| 'Cold Brew' | photo | Andrew "Donovan" Valdivia | Unsplash |
| 'Anonymous barista pouring milk from jug into paper cup' | photo | Ketut Subiyanto | Pexels |
| barber's kit against orange background | photo | Sinval Carvalho | Unsplash |
| 'Baked Pastries' | photo | Magda Ehlers | Pexels |
| 'Brown Coffee Beans on Gray Textile' | photo | Liana Horodetska | Pexels |
| 'Man in White and Black Stripe Shirt Holding Black Pen' | photo | cottonbro | Pexels |
| 'White Ceramic Mug With Brown Liquid' | photo | Gareth Rees | Pexels |
| 'Straight Razor Kit' | photo | Josh Sorenson | Pexels |
| 'Set of disposable paper coffee cups' | photo | Ketut Subiyanto | Pexels |
| customer avatars | photos | UI Faces / Random User Generator | #1 / #2 / #3 |
| Lovin Dublin avatar | image | Lovin Dublin | Lovin Dublin Twitter profile |
| Brew Barber customer black & white image | photo | Brew Barberista Facebook page | |
| 3fe logo | logo | 3fe | 3fe website |
| Victoria Arduino logo | logo | Victoria Arduino | Jimmy's Espresso Services |
| Tartine Organic Bakery logo | logo | Tartine | Veganic |
| Pieman logo | logo | Pieman | Pieman website |
| Nic Gemma Cupcakes logo | logo | Nic Gemma Cupcakes | Nic Gemma Instagram page |
| The Raw Juice Company logo | logo | The Raw Juice Company | The Raw Juice Company website & Facebook page |
| Korina Bakery logo | logo | Korina Bakery | Korina Bakery Facebook page |
| Tonja Maguire Art logo | logo | Tonja Maguire Art | Tonja Maguire Art Facebook page |
| Conscious Cup Campaign logo | logo | Conscious Cup Campaign | Conscious Cup Campaign website |
| Pieta Darkness Into Light logo | logo | Pieta | Darkness Into Light 2021 website |
| St. Francis Hospice logo | logo | Saint Francis Hospice | Laimoon |
| Raheny Business Association logo | logo | Raheny Business Association | Raheny Business Association website |
footer |
|||
| 'Gmail New 2020 Vector' | vector icon | IconApe | IconApe |
| 'Dog Friendly sign' | image | SVGCraftLounge | Etsy |
- I've been fortunate enough to be paired with an incredibly helpful and approachable mentor in Tim Nelson. He has been on hand throughout this project's evolution to offer pointers, timely feedback and guidance. Cheers, Tim!
- My better half Ana deserves a medal, not just a mention, for all her constant support and encouragement. She also conducted plenty of ad hoc testing on a range of devices, and it was she who suggested I speed up the background barista video above the fold on desktop 😁
This site has been created for development purposes only.