diff --git a/components/AlumniCard.js b/components/AlumniCard.js
new file mode 100644
index 0000000..acc9e5a
--- /dev/null
+++ b/components/AlumniCard.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardActionArea from '@material-ui/core/CardActionArea'
+import CardActions from '@material-ui/core/CardActions'
+import CardContent from '@material-ui/core/CardContent'
+import CardMedia from '@material-ui/core/CardMedia'
+import Button from '@material-ui/core/Button'
+import Typography from '@material-ui/core/Typography'
+
+const styles = {
+ card: {
+ // maxWidth: 345
+ }
+}
+
+function AlumniCard (props) {
+ const { classes, profileName, imageObj, content } = props
+ const decodeHTML = str =>
+ str.replace(/(\d+);/g, (_, p1) => String.fromCharCode(p1))
+ return (
+
+
+ {imageObj && (
+
+ )}
+
+
+
+ {decodeHTML(profileName)}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+AlumniCard.propTypes = {
+ classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(AlumniCard)
diff --git a/pages/alumni-list.js b/pages/alumni-list.js
new file mode 100644
index 0000000..288e8b4
--- /dev/null
+++ b/pages/alumni-list.js
@@ -0,0 +1,111 @@
+import Grid from '@material-ui/core/Grid'
+import { withStyles } from '@material-ui/core/styles'
+import React, { Component } from 'react'
+import { compose, Query } from 'react-apollo'
+import AlumniCard from '../components/AlumniCard'
+import Layout from '../components/Layout'
+import withRoot from '../components/withRoot'
+import withData from '../lib/withData'
+
+import gql from 'graphql-tag'
+
+class FacultyList extends Component {
+ static async getInitialProps ({ query: { id, type } }) {
+ return { id, type }
+ }
+ render () {
+ const { classes } = this.props
+ const alumniQuery = gql`
+ {
+ alumniOutcomes(last: 100, where: { orderby: { field: SLUG } }) {
+ edges {
+ node {
+ title
+ slug
+ content
+ featuredImage {
+ sourceUrl
+ altText
+ mediaDetails {
+ sizes {
+ name
+ sourceUrl
+ }
+ }
+ }
+ displayNameField {
+ value
+ }
+ }
+ }
+ }
+ }
+ `
+ return (
+
+
+ {result => {
+ if (result.loading) {
+ return Loading
+ }
+ if (result.error) return {JSON.stringify(result.error)}
+
+ const { data } = result
+ const alumniData = data.alumniOutcomes.edges
+
+ return (
+
+ {alumniData.map(alumni => (
+
+
+
+ ))}
+
+ )
+ }}
+
+
+ )
+ }
+}
+
+const styles = theme => ({
+ gridItemFix: {
+ width: '100%',
+ margin: '0',
+ padding: '16px',
+ [theme.breakpoints.down('sm')]: {
+ padding: '8px'
+ }
+ },
+ contentContainer: {
+ width: '100%',
+ maxWidth: '70%',
+ margin: '0 auto',
+ [theme.breakpoints.down('md')]: {
+ maxWidth: '85%'
+ },
+ [theme.breakpoints.down('sm')]: {
+ maxWidth: '95%'
+ }
+ }
+})
+
+export default compose(withRoot, withData)(withStyles(styles)(FacultyList))
diff --git a/server.js b/server.js
index d0cec3e..ade9ee3 100644
--- a/server.js
+++ b/server.js
@@ -284,7 +284,7 @@ const translationObj = {
id: { default: 'counseling-services' }
},
'alumni-outcomes': {
- page: '/page',
+ page: '/alumni-list',
type: 'alumniOutcomes',
id: { default: 'alumni-outcomes' }
},