codeariv · davemelk100 · May 15, 2023 · May 15, 2023 · May 22, 2023 · May 22, 2023
diff --git a/OpenSSH_8.1p1, b/OpenSSH_8.1p1,
diff --git a/debug1: b/debug1:
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,12 @@
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
     "history": "^5.1.0",
+    "material-icons-react": "^1.0.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "3.3.1"
+    "react-router-dom": "^6.11.2",
+    "react-scripts": "3.3.1",
+    "react-scroll": "^1.8.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,31 @@
 <!DOCTYPE html>
 <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="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-    />
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="David Melkonian" content="portfolio" />
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Rokkitt:wght@100;200;400;700&display=swap" rel="stylesheet">
+  <title>David Melkonian - Application Development Professional</title>
+</head>
+
+<body>
+  <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
+    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/src/components/About.jsx b/src/components/About.jsx
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -1,30 +1,42 @@
 import React from "react";
+import recordtwo from './stripes.png';
+import Person from './Person'
 
 function Contact() {
   return (
-    <div className="contact">
-      <div class="container">
-        <div class="row align-items-center my-5">
-          <div class="col-lg-7">
-            <img
-              class="img-fluid rounded mb-4 mb-lg-0"
-              src="http://placehold.it/900x400"
-              alt=""
-            />
-          </div>
-          <div class="col-lg-5">
-            <h1 class="font-weight-light">Contact</h1>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting
-              industry. Lorem Ipsum has been the industry's standard dummy text
-              ever since the 1500s, when an unknown printer took a galley of
-              type and scrambled it to make a type specimen book.
-            </p>
+    <div className="home">
+      <img className="img-art-two position-fixed" src={recordtwo} alt="artwork" />
+      <div className="container">
+      <div className="row my-3">
+          <div className="col-lg-12 mx-0 p-4 shadow-lg rounded">
+            <div className="row">
+              <div className="col-lg-12 mb-0">
+                <Person />
+                <h2 className="col-lg-12 p-0 mb-0 page-title">Contact</h2>
+              </div>
+            </div>
+            <div className="row my-2 mx-1 sample-row d-flex flex-row">
+              <div className="col-lg-12 text-card mb-3">
+                <h3 className="mb-3">Contact me or check out my stuff at these places.</h3>
+              </div>
+              <div className="col-lg-12">
+                <div className="col-lg-3 p-0">
+                  <ul className="list-unstyled">
+                    <li><a href="mailto:[email protected]">Email</a></li>
+                    <li><a href="https://docs.google.com/document/d/1LMjz8iHKIL1Zfu2CixSMdlcUSVFAmXt3dYpaAJEGMs8/edit">Resume</a></li>
+                    <li><a href="https://www.linkedin.com/in/davemelk/">LinkedIn</a></li>
+                    <li><a href="https://dribbble.com/davemelk100">Dribble</a></li>
+                    <li><a href="https://davemelk.com">Portfolio</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
           </div>
         </div>
       </div>
     </div>
   );
 }
 
