Skip to content

Commit 71716d4

Browse files
ikalnytskyiikalnytskyi
authored
Merge pull request #68 from xsnippet/about-us
Add About Us page
2 parents 84cf443 + b437e9a commit 71716d4

File tree

4 files changed

+182
-3
lines changed

4 files changed

+182
-3
lines changed

‎src/components/About.jsx‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,92 @@
11
import React from 'react';
2+
import Title from './common/Title';
23

4+
import '../styles/AboutUs.styl';
35

46
const About = () => (
5-
<div>
6-
About page
7-
</div>
7+
[
8+
<div className="about-us" key="about">
9+
<Title title="About" key="About title" />
10+
<p className="about-us-paragraph">
11+
XSnippet is an open source web-service for sharing code snippets on
12+
the Internet. Years ago it was started as educational project, and
13+
nothing has changed since then. The service has been rewritten several
14+
times from scratch and now it consists of:
15+
</p>
16+
<ul className="about-us-repo-list">
17+
<li className="about-us-repo-item">
18+
<span className="about-us-repo">xsnippet-api</span>
19+
<p className="about-us-paragraph">
20+
It implements a RESTful API to manage snippets and flies on top of
21+
asyncio/aiohttp and MongoDB;
22+
</p>
23+
</li>
24+
<li className="about-us-repo-item">
25+
<span className="about-us-repo">xsnippet-web</span>
26+
<p className="about-us-paragraph">
27+
It provides a web-based user interface (SPA) and flies on top of
28+
React/Redux stack;
29+
</p>
30+
</li>
31+
<li className="about-us-repo-item">
32+
<span className="about-us-repo">xsnippet-web-backend</span>
33+
<p className="about-us-paragraph">
34+
It is a tiny app which implements what doesn’t fall under API
35+
description yet required by xsnippet-web.
36+
</p>
37+
</li>
38+
</ul>
39+
<p className="about-us-paragraph">
40+
These components, and other goodies, can be found in our GitHub:
41+
</p>
42+
<a className="about-us-github" href="http://github.com/xsnippet/">
43+
http://github.com/xsnippet/
44+
</a>
45+
</div>,
46+
<div className="about-us" key="team">
47+
<Title title="Our Team" key="Team title" />
48+
<p className="about-us-paragraph">
49+
Modern XSnippet incarnation has been designed and developed by these fine people:
50+
</p>
51+
<ul className="about-us-team-list">
52+
<li className="about-us-team-item">
53+
<img src="http://lorempixel.com/g/100/100/" alt="Ainura Aliieva" />
54+
<div>
55+
<span className="about-us-team-member">Ainura Aliieva</span>
56+
<p className="about-us-paragraph small">Front-end developer</p>
57+
</div>
58+
</li>
59+
<li className="about-us-team-item">
60+
<img src="http://lorempixel.com/g/100/100/" alt="Ihor Kalnytskyi" />
61+
<div>
62+
<span className="about-us-team-member">Ihor Kalnytskyi</span>
63+
<p className="about-us-paragraph small">Back-end developer</p>
64+
</div>
65+
</li>
66+
<li className="about-us-team-item">
67+
<img src="http://lorempixel.com/g/100/100/" alt="Olha Kurkaiedova" />
68+
<div>
69+
<span className="about-us-team-member">Olha Kurkaiedova</span>
70+
<p className="about-us-paragraph small">Front-end developer</p>
71+
</div>
72+
</li>
73+
<li className="about-us-team-item">
74+
<img src="http://lorempixel.com/g/100/100/" alt="Roman Podoliaka" />
75+
<div>
76+
<span className="about-us-team-member">Roman Podoliaka</span>
77+
<p className="about-us-paragraph small">Back-end developer</p>
78+
</div>
79+
</li>
80+
<li className="about-us-team-item">
81+
<img src="http://lorempixel.com/g/100/100/" alt="Kateryna Zharikova" />
82+
<div>
83+
<span className="about-us-team-member">Kateryna Zharikova</span>
84+
<p className="about-us-paragraph small">Visual Designer</p>
85+
</div>
86+
</li>
87+
</ul>
88+
</div>,
89+
]
890
);
991

1092
export default About;

‎src/styles/AboutUs.styl‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import './common/variables.styl'
2+
3+
.about-us
4+
padding: 22px 20px
5+
margin-bottom: 10px
6+
background-color: snippet-content-light
7+
border-left: 9px solid about-us-border
8+
box-shadow: 0 2px 2px 0 border-dark
9+
font-family: font-roboto
10+
& .title
11+
font-size: 24px
12+
color: about-us-title
13+
&-paragraph
14+
color: about-us-paragraph
15+
font-weight: 300
16+
letter-spacing: .1px
17+
font-size: 14px
18+
line-height: 22px
19+
&.small
20+
font-size: 12px
21+
&-repo
22+
display: block
23+
padding-bottom: 3px
24+
color: text-dark
25+
font-size: 14px
26+
&-list
27+
margin-left: 37px
28+
margin-top: 24px
29+
list-style: disc
30+
color: about-us-point
31+
& + .about-us-paragraph
32+
padding-top: 8px
33+
padding-bottom: 5px
34+
&-item
35+
padding-bottom: 14px
36+
&-github
37+
color: snippet-border
38+
font-size: 14px
39+
font-weight: 300
40+
letter-spacing: .1px
41+
&-team
42+
&-list
43+
display: flex
44+
flex-flow: row wrap
45+
padding-top: 39px
46+
&-item
47+
width: 50%
48+
display: inline-flex
49+
padding-bottom: 29px
50+
&:last-child
51+
padding-bottom: 0
52+
& img
53+
border-radius: 50%
54+
& + div
55+
padding-left: 20px
56+
padding-top: 15px
57+
&-member
58+
display: block
59+
padding-bottom: 11px
60+
color: about-us-point
61+
font-size: 12px
62+
63+
@media (max-width: 640px)
64+
.about-us
65+
&-team
66+
&-list
67+
flex-flow: column nowrap
68+
&-item
69+
display: flex
70+
flex-flow: column nowrap
71+
width: 100%
72+
align-items: center
73+
padding-bottom: 15px
74+
text-align: center
75+
& img
76+
width: 200px
77+
& + div
78+
padding-left: 0
79+
80+
@media (min-width: 1024px)
81+
.about-us
82+
&-team
83+
&-list
84+
flex-flow: row nowrap
85+
&-item
86+
display: flex
87+
flex-flow: column nowrap
88+
align-items: center
89+
padding-bottom: 0
90+
text-align: center
91+
& img + div
92+
padding-left: 0

‎src/styles/common/colors.styl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ color-dim-gray-gray-s0 = #6b6b6b
2525
color-night-rider-grey-s1 = #343333
2626
color-nero-grey-s0 = #272727
2727
color-night-rider-grey-s0 = #323232
28+
color-dim-gray-grey-s0 = #676767

‎src/styles/common/variables.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ button-light-active = color-downy-green-s42
4343
button-inverse-header = color-mountain-meadow-green-s89
4444
button-embed-hover = color-mountain-meadow-green-s89
4545

46+
about-us-paragraph = color-dim-gray-grey-s0
47+
about-us-title = color-night-rider-grey-s0
48+
about-us-point = color-shamrock-green-s73
49+
about-us-border = color-shamrock-green-s73
4650
offset = 70px
4751

4852
font-raleway = 'Raleway', sans-serif

0 commit comments

Comments
 (0)