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

Lots more word smithing, and a smattering of animations.

This commit is contained in:
Dan Funk 2018-12-28 17:34:38 -05:00
parent 1ce2e005f4
commit b88f908605
10 changed files with 101 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,29 +9,21 @@
<mat-tab-group mat-stretch-tabs>
<mat-tab label="Who We Are">
<div class="tab-content">
<h3>We are a Collective of Makers.</h3>
<p>We are not a company, with a hierarchy, ladders to climb, or backs to
scratch. We just like each other. And through patience,
good will, and open hearts, we have managed to forge a working relationship that allows us to apply our
skills to worthwhile purposes. If making the world a
better place to live is core to your mission, and you aspire to work with compassionate craftspeople who
love what they do, well then. You found us.</p>
<p>We are, literally, makers. We have collectively founded and are central in running our local Makerspace.
Where we can spend 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
ourselves.</p>
</div>
</mat-tab>
<mat-tab label="The Logo's Meaning">
<div class="tab-content">
<h3>Our Logo:</h3>
<p><b>The Compass:</b> It stands for the exact representation of information. We do not aim to make things beautiful first,
but to make things exact, and in doing so, bring forth beauty.</p>
<p><b>The Heart:</b> We take on work that insights our passion for learning, building, and creating a better world.</p>
<p><b>The Thread:</b> We are woven together, our endeavors are collaborative, each effort binds us together as a
team, in a collective endeavor, made of many skills and countless contributions. A grand tapestry we make.</p>
<p><b>Bespoke:</b> This word evolved from the verb "to speak for something". We wish to speak for something good.
In present use as an adjuctive, it should evoke a sense of the tailor made, something crafted to specification.</p>
<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>
<p> We are also some of the founders and leaders of the <a href="http://stauntonmakerspace.com" target="new">Staunton Makerspace</a>,
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>
</div>
</mat-tab>
<mat-tab label="Mission and Vision">
@ -46,29 +38,35 @@
health of our community.</p>
</div>
</mat-tab>
<mat-tab label="Our Logo">
<div class="tab-content">
<h3>The Meaning Behind our Logo Design</h3>
<p><b>The Compass:</b> It stands for the exact representation of information. We do not aim to make things beautiful first,
but to make things exact, and in doing so, bring forth beauty.</p>
<p><b>The Heart:</b> We take on work that insights our passion for learning, building, and creating a better world.</p>
<p><b>The Thread:</b> We are woven together, our endeavors are collaborative, each effort binds us together as a
team, in a collective endeavor, made of many skills and countless contributions. A grand tapestry we make.</p>
<p><b>Bespoke:</b> This word evolved from the verb "to speak for something". We wish to speak for something good.
In present use as an adjuctive, it should evoke a sense of the tailor made, something crafted to specification.</p>
</div>
</mat-tab>
<mat-tab label="Our Values">
<div class="tab-content">
<h3>Conversation.</h3>
<h3>Conversation</h3>
<p>First we listen, then we find empathy, then we accept responsibility.</p>
<p>We work daily with scientists and experts who live and breathe their passions. It is an honor to be working
with you, learning from you, and growing together. And though it takes great effort, our work with
<p>We work daily with scientists and experts who live and breathe their passions. Our work with
excellent minds allows us to build true innovations through tight collaboration.</p>
<h3>Respect.</h3>
<h3>Respect</h3>
<p>Respect must begin within yourself. We will take time to respect and care for ourselves, then our families,
and then our clients. We will come to work with the power to make things happen and the balance of
perspective that comes from being healthy and happy in the rest of our lives. We then have the most to give
others.</p>
<p>We are a family first organization.</p>
<h3>Rigor.</h3>
<h3>Rigor</h3>
<p>We have long worked with scientists. We know every piece of data matters. It must make sense, it must be easy
to understand, reuse, manipulate, and share. It must be harvested with great care, stored carefully, de-identified,
checked, rechecked. Verified and re-verified. We spend a lot of time thinking about the importance of
to access, manipulate, and share. We spend a lot of time thinking about the importance of
information, because if done correctly, good data can change the way we all see the world.
</p>
<h3>Play.</h3>
<h3>Play</h3>
<p>We must play. At the Makerspace, in our code, with our kids. It is the act of play that enlivens our minds
and brings us joy. Joy begets works of delight, delight brings engagement, engagement brings insight.
Insight brings us greater wisdom. Wisdom teaches us how to play.</p>
@ -87,12 +85,14 @@
fxFlex="30%"
>
<mat-card>
<div class="circle-img">
<img src="{{ t.imageLink }}">
<div class="top">
<div class="circle-img">
<img src="{{ t.imageLink }}">
</div>
<h2>{{ t.firstName }}</h2>
<h2>{{ t.lastName }}</h2>
<h3>{{ t.title }}</h3>
</div>
<h2>{{ t.firstName }}</h2>
<h2>{{ t.lastName }}</h2>
<h3>{{ t.title }}</h3>
<div *ngFor="let d of t.description">
<p>{{ d }}</p>
</div>

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

@ -31,6 +31,11 @@
mat-card {
padding: 5%;
.top {
text-align: center;
}
h2 {
padding: 0;
margin: 0;
@ -51,5 +56,8 @@
max-width: 90%;
padding: 2%;
}
ul.aboutList {
font-size: 14pt;
line-height: 20pt;
}
}

