Skip to content

Commit 50fa551

Browse files
DuskoPericDuskoPeric
authored
docs(www): add contributors page (#4990)
Closes #4987
1 parent 7c34d3d commit 50fa551

File tree

11 files changed

+506
-0
lines changed

11 files changed

+506
-0
lines changed

‎projects/www/public/images/bios/card-icons/back.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎projects/www/public/images/bios/card-icons/link.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎projects/www/public/images/bios/card-icons/twitter.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎projects/www/public/images/bios/victor.png‎

-8.61 KB
Loading

‎projects/www/src/app/components/contributor-card.component.ts‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { Component, input, signal } from '@angular/core';
2+
import { Contributor } from '../services/contributors.service';
3+
4+
@Component({
5+
selector: 'ngrx-contributor-card',
6+
template: `
7+
<div class="contributor">
8+
<div class="contributor-photo">
9+
<img
10+
[src]="'/images/bios/' + contributor().picture"
11+
alt="{{ contributor().name }}"
12+
/>
13+
</div>
14+
15+
<div class="contributor-info">
16+
<h3>{{ contributor().name }}</h3>
17+
18+
<div class="contributor-links">
19+
@if (contributor().twitter) {
20+
<a
21+
[href]="'https://twitter.com/' + contributor().twitter"
22+
target="_blank"
23+
>
24+
<img src="/images/bios/card-icons/twitter.svg" alt="Twitter" />
25+
</a>
26+
} @if (contributor().website) {
27+
<a [href]="contributor().website" target="_blank">
28+
<img src="/images/bios/card-icons/link.svg" alt="Website" />
29+
</a>
30+
}
31+
</div>
32+
33+
<p (click)="toggleBio()" class="view-bio">View Bio</p>
34+
</div>
35+
36+
<div
37+
class="contributor-bio-preview"
38+
[class.show]="bioVisible()"
39+
(click)="toggleBio()"
40+
>
41+
<p>{{ contributor().bio }}</p>
42+
</div>
43+
</div>
44+
`,
45+
styles: [
46+
`
47+
.contributor {
48+
overflow: hidden;
49+
position: relative;
50+
width: fit-content;
51+
align-items: center;
52+
min-height: 240px;
53+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
54+
}
55+
.contributor-photo {
56+
width: 200px;
57+
height: 210px;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
overflow: hidden;
62+
background: #fff;
63+
border-bottom: solid 4px #cf8fc5;
64+
}
65+
.contributor-photo img {
66+
height: 100%;
67+
width: auto;
68+
object-fit: cover;
69+
display: block;
70+
}
71+
.contributor-info {
72+
width: 200px;
73+
padding: 15px 0 0;
74+
text-align: center;
75+
background: #120c14;
76+
}
77+
.contributor-info h3 {
78+
margin-top: 0;
79+
margin-bottom: 8px;
80+
font-size: 16px;
81+
font-weight: 500;
82+
}
83+
.view-bio {
84+
margin: 10px 0 0;
85+
color: #cf8fc5;
86+
font-size: 14px;
87+
cursor: pointer;
88+
background: #221925;
89+
padding: 6px 0;
90+
}
91+
.view-bio:hover {
92+
color: #ececec;
93+
}
94+
.contributor-links {
95+
display: flex;
96+
justify-content: center;
97+
gap: 10px;
98+
}
99+
.contributor-links img {
100+
opacity: 0.8;
101+
}
102+
.contributor-links a:hover img {
103+
opacity: 1;
104+
}
105+
.contributor-bio-preview {
106+
position: absolute;
107+
top: 0;
108+
right: 0;
109+
width: 100%;
110+
height: 100%;
111+
background: #120c14;
112+
color: #fff;
113+
padding: 15px;
114+
overflow: hidden;
115+
display: flex;
116+
flex-direction: column;
117+
justify-content: space-between;
118+
transform: translateX(100%);
119+
transition: transform 0.3s ease-in-out;
120+
pointer-events: none;
121+
z-index: 2;
122+
cursor: pointer;
123+
background-image: url('/images/bios/card-icons/back.svg');
124+
background-repeat: no-repeat;
125+
background-position: right 12px bottom 12px;
126+
}
127+
.contributor-bio-preview.show {
128+
transform: translateX(0);
129+
pointer-events: auto;
130+
}
131+
.contributor-bio-preview p {
132+
margin: 0;
133+
color: #fff;
134+
font-size: 12px;
135+
line-height: 16px;
136+
}
137+
`,
138+
],
139+
})
140+
export class ContributorCardComponent {
141+
contributor = input.required<Contributor>();
142+
bioVisible = signal(false);
143+
144+
toggleBio() {
145+
this.bioVisible.set(!this.bioVisible());
146+
}
147+
}

‎projects/www/src/app/components/contributor-list.component.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component, input } from '@angular/core';
2+
import { ContributorCardComponent } from './contributor-card.component';
3+
import { Contributor } from '../services/contributors.service';
4+
5+
@Component({
6+
selector: 'ngrx-contributor-list',
7+
imports: [ContributorCardComponent],
8+
template: `
9+
@if (contributors() && contributors().length > 0) {
10+
<div class="contributor-list">
11+
@for (contributor of contributors(); track contributor.name) {
12+
<ngrx-contributor-card
13+
[contributor]="contributor"
14+
></ngrx-contributor-card>
15+
}
16+
</div>
17+
} @else {
18+
<p>No contributors found</p>
19+
}
20+
`,
21+
styles: [
22+
`
23+
.contributor-list {
24+
margin-top: 30px;
25+
display: grid;
26+
grid-template-columns: repeat(4, 1fr);
27+
gap: 24px;
28+
margin-bottom: 50px;
29+
justify-items: center;
30+
width: 900px;
31+
max-width: 100%;
32+
@media only screen and (max-width: 900px) {
33+
grid-template-columns: repeat(3, 1fr);
34+
}
35+
@media only screen and (max-width: 600px) {
36+
grid-template-columns: repeat(2, 1fr);
37+
}
38+
@media only screen and (max-width: 480px) {
39+
grid-template-columns: repeat(1, 1fr);
40+
}
41+
}
42+
`,
43+
],
44+
})
45+
export class ContributorListComponent {
46+
contributors = input<Contributor[]>([]);
47+
}

