Software I Use

  • HTML

    Standard markup language for web browsers

  • CSS

    Style sheet for document written in HTML

  • SASS

    Preprocessor for style which compiles to CSS

  • JavaScript

    Standard programming language for the Web

  • Liquid

    Shopify's templating language

  • Web Components

    Standard component model for the Web

  • React

    Component based JavaScript library

  • NextJS

    React based framework which enables SSR

  • NodeJS

    Backend language which can run JS out of browsers

  • ExpressJS

    NodeJS based backend framework

  • MongoDB

    NoSQL document database management program

  • PostgreSQL

    SQL relational database management program

  • Jest

    JavaScript testing framework built on Jasmine

  • VS Code

    Open source code editor

  • Figma

    Design and prototyping application

  • Pixlr

    Cloud based image editing tool

My Services

Development

  • Developing pixel perfect, responsive and high performance online stores that work flawlessly across all browsers.
  • Building custom Shopify features and apps that seamlessly integrate with your store's design and meet your unique business needs.
  • Providing ongoing support and maintenance to ensure your store stays up-to-date.

Design

  • Designing visually appealing online stores that effectively communicate your brand's message and personality to your target audience.
  • Enhancing your store's user experience to ensure smooth navigation and a satisfying shopping journey for your customers.
  • Helping you build a unique and memorable brand identity through thoughtful and strategic design.

Optimization

  • Optimizing performance and page speed to enhance user experience, increase search rankings and boost conversion rates.
  • Conducting accessibility audits and implementing improvements to ensure your store is accessible to all customers.
  • Troubleshooting and resolving technical issues and bugs to keep your store running smoothly.

Featured Projects

Luxury Jewellery Store

Introducing Aurilux, a luxury jewellery store designed with a unique and subtle approach to embody premium feeling on visitors. The store is focused on highlighting the beauty and elegancy of jewellery, providing a pleasurable shopping experience for customers.

Crafting an Elegant Online Presence: Aurilux

Project Brief

Aurilux is a fictional luxury jewellery store catering to women who appreciate timeless, sophisticated pieces that exude luxury and elegance. The store aims to create a brand identity that resonates with its target audience and delivers a pleasurable shopping experience. The primary objective is to establish Aurilux as the ultimate destination for high-quality jewellery pieces that are designed to last a lifetime. The company is looking for a freelancer to build a beautiful online store that will reflect the company's values.

Website Goals:

  • Showcase the store's jewellery products in an elegant and sophisticated way with high-quality images.
  • Reflect the brand's luxury and sophistication through the brand identity elements.
  • Build the website responsive that works seamlessly across desktop, tablet, and mobile devices.
  • Create a visually stunning banner with subtle animations and a unique approach to overall design to capture visitors' attention and leave a lasting impression.

Design Summary

The goal of the Aurilux brand identity was to create a luxurious and elegant visual identity that would resonate with high end customers.

The color palette was thoughtfully designed, the primary color being silver, symbolizing prestige, modernity, and sophistication, while the warm and inviting light gold adds a touch of elegance and sophistication. The dark silver accent color adds depth and contrast, the calm and comforting beige adds a touch of softness and warmth to the palette.

For typography, the headings and subheadings feature the timeless and elegant serif font Lora, while the modern sans-serif font Montserrat is used for body text. The bold Montserrat complements the classic Lora, creating a visually pleasing and easy-to-read text hierarchy.

The design process for Aurilux involved a lot of research into the target audience and their preferences. I have explored various iterations and options, experimenting with different color schemes, typography, and logo designs. Ultimately, the chosen design direction was refined and polished to create a brand identity embodies the elegance, sophistication, and luxury that the Aurilux brand represents.

Creation of Brand Identity

Color Palette:

The color palette for Aurilux was thoughtfully designed to reflect the brand's core values and evoke a sense of luxury and elegance. Each color was selected with intention to contribute to a cohesive and memorable brand identity. Subtle shades were chosen to highlight the jewellery pieces and not draw attention away from them, ensuring the customer's attention is focused on the product's exquisite details.

Primary color: #999999

The primary color for our jewelry store is silver, which symbolizes prestige, modernity, and sophistication. It also has feminine energy, which aligns with the brand's target audience. The cool and neutral tone of silver adds a touch of luxury to the brand identity and provides a sleek and elegant look. The use of silver also creates a sense of exclusivity and rarity, which is perfect for a high-end jewellery store.