-export default Contact;
+export default Contact;
diff --git a/src/components/DataBind.jsx b/src/components/DataBind.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import recordtwo from './stripes.png';
+
+function DataBind () {
+  return (
+
+    <div className="home">
+      <img className="img-art-two" src={recordtwo} alt="vinyl artwork" />
+      <div className="container">
+        <div className="row my-5">
+          <div className="col-lg-12">
+            <div className="row">
+              <div className="col-lg-12 mb-3">
+                <small>person</small><br />
+                <h1 className="col-lg-12 p-0 mb-3">David Melkonian</h1>
+                <small>page</small><br />
+                <h2 className="col-lg-12 p-0 mb-3 page-title">Skills</h2>
+                <h3>Front End Development</h3>
+                <ul>
+                  <li>ReactJs / Angular / Vue / jQuery</li>
+                  <li>HTML / CSS / SCSS / Bootstrap / Razor</li>
+                  <li>Bootstrap / jQuery</li>
+                  <li>Wordpress / Umbraco / Magnolia</li>
+                </ul>
+
+                <h3>Front End Design</h3>
+                <ul>
+                  <li>Photoshop / Illustrator / Sketch </li>
+                  <li>Figma / Proto.io / Canva</li>
+                </ul>
+
+                <h3>User Experience</h3>
+                <ul>
+                  <li>UX Architecture / Design Systems / Content Architecture</li>
+                  <li>User testing / Designing for accessibility / </li>
+                </ul>
+
+                <h3>Package Management</h3>
+                <ul>
+                    <li>NPM</li>
+                    <li>Gulp</li>
+                    <li>Yarn</li>
+                    <li>NuGet</li>
+                    <li>Homebrew</li>
+                    <li>Yarn</li>
+                </ul>
+
+                <h3>Development Tooling</h3>
+                <ul>
+                  <li>Github / Bitbucket / Azure</li>
+                  <li>Visual Studio / Intellij / Notepad++ / Github Codespaces</li>
+                </ul>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DataBind;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -3,12 +3,12 @@ import React from "react";
 function Footer() {
   return (
     <div className="footer">
-      <footer class="py-5 bg-dark fixed-bottom">
-        <div class="container">
-          <p class="m-0 text-center text-white">
-            Copyright &copy; Your Website 2020
+
+      <footer className="py-2 fixed-bottom">
+      <p className="m-0 p-2">
+
+
           </p>
-        </div>
       </footer>
     </div>
   );

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -1,30 +1,64 @@
 import React from "react";
+import Person from './Person';
+import recordtwo from './stripes.png';
 
 function Home() {
   return (
     <div className="home">
-      <div class="container">
-        <div class="row align-items-center my-5">
-          <div class="col-lg-7">
-            <img
-              class="img-fluid rounded mb-4 mb-lg-0"
-              src="http://placehold.it/900x400"
-              alt=""
-            />
-          </div>
-          <div class="col-lg-5">
-            <h1 class="font-weight-light">Home page</h1>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting
-              industry. Lorem Ipsum has been the industry's standard dummy text
-              ever since the 1500s, when an unknown printer took a galley of
-              type and scrambled it to make a type specimen book.
-            </p>
+      <img className="img-art-two position-fixed" src={recordtwo} alt="artwork" />
+      <div className="container">
+        <div className="row my-3">
+          <div className="col-lg-12 mx-0 p-4 shadow-lg rounded">
+              <div className="row">
+                <div className="col-lg-12 mb-0">
+                  <Person />
+                  <h2 className="col-lg-12 p-0 mb-0 page-title">Home</h2>
+                </div>
+              </div>
+              <div className="row my-2 mx-1 sample-row d-flex flex-row">
+                <div className="col-lg-12 text-card">
+                  <h3 className="mb-0 p-0">
+                    About Me
+                  </h3>
+                  <p className="text-dark font-weight-normal">A summary of my experience</p>
+                </div>
+                <div className="col-lg-12 p-4">
+                  <p>
+                    My career has included enterprise software delivery with companies/initiatives such as HealthCare.gov,
+                    Blue Cross Blue Shield, United Healthcare, Meridian Health, Delta Dental of Michigan, Ford Motor
+                    Company, General Motors and more. In addition to my current role, my previous roles include delivery
+                    manager, technical lead, accessibility lead, user experience and user interface
+                    designer/developer/consultant and technical writer.
+                  </p>
+                  <p>I've been fortunate to work on many applications of all sizes. Some include the Delta
+                    Dental <a href='https://www.mysmilecoverage.com/delta/'>MySmileCoverage</a> site, Delta's
+                    Dental's <a href="https://www.memberportal.com/mp/delta/">Member Portal</a> Delta's SaaS
+                    product <a href='https://www.rooseveltsolutions.com/'>Roosevelt Solutions</a>, the <a href='https://www.healthcare.gov/'>HealthCare.gov</a> product,
+                    Blue Cross Blue Shield of Michigan's <a href='https://www.bcbsm.com/'>bcbsm.com</a>,
+                    and <a href='https://www.mibcn.com/'>mibcn.com</a> along with countless others.
+                  </p>            
+                  <p>
+                    I am well-versed in Agile software development, including Scrum and SAFe methodologies. I am a
+                    Certified Usability Analyst (CUA) by Human Factors International and have obtained Scrum Master
+                    certification. I work with product owners, executive leadership, vendors and management
+                    to ensure successful development and design to deliver world class software.
+                  </p>
+                  <p>I am an experienced front-end developer with experience using HTML/CSS/Javascript/Typescript including
+                    React, Angular, Bootstrap, Razor, and more. Creating pixel-perfect HTML and CSS from any design and
+                    creating responsive design frameworks by hand are a few of my strengths.</p>
+                  <p>
+                    I'm a User Experience and User Interface specialist with a CUA 
+                    from Human Factors International. I created
+                    graphic design systems and integrated them directly with front end code. I've created wireframes, graphic
+                    comps, design systems, working prototypes and fully coded POCs. I am fluent in Photoshop, Illustrator, Sketch and Figma.
+                    </p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
     </div>
   );
 }
 
-export default Home;
+export default Home;
diff --git a/src/components/Images.jsx b/src/components/Images.jsx
@@ -0,0 +1,8 @@
+
+function importAll(r) {
+  return r.keys().map(r);
+}
+
+const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
+
+export default images;