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>

• 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>

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.

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

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)

Star History

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)