Secondary color: #CFBB63

Light gold is a warm and inviting color that adds a touch of elegance and sophistication to the color palette. It is a versatile color that pairs well with various shades of silver, and black. The use of light gold also creates a sense of luxury and high quality, making it a perfect complement to the primary color. It's primarily used for call to actions when customer's attention is needed.

Accent color(1): #FAF0E6

Beige is a calm and comforting color that adds a touch of softness and warmth to the color palette. It provides a natural and organic feel that reflects the timeless beauty of our jewellery pieces. The use of beige creates a sense of relaxation, making it a perfect complement to the luxury and elegance of the other colors.

Accent color(2): #71706E

The dark silver accent color adds depth and contrast to the color palette. It is a neutral color that provides a sleek and modern look to the brand identity.

Text color: #484848

Black is the classic choice for text color, providing a timeless and elegant look to the brand identity. The slightly softer black with a hint of gray undertone is chosen to create a more approachable and friendly feel than a pure black, while still maintaining readability. The use of black also adds contrast to the other hues in the palette, making the text stand out.

Background color: #FFFFFF

White is a neutral color that provides a clean and fresh look to the brand identity. It creates a clear contrast with the text and other design elements, making them easier to read and stand out. The use of white also creates a sense of purity and clarity, reflecting the timeless beauty of our jewellery pieces.

Naming:

I wanted to come up with a name phonetically sounds pleasing, catchy, branded, easy to remember, elegant yet still unique that is not used by any other brand. Without a doubt, ancient Latin language is elegant and pleasing to hear. I played around with many words and eventually decided on "Aurilux", a combination of "Auri", meaning gold, and "lux", meaning light, also evokes "luxury". Both words are elegant and perfectly aligns to a luxury jewellery store in meaning. With "Aurilux," we have a name that is elegant, memorable, and reflective of the store's core values.

Typography:

Lora: A classic serif font that brings a touch of elegance and refinement to the brand. Its curves and serifs evoke a sense of tradition and timelessness, which is fitting for a jewelry store. Lora's strong and bold appearance draws attention to the headings, making them stand out and catch the reader's eye.

Montserrat: A sans-serif font that has a clean and modern look, making it easy to read in longer blocks of text. It has an approachable feel that pairs well with the more elegant Lora.

Lora and Montserrat work together well to create a cohesive typography system. The elegant and sophisticated Lora adds a touch of luxury and refinement to the headings, while the clean and modern Montserrat is easy to read and pairs well with Lora for body text.

Logo:

I chose the Gilda Display font for the Aurilux logo to complement the brand's elegant and refined aesthetic. The classic serif letterforms of the font have a modern twist that makes them stand out. The spacing of the letters enhances legibility and creates an open and airy feel, reflecting the brand's value of elegance.

To represent the brand's name and mission, a Northern star icon was incorporated into the logo design. The star symbolizes "lux," meaning light, and adds an elegant touch to the overall design with it's shapes.

Brand Voice:

Aurilux's brand voice is one of refinement, elegance, and sophistication. The messaging and copywriting style is tailored towards individuals who appreciate the delicate, ethereal feel of the jewellery, and seek pieces that reflect their own unique style. The language used strikes a balance between being approachable and refined while establishing a connection with their audience.

The brand's messaging is designed to resonate with those who are drawn to the refined aesthetic of their collection and are passionate about expressing their individuality through their jewellery choices. Through their brand voice, Aurilux seeks to inspire and evoke a sense of delight.

Web Design Process

Prior to selecting a theme, I initiated the website design process by creating the landing page on Figma to enable unrestrained creativity in design layout without the limitations of themes. To capture the essence of elegance, distinctiveness, and sophisticated brand identity of the store, design decisions were made to ensure a visually appealing appearance for every component of the store. As these features are pivotal attributes sought by the target audience in luxury jewellery, the website design was crafted to reflect the beauty of jewellery within its design framework.

The banner and navigation were intentionally designed to exude a premium feel and create a striking first impression with a unique approach. The sticky sidebars feature a transparent background and silver colored, sophisticated looking icons representing each main collection. Additionally, a hamburger menu is incorporated to hide the remaining elements. This approach provides a sleek, app-like feel to the website, thereby enabling customers to connect with the store without impeding on the content's space.

