Skip to content

Latest commit

 

History

History
59 lines (43 loc) · 3.26 KB

README.md

File metadata and controls

59 lines (43 loc) · 3.26 KB

Maintainability

A Quo Co. Official Company Website

Deployed Project

My Role

This was a solo project.

Project Description

new company website using what I've learned in Lambda.

This project was developed using many parametric mixins and nested styles, different media queries for phone, tablet, and desktop, responsive units for font sizing, and media queries escaped. It has several animations, two for the showcase image up top, another for the various sections coming in from alternating sides (slide in left/right), and yet another for the underlines when you hover over a link. On the main page, they underline from the inside outward. Any gradient you see was generated with pure CSS. The site utilizes a form I designed from scratch for orders and price quotes.

Key Features

  • Live solo project
  • Fourth iteration, utilizing what I've learned at Lambda
  • Ranks in the 90th percentile in Google PageSpeed Insights
  • Ranks on first page results for "seattle transcription" in Google, page two for Bing/Duckduckgo
  • 100/100 for accessibility, best practices, and SEO in Google Chrome's Lighthouse report
  • 91/100 for performance in Google Chrome's Lighthouse report
  • pure CSS gradients
  • this is an infinite or endless page; all internal links on main page are a popup to other hidden sections on the same page.
  • contains animation in showcase image from top of page to where it resides.
  • contains animation bringing in the stripes/main nav linked pages from either side; left, right, left,right, left to where they each reside.
  • contains separate less files for animation/header/form or popup window.
  • contains several mixins: one for animation, several for color manipulation according to color scheme, some flexbox ones, and an order/z-index one.
  • image carousel for court transcription section
  • linear gradient on logo and nav menus
  • inside out underline to nav link hover
  • FAQ with expandable questions
  • sticky header menu
  • custom order form
  • organized directory of LESS files
  • separate js pages for the carousel and another for all other javascript functions
  • tablet & mobile versions

Tech Stack

Front end deployed to private hosting and built using:

  • HTML: standard markup language for documents designed to be displayed in a web browser.
  • CSS: a stylesheet language used to describe the presentation of a document written in HTML or XML.
  • JavaScript: a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
  • LESS: a backwards-compatible language extension for CSS.

Testing

This site was manually tested in Brave, Firefox, Internet Explorer, Edge, and Chrome.

Screenshots

Picture of Website Picture of Modals Picture of Optimization Grades Picture of Lighthouse Report