1 files changed, 99 insertions, 0 deletions
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
new file mode 100644
index 000000000..6c48a8553
--- /dev/null
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -0,0 +1,99 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import {colors} from 'material-ui/styles';
+import {utils} from 'ts/utils/utils';
+import {Element as ScrollElement} from 'react-scroll';
+import {Styles, ProfileInfo} from 'ts/types';
+
+const IMAGE_DIMENSION = 149;
+const styles: Styles = {
+    subheader: {
+        textTransform: 'uppercase',
+        fontSize: 32,
+        margin: 0,
+    },
+    imageContainer: {
+        width: IMAGE_DIMENSION,
+        height: IMAGE_DIMENSION,
+        boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px',
+    },
+};
+
+interface ProfileProps {
+    colSize: number;
+    profileInfo: ProfileInfo;
+}
+
+export function Profile(props: ProfileProps) {
+    return (
+        <div
+            className={`lg-col md-col lg-col-${props.colSize} md-col-6`}
+        >
+            <div
+                style={{maxWidth: 300}}
+                className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"
+            >
+                <div
+                    className="circle overflow-hidden mx-auto"
+                    style={styles.imageContainer}
+                >
+                    <img
+                        width={IMAGE_DIMENSION}
+                        src={props.profileInfo.image}
+                    />
+                </div>
+                <div
+                    className="center"
+                    style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}}
+                >
+                    {props.profileInfo.name}
+                </div>
+                {!_.isUndefined(props.profileInfo.title) &&
+                    <div
+                        className="pt1 center"
+                        style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}}
+                    >
+                        {props.profileInfo.title.toUpperCase()}
+                    </div>
+                }
+                <div
+                    style={{minHeight: 60, lineHeight: 1.4}}
+                    className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"
+                >
+                    {props.profileInfo.description}
+                </div>
+                <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}>
+                    {renderSocialMediaIcons(props.profileInfo)}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function renderSocialMediaIcons(profileInfo: ProfileInfo) {
+    const icons = [
+        renderSocialMediaIcon('zmdi-github-box', profileInfo.github),
+        renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn),
+        renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter),
+    ];
+    return icons;
+}
+
+function renderSocialMediaIcon(iconName: string, url: string) {
+    if (_.isEmpty(url)) {
+        return null;
+    }
+
+    return (
+        <div key={url} className="pr1">
+            <a
+                href={url}
+                style={{color: 'inherit'}}
+                target="_blank"
+                className="text-decoration-none"
+            >
+                <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} />
+            </a>
+        </div>
+    );
+}