Product list, cornered card in hover state

The product cards play a crucial role in the website design, showcasing the high-quality imagery of the jewellery, which is the primary factor that luxury jewellery customers seek before considering the name and price of the product. To enhance the user experience, the product cards feature a hover state with essential product information and a lifestyle image, contributing to the overall design's aesthetic appeal.

To establish a cohesive connection between the brand and its customers while maintaining a premium aesthetic, a line used to create a smooth transition between sections that's combined with the brand logo.

Light golden line combined with logo

While hamburger menus are versatile and complement any website design, they require an additional click to reach the desired destination, in contrast to the traditional menu with text that occupies more space. To maintain a clean, uncluttered design and streamline navigation, the sticky navigation features the main categories, while the other collections are also featured at the bottom of each page, enabling users to seamlessly browse through the collections.

Collection list at the bottom of layout

Overall, the website design process was carefully planned and executed to ensure that the final product not only reflects the sophistication and elegance of the brand but also enhances the user experience, leaving a lasting impression on visitors to the store.

Product list, cornered card in hover state
Light golden line combined with logo
Collection list at the bottom of layout

Cat & Dog Supply Store

Introducing Pawstora, a modern and cheerful online store focusing reliability. I designed Pawstora with a sleek and intuitive user interface that is easy to navigate. Pawstora is the perfect destination for pet owners looking for the best care for their furry friends.

Vision to Reality: Building Pawstora's Store

Project Brief

Pawstora is a fictional cat and dog supply store that aims to become the go-to destination for pet owners who want to provide the best possible care for their furry companions. The primary objective is to provide high-quality, healthy and effective pet products, and to establish themselves as a trusted authority in the pet supply industry. They are seeking a skilled developer to bring their vision to life by creating the brand identity, designing the website, and building the online store.

Website Goals:

  • Showcase the store's products and services through detailed descriptions and high-quality images.
  • Provide a seamless and user-friendly shopping experience, with easy navigation, intuitive design, and fast page load times.
  • Evoke a playful and happy affect in visitors while maintaining a reliable and trustworthy image through clear and informative content and design.
  • Code changes should be done only through custom CSS in admin dashboard.

Design Summary

The design of Pawstora aimed to create a cheerful and approachable brand identity that customers can trust. The color palette chosen for the brand is bright and energizing, with yellow as the primary color evoking feelings of positivity and cheerfulness. The use of light and dark brown secondary colors emphasizes stability and dependability.

The typography choices of Lato and Nunito create a harmonious visual hierarchy, with the bold Lato drawing attention to the headings and the more understated Nunito creating a clear, easy to read body text.

The Pawstora logo features the Averia Serif Libre font, which gives the brand a playful and approachable feel. The paw icon included in the logo serves as a visual representation of the brand's focus on pets.

To complement the brand's identity, Refresh, a bold theme was chosen to elevate product quality and brand storytelling. The rounded boxes for content layout add to the playful and organic feel of the brand yet still look modern and pleasing to the eye.

Overall, the design approach for Pawstora was to create a brand identity that stands out in the competitive pet store market while remaining approachable and memorable for customers.

Creation of Brand Identity

Color Palette:

The color palette was carefully chosen to reflect the brand's vision and values. The harmonious combination of colors is intended to create a welcoming and cheerful atmosphere for customers, while also conveying a sense of stability and dependability. Each color was selected with intention and purpose, contributing to a cohesive and memorable brand identity.

Primary color: #FFD900

Yellow is a bright and energizing color that evokes feelings of happiness and positivity. It is also associated with optimism and creativity, which aligns with the store's vision to provide a playful and approachable shopping experience for pet owners. The yellow used in the color palette is a grounded and warm shade, which adds a touch of familiarity and comfort to the brand.

Secondary color: #A97C00

Light brown is a friendly and approachable color that is associated with stability and dependability. It conveys a sense of reliability and trust, which is important for customers when selecting products for their pets. The warm and earthy tone of the light brown also adds a touch of comfort and coziness to the brand.

Accent color: #5B4F38

Dark brown was chosen as an accent color to complement the light brown and yellow hues. It is associated with earthiness and reliability, evoking feelings of stability and dependability. It adds depth and balance to the color palette and creates a warm, welcoming atmosphere in the store.

Text color: #28241C

