Positivus Landing Page

Overview

Positivus is a landing page originally designed by Olga(opens in a new tab) on Figma Community(opens in a new tab), implemented as a web application.

Unlike most of my projects that use utility-first CSS frameworks such as TailwindCSS and UI libraries like ShadcnUI(opens in a new tab), this project was developed using pure CSS3 with BEM (Block Element Modifier) naming conventions and CSS Modules for scoped styling. A mobile-first approach was applied throughout.

Component development, documentation, and testing were handled using Storybook(opens in a new tab) and Chromatic(opens in a new tab), enabling a structured workflow that simulates a production-level front-end environment.

Technical Highlights

This project followed a simplified variation of the Atomic Design approach without strictly separating component hierarchy into isolated folders. Many components are implemented with an asChild prop—an approach inspired by Radix UI's Slot primitive(opens in a new tab)—allowing flexible HTML element injection while preserving base styles.

This technique makes components more semantic and reusable while allowing developers to maintain structural flexibility.

Examples

• Default Button Usage

  <Button>Label</Button>
  
  // Renders:
  <button class="button button--primary">Label</button>

  Secure

  https://66aea6f354f5805b7d1f6c3f-chdvviissb.chromatic.com/?path=/story/components-button--primary&globals=viewport:responsive

  Loading, please wait...

  If the content does not load automatically, please click the button below to proceed.

  Load ContentOpens in new tab

• Button with asChild for Anchor Element

  <Button asChild>
    <a href="#" className="custom-class">
      Label
    </a>
  </Button>
  
  // Renders:
  <a href="#" class="button button--primary custom-class">Label</a>

  Secure

  https://66aea6f354f5805b7d1f6c3f-chdvviissb.chromatic.com/?path=/story/components-button--as-child&globals=viewport:responsive

  Loading, please wait...

  If the content does not load automatically, please click the button below to proceed.

  Load ContentOpens in new tab

Contact Form

The Contact Us form component has been implemented with the following features:

• Responsive design implementation
• Input validation
• Error handling
• Automation testing using Jest(opens in a new tab) to ensure form logic reliability:
  By proceeding to load the content below, you will trigger a automation testing on Chromatic Storybook that automatically interacts with the Contact Us form component.

  This may include autofocus behavior within the embedded content, which could temporarily affect your experience on this page.

  Secure

  https://66aea6f354f5805b7d1f6c3f-chdvviissb.chromatic.com/iframe.html?args=&globals=viewport:desktop&id=components-sections-contactussection--default

  Content not loaded

  This embed is set to load manually by the author, either to optimize performance or for other specific reasons.

  Load ContentOpens in new tab

  You can explore the interaction flow in Chromatic(opens in a new tab).

  Check the Bottom Panel Interactions (tab).

• POST request to a mock API endpoint using MockAPI(opens in a new tab) for demonstration purposes:

  Secure

Performance

The project was tested on PageSpeed Insights(opens in a new tab) and achieved solid results, indicating strong performance and best practices.

Although the project scope was small—a single landing page—it was treated with production-level discipline. This includes consistent naming conventions, modular CSS, component testing, and documentation.

Role

Front-End Web Developer — responsible for implementation, styling architecture, and component workflow integration.

Core Stack

Technologies Used

• HTML5 – Semantic structure and native web capabilities.
• CSS3 – a language that styles the look of web pages—like colors, fonts, and layout.
• React.js – Component-based UI development.
• TypeScript – Static typing for safer and more robust code.
• Vite – Fast modern dev server and build tool.
• Storybook + Chromatic – Visual regression testing and isolated component development.
• Jest – Unit testing framework for reliable logic validation.

Development Period

July 26, 2024 - August 24, 2024 (1 month)

Resources

• Live Application(opens in a new tab)
• PageSpeed Web Vitals Report(opens in a new tab)
• GitHub Repository(opens in a new tab)
• Figma Design by Olga(opens in a new tab)
• Component Docs (Chromatic)(opens in a new tab)

  Secure

  https://66aea6f354f5805b7d1f6c3f-chdvviissb.chromatic.com

  Loading, please wait...

  If the content does not load automatically, please click the button below to proceed.

  Load ContentOpens in new tab