9
src/app/case-studies/case-studies.component.html
View File

@ -3,7 +3,7 @@
id="case-studies"
>
<h1>CASE STUDIES</h1>
<p>Please select a tile below to learn about some of our recent projects.</p>
<p>Please select a tile below to learn about some of our recent projects, read reviews of our work, and visit some of our creations.</p>
<div
fxLayout="row"
fxLayout.lt-xs="column"
@ -11,11 +11,12 @@
fxLayoutAlign="space-between"
>
<div *ngFor="let study of caseStudies">
<mat-card
<mat-card [@activate]="study === caseStudy ? 'active' : 'inactive'"
class="intro"
(click)="setStudyView(study)"
>
<img src="{{ study.featureLink }}">
<img
src="{{ study.featureLink }}">
</mat-card>
</div>
</div>
@ -24,7 +25,7 @@
class="study"
id="study"
>
<div fxLayout="row"
<div
fxLayout.lt-sm="column"
fxLayoutGap="2%"
fxLayoutAlign="space-between stretch"

2
src/app/case-studies/case-studies.component.scss
View File

@ -11,7 +11,7 @@
text-align: center;
h1{
padding: 2%;
padding: 20px auto;
}
img {

28
src/app/case-studies/case-studies.component.ts
View File

@ -1,15 +1,39 @@
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';
import { CaseStudy } from '../interfaces';
import {animate, state, style, transition, trigger} from '@angular/animations';
@Component({
selector: 'app-case-studies',
templateUrl: './case-studies.component.html',
styleUrls: ['./case-studies.component.scss']
styleUrls: ['./case-studies.component.scss'],
animations: [
trigger('activate', [
state('active', style({
opacity: 1
})),
state('inactive', style({
opacity: 0.5,
transform: 'scale(.75)',
})),
transition('* <=> *', animate('200ms ease-in')),
]),
trigger('visible', [
state('*', style({
opacity: 1,
})),
state('void', style({
opacity: 0,
})),
transition('* <=> *', animate('200ms ease-in')),
])
]
})
export class CaseStudiesComponent implements OnInit {
caseStudies: CaseStudy[];
caseStudy: CaseStudy;
showCase = false;
constructor(
private api: ApiService
@ -18,10 +42,12 @@ export class CaseStudiesComponent implements OnInit {
ngOnInit() {
this.api.getCaseStudies().subscribe(studies => {
this.caseStudies = studies;
this.caseStudy = this.caseStudies[0];
});
}
setStudyView(study: CaseStudy) {
this.showCase = true;
this.caseStudy = study;
}

2
src/app/header/header.component.html
View File

@ -2,5 +2,5 @@
class="welcome"
fxLayoutAlign="center center"
>
<img src="assets/logo/Sartography-Logo-Vertical-Color.png"/>
<img @fadeInOut src="assets/logo/Sartography-Logo-Vertical-Color.png"/>
</div>

2
src/app/header/header.component.scss
View File

@ -3,7 +3,7 @@
padding: 5%;
display: grid;
height: 100%;
min-height: 100vh;
img {
max-height: 60vh;
margin: auto;

14
src/app/header/header.component.ts
View File

@ -1,9 +1,21 @@
import { Component, OnInit } from '@angular/core';
import {animate, state, style, transition, trigger} from '@angular/animations';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
styleUrls: ['./header.component.scss'],
animations: [
trigger('fadeInOut', [
state('void', style({
opacity: 0
})),
state('*', style({
opacity: 100
})),
transition('void <=> *', animate('1000ms ease-in')),
])
]
})
export class HeaderComponent implements OnInit {

2
src/assets/json/team-members.json
View File

@ -29,7 +29,7 @@
"title": "Developer",
"description": [
"Eleanor brings a rich background in music, community development, and finance to her work as a software developer. Like many great developers before her, Eleanor is a self made programmer who has taught herself coding from base principles, and applies them with the skill that only comes to the truly gifted. Eleanor is a professional cellist with the Roanoke Symphony Orchestra. She previously served as the Executive Director of the Staunton Creative Community Fund, helping to establish entrepreneurs in the local area through thoughtful guidance, inspiration and sound financial advice.",
"Eleanor maybe married to a Professor of Mathematics, classically trained in music, and as culturally refined as our humble community can sustain, but she is raising her daughter to be the wild drummer girl that in a decade or two will be belting out music that you'll be warning your innocent young sons about."
"Eleanor maybe classically trained in music, married to a tenured professor of mathematics, and as culturally refined as our humble community can sustain, but she is raising her daughter to be the wild drummer in a rock band you will someday be warning your impressionable young son about."
],
"imageLink": "assets/images/team/eleanor.png",
"gitHubLink": "https://github.com/eleanorgraham",

3
src/sartography_material.scss
View File

@ -99,6 +99,9 @@ $sartography-theme: mat-light-theme($sartography-primary, $sartography-accent, $
@include angular-material-theme($sartography-theme);
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin sartography-theme($theme) {
[hidden] { display: none !important;}
// Extract whichever individual palettes you need from the theme.
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);