Add contact section and favicon

plhosk · Jul 28, 2017 · 7b1e188 · 7b1e188
1 parent 548ae09
commit 7b1e188
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 2,165 deletions.
diff --git a/README.md b/README.md
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=6">
 
     <link href="https://fonts.googleapis.com/css?family=Roboto|Kanit" rel="stylesheet">
 

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,10 +1,10 @@
 {
   "short_name": "Portfolio",
-  "name": "Portfolio of Web Programming",
+  "name": "Paul Hoskinson's Web Programming Portfolio",
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
+      "sizes": "160x160",
       "type": "image/png"
     }
   ],

diff --git a/src/App.css b/src/App.css
@@ -57,3 +57,8 @@
     height: 10px;
   }
 } 
+
+.App-footer {
+  text-align: right;
+  font-size: 1em;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -52,15 +52,24 @@ const App = () => (
         <div className="App-title-divider" />
         <Introduction />
         <div className="App-title-divider" ref={(section) => { this.portfolio = section }} />
-        <SectionHeader text="Portfolio" color="#b2dbd5" />
+        <SectionHeader
+          text="Portfolio"
+          color="#b2dbd5"
+          handleClickTop={() => scrollToComponent(this.pagetop, scrollOptions)}
+        />
         <Projects />
         <div className="App-title-divider" ref={(section) => { this.contact = section }} />
-        <SectionHeader text="Contact" color="#b2dbd5" />
+        <SectionHeader
+          text="Contact"
+          color="#fe7a47"
+          handleClickTop={() => scrollToComponent(this.pagetop, scrollOptions)}
+        />
         <Contact />
       </Content>
 
-      <Footer>
-        2017 Paul Hoskinson
+      <Footer className="App-footer">
+        Site created in 2017 by Paul Hoskinson &nbsp;&nbsp;
+        <a href="https://github.com/plhosk/portfolio">GitHub</a>
       </Footer>
 
     </Layout>

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Contact.css b/src/Contact.css
@@ -1,7 +1,8 @@
-.Contact-outer-div {
-  border: 2px solid red;
-}
+ .Contact-outer-div {
+   margin-bottom: 30px;
+} 
 
-.Contact-header {
-  border: 2px solid blue;
-}
+.Contact-email {
+  font-size: 1.5em;
+  text-align: center;
+}
diff --git a/src/Contact.jsx b/src/Contact.jsx
@@ -2,10 +2,21 @@ import React from 'react'
 
 import './Contact.css'
 
+const abc = 'mai'
+const use = 'plhosk'
+const ser = '@gm'
+const tld = 'om'
+
 const Contact = () => (
   <div className="Contact-outer-div">
-    <div className="Contact-header">
-      Contact
+    <div className="Contact-email">
+      I can be reached by email at the following address: <a
+        className="Contact-email-link"
+        href={`${abc}lto:${use}${ser}ail.c${tld}`}
+        target="_blank"
+      >
+        {`${use}${ser}ail.c${tld}`}
+      </a>
     </div>
   </div>
 )

diff --git a/src/Introduction.jsx b/src/Introduction.jsx
@@ -11,7 +11,7 @@ const Introduction = () => (
         Full-stack Web Developer
       </div>
       <div className="Introduction-description">
-        Javascript . React . Node.js . HTML . CSS
+        Javascript . React . Node.js . UI/UX
       </div>
       <div className="Introduction-blurb">
         Hello, I&apos;m a web developer currently living in Victoria, BC.

diff --git a/src/SectionHeader.css b/src/SectionHeader.css
@@ -1,5 +1,7 @@
 .SectionHeader-main {
-  margin: 20px auto;
+  margin: 0 auto;
+  margin-top: 40px;
+  margin-bottom: 20px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center; 
@@ -15,7 +17,7 @@
 }
 
 .SectionHeader-background-color {
-  height: 10px;
+  height: 6px;
 }
 
 .SectionHeader-title {
@@ -27,5 +29,34 @@
   border-width: 5px;
   border-style: solid;
   border-radius: 40px;
-  margin: 0 -3px;
+  /* margin: 0 -3px; */
+  margin: 0; 
+}
+
+.SectionHeader-ph {
+  font-family: 'Kanit', sans-serif;
+  font-size: 2em;
+  line-height: 1.25em;  
+  height: 48px; 
+  margin: 10px;
+  background-color: #404040;
+  padding: 4px; 
+  /* border-radius: 8px; */
+  transition: all 0.2s ease;
+}
+
+.SectionHeader-ph:hover {
+  background-color: #777;
+}
+
+.SectionHeader-ph-p {
+  color: #92aac7;
+}
+
+.SectionHeader-ph-h {
+  color: #fdd475;
+}
+
+.SectionHeader-ph-arrow {
+  color: #b3de81;
 }
diff --git a/src/SectionHeader.jsx b/src/SectionHeader.jsx
@@ -16,19 +16,32 @@ const SectionHeader = (props) => {
 
   return (
     <div className="SectionHeader-main">
+      <HeaderLine />
       <HeaderLine />
       <div
         className="SectionHeader-title"
         style={{ borderColor: props.color }}
       >{props.text}</div>
       <HeaderLine />
+      <div
+        className="SectionHeader-ph"
+        onClick={props.handleClickTop}
+        role="button"
+        tabIndex={0}
+      >
+        <span className="SectionHeader-ph-p">p</span>
+        <span className="SectionHeader-ph-h">h</span>
+        <span className="SectionHeader-ph-arrow">&uarr;</span>
+      </div>
+      <HeaderLine />
     </div>
   )
 }
 
 SectionHeader.propTypes = {
   text: PropTypes.string.isRequired,
   color: PropTypes.string.isRequired,
+  handleClickTop: PropTypes.func.isRequired,
 }
 
 export default SectionHeader