‎projects/www/src/app/components/contributor-navigation.component.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, input, output } from '@angular/core';
2+
import { GroupNav } from '../services/contributors.service';
3+
4+
@Component({
5+
selector: 'ngrx-contributor-navigation',
6+
template: `
7+
<div class="groups-navigation">
8+
@for (group of groupNames(); track group.name) {
9+
<p
10+
(click)="selectGroup(group.name)"
11+
[class.selected]="selectedGroup() === group.name"
12+
>
13+
{{ group.name }}
14+
</p>
15+
}
16+
</div>
17+
`,
18+
styles: [
19+
`
20+
.groups-navigation {
21+
display: flex;
22+
background: #221925;
23+
width: fit-content;
24+
padding: 5px;
25+
gap: 5px;
26+
margin-top: 50px;
27+
margin-bottom: 50px;
28+
border-radius: 5px;
29+
}
30+
.groups-navigation p {
31+
color: #bfbcc0;
32+
padding: 2px 10px;
33+
cursor: pointer;
34+
margin: 0;
35+
border-radius: 2px;
36+
font-size: 18px;
37+
}
38+
.groups-navigation p.selected {
39+
background: #120c14;
40+
color: #fff;
41+
}
42+
`,
43+
],
44+
})
45+
export class ContributorNavigationComponent {
46+
groupNames = input<GroupNav[]>();
47+
selectedGroup = input<string>();
48+
groupSelected = output<string>();
49+
50+
selectGroup(name: string) {
51+
this.groupSelected.emit(name);
52+
}
53+
}

‎projects/www/src/app/components/footer.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { RouterLink } from '@angular/router';
1919
<a routerLink="/workshops">Workshops</a>
2020
<a routerLink="/api">API Reference</a>
2121
<a href="https://github.com/sponsors/ngrx" target="_blank">Sponsor</a>
22+
<a routerLink="/about">About</a>
2223
</nav>
2324
2425
<nav class="packages">

