Wishbone+Partners (Website)

A desktop-focused single-page website built with HTML and Sass, using Alpine.js for collapsible sections and AOS for scroll animations. Features custom CSS transitions and is not optimized for mobile.

Original Layout · View Demo · Report Bug

Table of Contents

1. About The Project
   • Built With
   • Supported Browsers
2. Getting Started
   • Prerequisites
   • Build Static Files
3. Usage
4. License
5. Author

About The Project

This project is part of my portfolio and demonstrates my skills in creating websites based on client-provided mockups - either in Figma or Photoshop.

The primary objective was to build a sleek, animated landing page with a focus on aesthetic details and smooth interactive elements, based on a desktop-only design mockup.

Key technical notes:

• Layout & Responsiveness: Implemented with a fluid layout that gracefully adjusts across standard desktop and laptop screens. The site is not optimized for mobile devices as it was based on a single desktop mockup.
• Styling & Architecture: Styled with Sass/SCSS primarily for file organization by sections, with variables and mixins for typography and consistent styling.
• Animations: Features multiple animation layers:
  • Scroll-triggered animations via the AOS (Animate On Scroll) library.
  • Interactive collapse/expand functionality in specific sections using Alpine.js.
  • Custom CSS transitions for hover states on buttons, links, and images.
• JavaScript Implementation: No custom JavaScript was written; all interactivity is achieved through the AOS and Alpine.js libraries.
• Build Approach: This project combines preprocessed CSS architecture with lightweight JavaScript libraries to create a polished, desktop-focused front-end experience without custom scripting.

You can see a preview of the website in the image below:

Built With

This website is made using the following technologies:

• 
• 
• 
• 
• 
• 
• 
• AOS (Animate On Scroll) library.

Supported Browsers

Below is a list of browsers in which this website was tested and rendered correctly:

• 
• 
• 
• 
• 
• 
• 

Important

Browser compatibility was verified for the 1.0.0 release. The site displayed correctly in the latest versions of all major browsers at that time.

Last verification date: 9 December 2025

(back to top)

Getting Started

Please follow the steps below to build and view this website locally.

Prerequisites

First, install Node.js. Then, download this repository as a ZIP archive or clone it using Git to a folder on your system. To clone it, you can use the following Git command:

• git

  git clone https://github.com/aLeeTheY/Wishbone-plus-Partners

Navigate to the project folder in your terminal and run the following command to install all project dependencies:

• npm

  npm install

Build Static Files

Please follow the steps below to build the static site files.

To compile Sass/SCSS files into CSS, run the following build command (you can ignore any warnings):

• npm

  npm run build:release

(back to top)

Usage

After completing the steps in the Getting Started section, you can view the site manually by opening the index.html file from the public/ folder in any supported browser.

Alternatively, to launch a local development server, use the following command:

• npm

  npm run serve

(back to top)

License

Copyright © 2025 Vladimir Nikulin.
This project is MIT licensed.

(back to top)

Author

👤 Vladimir Nikulin

• Github: @aLeeTheY
• Email: mail.jorey@gmail.com

(back to top)