sartography
/
sartography-website
mirror of https://github.com/sartography/sartography-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Builds out About Us section

This commit is contained in:
Aaron Louie 2019-10-14 18:06:51 -04:00
parent 9462940037
commit c52da09b68
3 changed files with 131 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/about-us/about-us.component.html
View File

@ -1,45 +1,30 @@
<div class="about-us" fxLayout="row" [@scrollAnimation]="state" fxLayoutAlign="center start">
<div fxFlex="33.33%" class="title">
<h1 class="mat-display-1">About Us</h1>
<h2 class="mat-display-3">What We Do</h2>
</div>
<div fxFlex="67.67%" fxLayout="column" class="capabilities">
<div <div
class="about-us" *ngFor="let c of capabilities; let i = index"
fxLayout="column" [fxLayout]="i % 2 === 0 ? 'row' : 'row-reverse'"
fxLayoutGap="2%" [ngClass]="i % 2 === 0 ? 'even' : 'odd'"
fxLayoutAlign="start start"
> >
<div> <div class="details" fxFlex="37.5%">
<h1>Meet Sartography</h1> <h3>{{c.title}}</h3>
<mat-tab-group mat-stretch-tabs> <p>{{c.description}}</p>
<mat-tab label="Who We Are"> </div>
<div class="tab-content">
<h3>We are Software Developers.</h3>
<p>We create engaging web applications using modern web development tools. </p>
<p>Here are a few areas where we are particularly effective:</p>
<ul class="aboutList">
<li><b>Beautiful Information:</b> 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. </li>
<li><b>Mobile Friendly:</b> Even our most complex applications work well on phones and tablets, as well as desktops using the Angular Framework.</li>
<li><b>Secure and Discrete:</b> We build applications that allow scientists to safely collect, monitor and study medical information.</li>
<li><b>Scientific:</b> 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.</li>
<li><b>Big Data:</b> 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.</li>
</ul>
<p>Be sure and look at our Case Studies to see these skills in action.</p>
<h3>We are Makers.</h3> <div class="icon" fxFlex="12.5%">
<p> We are also some of the founders and leaders of the <a href="http://stauntonmakerspace.com" target="new">Staunton Makerspace</a>, <span
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.</p> [inlineSVG]="c.icon_url"
class="capability-icon"
></span>
</div>
<div class="icon-spacer" fxFlex="12.5%"></div>
<div class="details-spacer" fxFlex="37.5%"></div>
</div>
</div>
</div> </div>
</mat-tab>
<mat-tab label="Mission and Vision">
<div class="tab-content">
<h3>Our Mission:</h3>
<p>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.</p>
<h3>Our Vision:</h3>
<p>To build a world changing application that make a meaningful, scientifically proven impact in the mental
health of our community.</p>
</div>
</mat-tab>
</mat-tab-group>
</div>
<div fxLayoutAlign="center center">
<img src="assets/logo/Sartography-Logo-Horizontal-Color.png">
</div>
</div>

101
src/app/about-us/about-us.component.scss
View File

@ -1,63 +1,72 @@
// Import theming functions @import "../../config";
@import '~@angular/material/theming';
// Import your custom theme
@import '../../sartography_material';
// Load the Sartography Theme
@include sartography-theme($sartography-theme);
.about-us { .about-us {
padding: 5%; position: relative;
background-color: mat-color($sartography-primary, 50); background-color: $dark-gray;
color: mat-contrast($sartography-primary, 50); background-image: url("/assets/images/about-us.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: bottom left;
min-height: 1600px;
.tab-content { .title {
max-width: 800px; margin-top: 80px;
margin: auto; margin-left: 80px;
}
h1 { h1 {
text-align: center; color: $brand-primary;
padding: 2%; margin-bottom: 0;
}
} }
button { .capabilities {
margin: 2%; margin-top: 300px;
padding: 7px; margin-right: 80px;
background-color: mat-color($sartography-warn, 500);
color: mat-contrast($sartography-warn, 500); ::ng-deep .capability-icon svg {
cursor: pointer; margin-top: -52px;
width: 128px;
height: 128px;
}
} }
mat-card { .even {
padding: 5%; text-align: right;
.top { .details {
text-align: center; 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; }
} }
.odd {
text-align: left;
h2 { .details-spacer { background-color: transparent; }
padding: 0; .icon-spacer { background-color: transparent; }
margin: 0; .icon {
background-color: $brand-gray;
::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
} }
.details {
img { background-color: $brand-gray;
border-radius: 200px; color: white;
height: 200px; h3 { color: $brand-primary-light-2; }
width: 200px;
} }
} }
mat-tab-group {
background-color: #ffffff;
min-height: 400px;
padding: 2%;
}
img {
max-width: 90%;
padding: 2%;
}
ul.aboutList {
font-size: 14pt;
line-height: 20pt;
}
} }

46
src/app/about-us/about-us.component.ts
View File

@ -1,18 +1,54 @@
import { Component, OnInit } from '@angular/core'; import {Component, ElementRef, HostListener, OnInit} from '@angular/core';
import {ApiService} from '../api.service'; 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({ @Component({
selector: 'app-about-us', selector: 'app-about-us',
templateUrl: './about-us.component.html', 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 { export class AboutUsComponent implements OnInit {
capabilities: Capability[];
state = 'hide';
constructor( constructor(private api: ApiService, public el: ElementRef) {
private api: ApiService this.api.getCapabilities().subscribe(c => this.capabilities = c);
) { } }
ngOnInit() { 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';
}
} }