KnitAddict
Improving multi-level navigation for gallery visitors.
Overview
KnitAddict is a handcrafted e-commerce experience designed to showcase knitwear and crochet products through a clean, modern, and storytelling-driven interface. This static website was built using HTML, CSS, JavaScript, Nuxt, and Vue, enabling both rich interaction and maintainable component-based architecture.
How I made it
To bring KnitAddict to life, I followed a structured development workflow that combined modern front-end tools with intentional UI design.
Planning
I began by defining the site architecture — homepage, shop categories, new arrivals, blog, about, and contact pages. Wireframes helped visualize flow, hierarchy, and how brand storytelling should be presented.
KnittAddict sitemap
Styling
For styling, I combined Tailwind CSS utilities with custom CSS for finer brand expressions such as spacing, typography, and responsive layout tweaks. Tailwind accelerated development and kept styling consistent, while custom CSS allowed me to refine visual personality.
Developing
Using Vue and Nuxt, I transformed static sections into modular components:
Reusable product cards, headers, footers, banners, and grids
Page routing handled through Nuxt for seamless navigation. This approach made my project scalable and easy to maintain.
Last but not least, I used Netlify to deploy my live site.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 70.875 0 C 61.841 0 53.931 3.886 49 10.454 C 44.069 3.886 36.159 0 27.125 0 C 12.151 0.017 0.017 12.154 0 27.131 C 0 57.764 45.408 82.558 47.342 83.582 C 48.377 84.139 49.623 84.139 50.658 83.582 C 52.592 82.558 98 57.764 98 27.131 C 97.983 12.154 85.849 0.017 70.875 0 Z M 49 76.493 C 41.011 71.837 7 50.626 7 27.131 C 7.014 16.02 16.016 7.016 27.125 7.002 C 35.634 7.002 42.779 11.535 45.762 18.817 C 46.302 20.13 47.581 20.988 49 20.988 C 50.419 20.988 51.698 20.13 52.238 18.817 C 55.221 11.522 62.366 7.002 70.875 7.002 C 81.984 7.016 90.986 16.02 91 27.131 C 91 50.591 56.98 71.833 49 76.493 Z" fill="rgb(0, 0, 0)" height="84px" id="s63rTMQBc" transform="translate(0 8)" width="98px"/></svg>)