From c52da09b68bff4599aa63bafe5379ba0d4f21d0e Mon Sep 17 00:00:00 2001 From: Aaron Louie Date: Mon, 14 Oct 2019 18:06:51 -0400 Subject: [PATCH] Builds out About Us section --- src/app/about-us/about-us.component.html | 69 ++++++-------- src/app/about-us/about-us.component.scss | 115 ++++++++++++----------- src/app/about-us/about-us.component.ts | 48 ++++++++-- 3 files changed, 131 insertions(+), 101 deletions(-) diff --git a/src/app/about-us/about-us.component.html b/src/app/about-us/about-us.component.html index d2f707c..ed6485e 100644 --- a/src/app/about-us/about-us.component.html +++ b/src/app/about-us/about-us.component.html @@ -1,45 +1,30 @@ -
-
-

Meet Sartography

- - -
-

We are Software Developers.

-

We create engaging web applications using modern web development tools.

-

Here are a few areas where we are particularly effective:

-
    -
  • Beautiful Information: We create beautiful interfaces that help people navigate complex information to find critical knowledge. Through thoughtful design, architecture, and animations we find novel approaches that make information come alive.
    • -
  • Mobile Friendly: Even our most complex applications work well on phones and tablets, as well as desktops using the Angular Framework.
    • -
  • Secure and Discrete: We build applications that allow scientists to safely collect, monitor and study medical information.
    • -
  • Scientific: As a small tightly focused team, we can dig very deeply into complex domains where larger organizations would fail to adapt. And as Python becomes the predominant programming language of science, we build applications that our clients can understand and extend.
    • -
  • Big Data: We know how to manage exceedingly large data sets with tools such as Cassandra, and Elastic Search. Most importantly, we know when not to use these tools, and we strive to keep our systems as simple, clean, and extensible as possible.
    • -
-

Be sure and look at our Case Studies to see these skills in action.

- -

We are Makers.

-

We are also some of the founders and leaders of the Staunton Makerspace, - Where we spend some of our spare time teaching others to delight in technology, learn new tools, and build great things. We live to inspire, teach, and above all to learn.

-
- - -
-

Our Mission:

-

To partner with scientists and innovators to create engaging software that improves the health and well - being of our communities through constant rigor, deep commitment to cause, and abiding resepect to our - shared goal for a better world.

- -

Our Vision:

-

To build a world changing application that make a meaningful, scientifically proven impact in the mental - health of our community.

-
- - +
+
+

About Us

+

What We Do

-
- + +
+
+
+

{{c.title}}

+

{{c.description}}

+
+ +
+ +
+
+
+
+ diff --git a/src/app/about-us/about-us.component.scss b/src/app/about-us/about-us.component.scss index f9a587c..c97d890 100644 --- a/src/app/about-us/about-us.component.scss +++ b/src/app/about-us/about-us.component.scss @@ -1,63 +1,72 @@ -// Import theming functions -@import '~@angular/material/theming'; -// Import your custom theme -@import '../../sartography_material'; -// Load the Sartography Theme -@include sartography-theme($sartography-theme); +@import "../../config"; .about-us { - padding: 5%; - background-color: mat-color($sartography-primary, 50); - color: mat-contrast($sartography-primary, 50); + position: relative; + background-color: $dark-gray; + background-image: url("/assets/images/about-us.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: bottom left; + min-height: 1600px; - .tab-content { - max-width: 800px; - margin: auto; - } + .title { + margin-top: 80px; + margin-left: 80px; - h1{ - text-align: center; - padding: 2%; - } - - button { - margin: 2%; - padding: 7px; - background-color: mat-color($sartography-warn, 500); - color: mat-contrast($sartography-warn, 500); - cursor: pointer; - } - - mat-card { - padding: 5%; - - .top { - text-align: center; - } - - - h2 { - padding: 0; - margin: 0; - } - - img { - border-radius: 200px; - height: 200px; - width: 200px; + h1 { + color: $brand-primary; + margin-bottom: 0; } } - mat-tab-group { - background-color: #ffffff; - min-height: 400px; - padding: 2%; + + .capabilities { + margin-top: 300px; + margin-right: 80px; + + ::ng-deep .capability-icon svg { + margin-top: -52px; + width: 128px; + height: 128px; + } } - img { - max-width: 90%; - padding: 2%; + + .even { + text-align: right; + + .details { + background-color: transparent; + h3 { color: $brand-primary-dark-1; } + } + .icon { + background-color: transparent; + ::ng-deep .capability-icon svg path { fill: $brand-primary; } + } + .icon-spacer { + background-color: $brand-gray; + + &::after { + content: ''; + width: 1px; + height: 100%; + background-color: $brand-gray-light-4; + } + } + .details-spacer { background-color: $brand-gray; } } - ul.aboutList { - font-size: 14pt; - line-height: 20pt; + + .odd { + text-align: left; + + .details-spacer { background-color: transparent; } + .icon-spacer { background-color: transparent; } + .icon { + background-color: $brand-gray; + ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; } + } + .details { + background-color: $brand-gray; + color: white; + h3 { color: $brand-primary-light-2; } + } } } diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts index 5c07d25..caed437 100644 --- a/src/app/about-us/about-us.component.ts +++ b/src/app/about-us/about-us.component.ts @@ -1,18 +1,54 @@ -import { Component, OnInit } from '@angular/core'; -import { ApiService } from '../api.service'; +import {Component, ElementRef, HostListener, OnInit} from '@angular/core'; +import {ApiService} from '../api.service'; +import {Capability} from '../interfaces'; +import {animate, state, style, transition, trigger, useAnimation} from '@angular/animations'; +import {fadeIn, fadeOut} from '../animation'; @Component({ selector: 'app-about-us', templateUrl: './about-us.component.html', - styleUrls: ['./about-us.component.scss'] + styleUrls: ['./about-us.component.scss'], + animations: [ + trigger('fadeInOut', [ + transition('void <=> *', useAnimation(fadeIn)), + transition('* <=> void', useAnimation(fadeOut)) + ]), + trigger('scrollAnimation', [ + state( + 'show', + style({ + opacity: 1, + zIndex: 0 + }) + ), + state( + 'hide', + style({ + opacity: 0, + zIndex: 0 + }) + ), + transition('show => hide', animate('700ms ease-out')), + transition('hide => show', animate('700ms ease-in')) + ]) + ] }) export class AboutUsComponent implements OnInit { + capabilities: Capability[]; + state = 'hide'; - constructor( - private api: ApiService - ) { } + constructor(private api: ApiService, public el: ElementRef) { + this.api.getCapabilities().subscribe(c => this.capabilities = c); + } ngOnInit() { } + @HostListener('window:scroll', ['$event']) + checkScroll() { + const hOffset = window.innerHeight / 2; + const componentPosition = this.el.nativeElement.offsetTop; + const scrollPosition = window.pageYOffset + hOffset; + this.state = scrollPosition >= componentPosition ? 'show' : 'hide'; + } }