Skip to content

Latest commit

 

History

History
74 lines (44 loc) · 3.49 KB

README.md

File metadata and controls

74 lines (44 loc) · 3.49 KB
Raw

Tokki Soju

March 2023

This landing page is the first one I created after diving into CSS and HTML in detail. It was inspired by a PDF brochure of 'Tokki Soju,' a brand I admire. Here's a breakdown of its features:

Features

  • Diverse Landing Page Patterns: Implemented various landing page patterns including hero sections, feature lists, Z-patterns, testimonial sections, carousel galleries, FAQs, and CTA forms.
  • Carousel Slide: Introduced a carousel slide feature allowing users to easily view multiple images. Transition effects with blurred images were applied for smooth navigation, and circular buttons below enable users to navigate to specific slides.
  • Modal Window: Utilized a modal window for displaying detailed product information. When users click on the product details button, a modal window appears, and clicking outside the window closes it.
  • Responsive Design: Ensured responsiveness across various devices. On mobile screens, the header menu automatically transforms into a mobile menu.

Technical Focus

  • Focused on implementing various patterns rather than specialized functionalities.
  • Utilized a UI kit from Figma for initial design wireframing, selecting fonts, and primary colors based on the brand's characteristics.
  • Employed BEM naming conventions and structured CSS using SCSS in a CSS module format.
  • Although Next.js may not be the ideal choice for a landing page, it was utilized to wrap the project as a means of learning the framework.

Demo

tokki-demo.webm

Link to the Site

Tech Stack

Frontend

  • Framework: Next.js 13
  • Language: TypeScript
  • Styling: SCSS

Backend

  • None

Database

  • None

Development Environment

  • Source Code: GitHub
  • Package Management: pnpm

Cloud Services & Deployment

  • Hosting & Deployment: Vercel

Design Process

  1. Examined the brochure file of the brand and determined the content to include.

  2. Conceptualized various patterns to incorporate.

tokki-figma.webm

  1. Selected product-specific colors and adjusted content accordingly.

tokki-figma2.webm

Figma Link

Reflection

  • The technology stack might have been somewhat excessive compared to the project's goals. Nevertheless, it provided an opportunity to learn and experiment with new technologies.
  • Deepened my understanding of CSS and HTML structures significantly. Overcoming challenges such as carousel slides, modal window implementation, and mobile menu transformation taught me a great deal.
  • Spent considerable time on design considerations. Found that prioritizing design and planning before coding was more efficient, even for solo projects.
  • Delved into Atomic Design, although it wasn't entirely intuitive. Realized that dividing components into dummy and functional components at the project's outset might be a more effective approach.
  • Noticed that BEM naming and SCSS usage allowed for cleaner and more structured code compared to plain CSS, enhancing code organization and maintenance.