‎projects/www/src/app/data/contributors.json‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{
2+
"robwormald": {
3+
"name": "Rob Wormald",
4+
"picture": "rob-wormald.jpg",
5+
"twitter": "robwormald",
6+
"website": "http://github.com/robwormald",
7+
"bio": "Rob is a Developer Programs Engineer for Angular at Google. He's the Angular team's resident reactive programming geek and founder of NgRx.",
8+
"group": "Alumni"
9+
},
10+
11+
"brandonroberts": {
12+
"name": "Brandon Roberts",
13+
"picture": "brandonroberts.jpg",
14+
"twitter": "brandontroberts",
15+
"website": "http://github.com/brandonroberts",
16+
"bio": "Brandon is member of the Angular Team working on documentation and development. He is also a former GDE",
17+
"group": "Core"
18+
},
19+
20+
"MikeRyanDev": {
21+
"name": "Mike Ryan",
22+
"picture": "mike-ryan.jpg",
23+
"twitter": "mikeryandev",
24+
"website": "http://github.com/mikeryandev",
25+
"bio": "Mike Ryan is a Principal Architect at LiveLoveApp and one of the original co-creators of NgRx and a Google Developer Expert in Angular",
26+
"group": "Core"
27+
},
28+
29+
"vsavkin": {
30+
"name": "Victor Savkin",
31+
"picture": "victor.png",
32+
"twitter": "victorsavkin",
33+
"website": "http://blog.nrwl.io",
34+
"bio": "Victor is co-founder of Nrwl. Victor developed Angular dependency injection, change detection, forms, and the router.",
35+
"group": "Alumni"
36+
},
37+
38+
"wardbell": {
39+
"name": "Ward Bell",
40+
"picture": "wardbell.jpg",
41+
"website": "https://github.com/wardbell",
42+
"twitter": "wardbell",
43+
"bio": "Ward is an all-around developer with JavaScript, Node.js®, and .net chops. He's a frequent conference speaker and podcaster, trainer, Google Developer Expert for Angular, Microsoft MVP, and PluralSight author. He is also president of IdeaBlade, an enterprise software consulting firm and the makers of breeze.js. He would like to get more sleep and spend more time in the mountains.",
44+
"group": "Alumni"
45+
},
46+
47+
"johnpapa": {
48+
"name": "John Papa",
49+
"picture": "john-papa.jpg",
50+
"website": "https://github.com/johnpapa",
51+
"twitter": "john_papa",
52+
"bio": "John Papa is a dedicated father and husband, a Principal Developer Advocate with Microsoft, and an alumnus of the Google Developer Expert, Microsoft RD, and MVP programs.",
53+
"group": "Alumni"
54+
},
55+
56+
"timdeschryver": {
57+
"name": "Tim Deschryver",
58+
"picture": "timd.jpg",
59+
"twitter": "tim_deschryver",
60+
"website": "https://timdeschryver.dev",
61+
"bio": "Tim is a Microsoft MVP, and likes to share his knowledge on his blog.",
62+
"group": "Core"
63+
},
64+
65+
"wesleygrimes": {
66+
"name": "Wes Grimes",
67+
"picture": "wesgrimes.jpg",
68+
"website": "https://github.com/wesleygrimes",
69+
"bio": "Wes is a software engineer in the insurance industry, and writer for Angular in Depth and Ultimate Courses.",
70+
"group": "Alumni"
71+
},
72+
73+
"alex-okrushko": {
74+
"name": "Alex Okrushko",
75+
"picture": "alex-okrushko.jpg",
76+
"twitter": "alexokrushko",
77+
"website": "https://github.com/alex-okrushko",
78+
"bio": "Alex Okrushko is a Principal Architect at Cisco. He is part of the NgRx team, Google Developer Expert in Angular and @AngularToronto organizer",
79+
"group": "Core"
80+
},
81+
82+
"markostanimirovic": {
83+
"name": "Marko Stanimirović",
84+
"picture": "marko.jpg",
85+
"twitter": "markostdev",
86+
"website": "https://github.com/markostanimirovic",
87+
"bio": "Marko is a core member of the NgRx team, a Google Developer Expert in Angular, and an organizer of the Angular Belgrade group. He enjoys contributing to open source software, sharing knowledge through technical articles and talks, and playing guitar. He is also a Master of Science in Software Engineering from the University of Belgrade.",
88+
"group": "Core"
89+
},
90+
91+
"rainerhahnekamp": {
92+
"name": "Rainer Hahnekamp",
93+
"picture": "rainer.jpg",
94+
"twitter": "rainerhahnekamp",
95+
"website": "https://www.rainerhahnekamp.com/",
96+
"bio": "Passionate Angular and Spring developer. Google Developer Expert in Angular. Trainer and Consultant at AngularArchitects.",
97+
"group": "Core"
98+
}
99+
}

0 commit comments

Comments
 (0)