Skip to content

my court transcription company's website with HTML, CSS, JavaScript, LESS, live solo project

Notifications You must be signed in to change notification settings

evoingram/newAQCWebsite

Repository files navigation

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

About

my court transcription company's website with HTML, CSS, JavaScript, LESS, live solo project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published