Merge pull request #3 from kjew2/contact-socials

cleanup and icons
kjew2 · Apr 30, 2021 · 94c5eee · 94c5eee
2 parents 0a38282 + aadd58f
commit 94c5eee
Show file tree

Hide file tree

Showing 19 changed files with 111 additions and 88 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-49D30NWPKQ"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+      gtag('config', 'G-49D30NWPKQ');
+    </script>
+    <title>Kyle Jew</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/src/App.js b/src/App.js
@@ -12,11 +12,6 @@ import ReactGA from 'react-ga';
 //ga
 
 function App() {
-  useEffect(() => {
-    ReactGA.initialize('UA-195675661-1');
-    ReactGA.pageview(window.location.pathname + window.location.search);
-    console.log(window.location.pathname + window.location.search)
-  }, [])
   return (
     <div className="App">
       <Router>

diff --git a/src/components/HomeSection.js b/src/components/HomeSection.js
@@ -1,25 +1,29 @@
 import React from 'react'
 import {Button} from './Button'
 import {Link} from 'react-router-dom'
+import Socials from './Socials'
 import './HomeSection.css'
 
 function HomeSection({
     lightBg, topLine, lightText, lightTextDesc, headline, description, 
-    buttonLabel, src, alt, imgStart
+    buttonLabel, src, alt, imgStart, linkedin, github
 }) {
+    console.log("hi")
+    console.log(topLine)
     return (
         <div>
             <div className={lightBg ? 'home' : 'home darkBg'}>
                 <div className="Containter">
                     <div className="row home-row" style={{display: 'flex', flexDirection: imgStart == 'start' ? 'row-reverse' : 'row'}}>
+
                         <div className="col">
                             <div className="home-text-wrapper">
                                 <div className="top-line">{topLine}</div>
                                 <h1 className={lightText ? 'heading' : 'heading dark'}>{headline}</h1>
                                 <p className={lightTextDesc ? 'home-subtitle' : 'home-subtitle dark'}>{description}</p>
-                                <Link to="/sign-up">
+                                <form method="post" action="mailto:[email protected]">
                                     <Button buttonSize='btn--wide' buttonColor='blue'>{buttonLabel}</Button>
-                                </Link>
+                                </form>
                             </div>
                         </div>
                         <div className="col">
@@ -28,8 +32,12 @@ function HomeSection({
                             </div>
                         </div>
                     </div>
+
                 </div>
             </div>
+            <div className="socials">
+                <Socials linkedin={linkedin} github={github}/>
+            </div>
         </div>
     )
 }

diff --git a/src/components/Socials.js b/src/components/Socials.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import {Button} from './Button'
+import {Link} from 'react-router-dom'
+import {AiFillLinkedin, AiFillGithub} from 'react-icons/ai'
+function Socials({linkedin, github}) {
+    return (
+        <div>
+            <Link to={linkedin} target="_blank" rel="noopener noreferrer" >
+                <AiFillLinkedin/>
+            </Link>
+            <Link to={github} target="_blank" rel="noopener noreferrer" >
+                <AiFillGithub/>
+            </Link>
+        </div>
+
+    )
+}
+
+export default Socials
diff --git a/src/components/pages/HomePage/Data.js b/src/components/pages/HomePage/Data.js
@@ -8,6 +8,8 @@ export const homeObjOne = {
     buttonLabel: 'Contact',
     imgStart: '',
     src: 'images/zo.png',
-    alt: 'Credit Card'
+    alt: 'Credit Card',
+    linkedin: "//linkedin.com/in/kylejew/",
+    github: "//github.com/kjew2/"
 
 }
diff --git a/src/index.js b/src/index.js
@@ -3,36 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import {getCLS, getFID, getLCP} from 'web-vitals';
-import {Helmet} from 'react-helmet'
-const injectGA = () => {
-  if (typeof window == 'undefined') {
-    return;
-  }
 
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    window.dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'G-49D30NWPKQ');
-};
 
 
 
 ReactDOM.render(
 
 
   <React.StrictMode>
-    <Helmet>
-      <title>Kyle Jew</title>
-      <script 
-        async 
-        src="https://www.googletagmanager.com/gtag/js?id=G-49D30NWPKQ"/>
-      <script>{injectGA()}</script>
-    </Helmet>
-
     <App />
   </React.StrictMode>,
   document.getElementById('root')