Black is the classic choice for text color, for Pawstora a softer black with a slight brown undertone was chosen. This creates a more approachable and friendly feel than a pure black, while still maintaining readability. The color blends well with the other hues in the palette and adds contrast to make the text stand out.

Background (main): #F2F5EF

Light green is a calming and refreshing color that is associated with nature and growth. It conveys a sense of relaxation and rejuvenation, which aligns with the store's focus on promoting the well-being of pets. The light and fresh tone of the green works well as a main background, as it's not too overpowering and allows other colors to stand out.

Background (content): #FFFFFF

White was chosen as the background color for content layout as it is a neutral color that provides a clean and fresh look. It creates a clear contrast with the text and other design elements, making them easier to read and stand out.

Naming:

When considering names for the pet store, my initial idea was 'Happypaws'. However, I quickly realized that this name was already in use by many other pet stores. I wanted a name that was unique, easy to read and remember, and that would align with the store's vision. After some brainstorming, I landed on the name 'Pawstora'. The name is a combination of 'paws' and 'store', which reflects the store's focus on providing a wide range of supplies for pets. I also wanted to create a unique and branded name that will be catchy and memorable to customers and stand out in the crowded market. Ultimately, I believe that 'Pawstora' accomplishes this goal.

Typography:

Lato: Strong, bold appearance with distinctive letter shapes that create a sense of confidence and reliablity. It's also a versatile font that can work well for a variety of styles, from playful to professional.

Nunito: Clean and simple font that is easy to read in longer blocks of text. It has a friendly and approachable feel that pairs well with the more confident and bold Lato.

In combination, Lato and Nunito provide a harmonious visual hierarchy, with the bold Lato drawing attention to the headings and the more understated Nunito creating a clear, easy to read body text.

Logo:

The logo font was carefully chosen to represent the brand's playful yet dependable personality. Averia Serif Libre was selected for its unique letter shapes, which add a touch of whimsy while still maintaining readability and reliability. The font's style aligns well with the store's vision and values.

To further reinforce the brand's focus on pets, the first letter 'A' in 'Pawstora' was replaced with a fitting paw icon. This simple but effective design element adds a memorable and recognizable feature to the logo, contributing to a cohesive brand identity.

Brand Voice:

Pawstora's brand voice and tone is informative, passionate, and caring. The messaging and copywriting style is geared towards pet owners looking for high-quality, safe, and effective products. The language used is friendly, approachable, and focused on educating pet owners with expert advice.

There is also empathy for the joys and challenges of being a pet parent, establishing a connection with the target audience. Overall, the brand voice and tone aims to communicate Pawstora's mission of providing the best possible care for pets while conveying a sense of excitement and enthusiasm for all things related to pets.

Web Design Process

My website design process began by selecting the "Refresh" theme, a modern and bold yet clean looking design that elevates product quality and brand storytelling. The theme's use of rounded boxes for content sections creates a consistent look and feel throughout the website, making it an excellent choice to represent Pawstora's vision and website goals.

As the store has two main categories: Cats and Dogs, I took a different approach to the banner than usual by dividing it into two cards for clear navigation.

Each page layout is designed to guide customers through the website without the need for top navigation, providing seamless navigation. To keep users engaged, I ensured that each section has a clear design and is backed with catchy visuals. Storytelling and sections are strategically paired and placed to ensure consistency, diversity, and integrity throughout the layout while keeping the customer's interest and building trust as they scroll.

First half of Home page
Second half of Home page

In case a user scrolls to the very bottom of the page, a visually appealing banner or a call to action section welcomes them to continue browsing and ensure they do not miss anything on the store.

Product cards are designed to give enough information with a hover image, clear title, and add-to-cart button without requiring the user to visit the product page.

The product pages are designed with a clean approach to avoid cluttering the page with information and risking losing the customer's attention. The page features a short description, and the rest of the details are provided in accordion sections, allowing users to access additional information if desired.

Product page

Overall, the design choices made for the Pawstora website effectively capture the company's vision and brand identity while providing a seamless and enjoyable shopping experience for customers.

First half of Home page
Second half of Home page
Collection list at the bottom of layout

Like to see more? Check out my GitHub profile consisting various full-stack and front-end projects built with different technologies.

GitHub

Contact Me

I understand the challenges growing businesses face and I'm dedicated to provide solutions your store needs.

Ready to bring your vision to life? Let's make it happen!