Skip to content

Commit a4c1d12

Browse files
devinryanriotadevinryanriota
authored
about page (#9)
* init about page * about us card * side by side * about us card * fix css * about us * minify * react ga about
1 parent 90a5f8a commit a4c1d12

13 files changed

Lines changed: 242 additions & 6 deletions

File tree

‎public/devin.jpg‎

433 KB
Loading

‎public/jun.jpeg‎

42 KB
Loading

‎src/App.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
33
import { Header, Footer } from './components'
4-
import { Index, NotFound } from './pages'
4+
import { Index, NotFound, About } from './pages'
55
import ReactGA from 'react-ga'
66

77
const GA_TRACKING_ID_PROD = 'UA-176048075-1'
@@ -25,9 +25,13 @@ export const App: React.FC<{}> = () => {
2525
<Route exact path='/'>
2626
<Index />
2727
</Route>
28+
<Route exact path='/about'>
29+
<About />
30+
</Route>
2831
<Route path='*'>
2932
<NotFound />
3033
</Route>
34+
3135
</Switch>
3236
<Footer />
3337
</Router>

‎src/components/AboutUsCard/index.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React, { FC } from 'react'
2+
import Style from './style.module.scss'
3+
import { Member } from '../../types'
4+
5+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
6+
import { faLinkedinIn, faGithub, faMedium } from '@fortawesome/free-brands-svg-icons'
7+
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
8+
9+
interface IProps {
10+
Member: Member
11+
}
12+
13+
export const AboutUsCard: FC<IProps> = ({ Member }: IProps) => {
14+
return (
15+
<div className = { Style.Card } >
16+
<img className = { Style.MemberImage } alt = { Member.name } src = { Member.image } />
17+
18+
<div className = { Style.TextContainer } >
19+
<div className = { Style.Title }>
20+
{ Member.name }
21+
</div>
22+
<div className = { Style.Description }
23+
dangerouslySetInnerHTML = {{__html: Member.description}} >
24+
</div>
25+
{
26+
Member.github !== undefined && (
27+
<div className = { Style.Social }>
28+
<a href = { Member.github } target = '_blank' rel="noopener noreferrer">
29+
<div className = { Style.Icon }>
30+
<FontAwesomeIcon icon = { faGithub } />
31+
</div>
32+
Github
33+
</a>
34+
</div>
35+
)
36+
}
37+
38+
{
39+
Member.linkedin !== undefined && (
40+
<div className = { Style.Social }>
41+
<a href = { Member.linkedin } target = '_blank' rel="noopener noreferrer">
42+
<div className = { Style.Icon }>
43+
<FontAwesomeIcon icon = { faLinkedinIn } />
44+
</div>
45+
Linkedin
46+
</a>
47+
</div>
48+
)
49+
}
50+
51+
{
52+
Member.medium !== undefined && (
53+
<div className = { Style.Social }>
54+
<a href = { Member.medium } target = '_blank' rel="noopener noreferrer">
55+
<div className = { Style.Icon }>
56+
<FontAwesomeIcon icon = { faMedium } />
57+
</div>
58+
Medium
59+
</a>
60+
</div>
61+
)
62+
}
63+
64+
{
65+
Member.website !== undefined && (
66+
<div className = { Style.Social }>
67+
<a href = { Member.website } target = '_blank' rel="noopener noreferrer">
68+
<div className = { Style.Icon }>
69+
<FontAwesomeIcon icon = { faGlobe } />
70+
</div>
71+
Website
72+
</a>
73+
</div>
74+
)
75+
}
76+
77+
</div>
78+
</div>
79+
)
80+
}

‎src/components/AboutUsCard/style.module.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import '../../styles/media';
2+
@import '../../styles/fonts';
3+
@import '../../styles/colors';
4+
5+
.Card {
6+
background-color: $dark;
7+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
8+
transition: 0.3s;
9+
border-radius: 5px;
10+
margin: 0 36px 24px;
11+
min-width: 0;
12+
13+
&:hover {
14+
box-shadow: 5px 5px 20px 0px rgba(0,0,0,1);
15+
}
16+
}
17+
18+
.MemberImage {
19+
max-width: 260px;
20+
max-height: 260px;
21+
border-radius: 8px 8px 0 0;
22+
}
23+
24+
.TextContainer {
25+
padding: 2px 16px;
26+
margin: 0 auto;
27+
margin-bottom: 4px;
28+
}
29+
30+
.Title {
31+
font-weight: bold;
32+
font-size: 1.25rem;
33+
align-items: center;
34+
justify-content: center;
35+
font-family: $karla;
36+
padding-bottom: 1px;
37+
border-bottom: 1px solid $light;
38+
margin-bottom: 16px;
39+
}
40+
41+
.Description {
42+
font-family: $roboto;
43+
margin-bottom: 16px;
44+
}
45+
46+
.Icon {
47+
width: 15px;
48+
height: 15px;
49+
margin-right: 10px;
50+
display: inline-block;
51+
}
52+
53+
.Social {
54+
margin-bottom: 8px;
55+
text-decoration: none;
56+
color: $primary-text-color;
57+
58+
& a {
59+
text-decoration: none;
60+
color: $blue;
61+
}
62+
}

‎src/components/Header/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface IProps {
99
const HOME = '/'
1010
// const EPISODE = '/ep'
1111
// const BLOG = '/blog'
12-
// const ABOUT = '/about'
12+
const ABOUT = '/about'
1313

1414
const pathLink = window.location.pathname
1515

@@ -19,7 +19,7 @@ export const Header: FC<IProps> = (props) => {
1919
const homeClass = pathLink === HOME ? activeNavClass : baseNavClass
2020
// const episodeClass = pathLink === EPISODE ? activeNavClass : baseNavClass
2121
// const blogClass = pathLink === BLOG ? activeNavClass : baseNavClass
22-
// const aboutClass = pathLink === ABOUT ? activeNavClass : baseNavClass
22+
const aboutClass = pathLink === ABOUT ? activeNavClass : baseNavClass
2323

2424
return (
2525
<header>
@@ -34,6 +34,9 @@ export const Header: FC<IProps> = (props) => {
3434
<li>
3535
<a className = { homeClass } href = { HOME }>Home</a>
3636
</li>
37+
<li>
38+
<a className = { aboutClass } href = { ABOUT }>About Us</a>
39+
</li>
3740
{/* <li>
3841
<a className = { episodeClass } href = { EPISODE }>Episodes</a>
3942
</li>

‎src/components/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './Card'
22
export * from './Page'
33
export * from './Header'
4-
export * from './Footer'
4+
export * from './Footer'
5+
export * from './AboutUsCard'

‎src/pages/About/index.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { FC, useEffect } from 'react'
2+
import Style from './style.module.scss'
3+
import { Member } from '../../types'
4+
import { AboutUsCard } from '../../components'
5+
6+
import ReactGA from 'react-ga'
7+
8+
export const PageViewAbout = () => {
9+
const pathName = window.location.pathname + window.location.search
10+
if(process.env.NODE_ENV === 'production') {
11+
ReactGA.pageview(pathName)
12+
}
13+
}
14+
interface IProps {
15+
ClassName?: string
16+
}
17+
18+
const members: Member[] = [
19+
{
20+
name: 'Clavin June',
21+
description: 'Software Engineer',
22+
image: 'jun.jpeg',
23+
github: 'https://github.com/ClavinJune',
24+
linkedin: 'https://www.linkedin.com/in/juneardoc/',
25+
website: 'https://clavinjune.dev',
26+
medium: 'https://medium.com/@clavinjune'
27+
},
28+
{
29+
name: 'Devin Ryan Riota',
30+
description: 'Software Engineer',
31+
image: 'devin.jpg',
32+
github: 'https://github.com/devinryanriota',
33+
linkedin: 'https://www.linkedin.com/in/devinryanriota/',
34+
medium: 'https://medium.com/@devinryanriota'
35+
},
36+
]
37+
38+
export const About: FC<IProps> = (props) => {
39+
useEffect(() => {
40+
PageViewAbout()
41+
}, [])
42+
43+
return (
44+
<div className = { Style.container }>
45+
<h2 style = {{ textAlign: 'center' }}>
46+
About Us
47+
</h2>
48+
49+
<div className = { Style.gridContainer }>
50+
{
51+
members.map((m: Member, index: number) => {
52+
return <AboutUsCard key = { index } Member = { m }/>
53+
})
54+
}
55+
</div>
56+
</div>
57+
)
58+
}

‎src/pages/About/style.module.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
margin-left: 0;
6+
margin-right: 0;
7+
margin-top: 20px;
8+
}
9+
10+
.gridContainer {
11+
display: flex;
12+
flex-wrap: wrap;
13+
padding-top: 10px;
14+
margin: 0 auto;
15+
justify-content: center;
16+
}

‎src/pages/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './Index'
2-
export * from './NotFound'
2+
export * from './NotFound'
3+
export * from './About'

0 commit comments

Comments
 (0)