lay dashboard top section out

src/models/DevFull.ts

@@ -12,4 +12,84 @@ interface DevFull extends DevSummary {
   repos: Repo[];
 }
 
+/**
+ * sample DevFull for development and tests
+ */
+export const dummyDevFull: DevFull = {
+  id: '0',
+  name: 'John Doe',
+  picture:
+    'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
+  description: 'Developer at Microsoft',
+  location: 'Seattle, WA',
+  skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
+  links: {
+    web: '#',
+    instagram: 'http://insta.com',
+    facebook: '#',
+    linkedin: '#',
+    twitter: '#',
+    github: '#',
+  },
+  bio:
+    'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
+  experiences: [
+    {
+      employer: 'Microsoft',
+      from: new Date(2011, 10),
+      to: 'Current',
+      position: 'Senior Developer',
+      description:
+        'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
+    },
+    {
+      employer: 'Sun Microsystems',
+      from: new Date(2004, 10),
+      to: new Date(2010, 11),
+      position: 'System Admin',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
+    },
+  ],
+  educations: [
+    {
+      school: 'University of Washington',
+      from: new Date(1993, 9),
+      to: new Date(1999, 6),
+      degree: 'Master',
+      field: 'Computer Science',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
+    },
+  ],
+  repos: [
+    {
+      name: 'Repo #1',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
+      link: '#',
+      stars: 42,
+      watchers: 2,
+      forks: 4,
+    },
+    {
+      name: 'Repo #2',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
+      link: '#',
+      stars: 21,
+      watchers: 1,
+      forks: 2,
+    },
+    {
+      name: 'Repo #3',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
+      link: '#',
+      stars: 50,
+      watchers: 32,
+      forks: 12,
+    },
+  ],
+};
 export default DevFull;

src/pages/Dashboard.tsx

@@ -1,24 +1,23 @@
-import React from 'react';
+import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import Header from '../components/Header';
+import DevFull, {dummyDevFull as dev} from '../models/DevFull';
+import {faUserCircle, faGraduationCap} from '@fortawesome/free-solid-svg-icons';
+import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
 
-const Dashboard = () => {
+const Dashboard: FC<DevFull> = () => {
   return (
     <section className="container">
-      <h1 className="large text-primary">Dashboard</h1>
+      <Header title="Dashboard" lead={`Welcome ${dev.name}`} />
-      <p className="lead">
-        <i className="fa fa-user"></i> Welcome John
-      </p>
       <div className="dash-buttons">
         <a href="create-profile.html" className="btn btn-light">
-          {' '}
+          <FontAwesomeIcon icon={faUserCircle} /> Edit Profile
-          <i className="fa fa-user-circle text-primary"></i> Edit Profile
         </a>
         <a href="add-experience.html" className="btn btn-light">
-          {' '}
+          <FontAwesomeIcon icon={faBlackTie} /> Add Experience
-          <i className="fa fa-black-tie text-primary"></i> Add Experience
         </a>
         <a href="add-education.html" className="btn btn-light">
-          {' '}
+          <FontAwesomeIcon icon={faGraduationCap} /> Add Education
-          <i className="fa fa-graduation-cap text-primary"></i> Add Education
         </a>
       </div>
       <h2 className="my-2">Experience Credentials</h2>

src/pages/Profile.tsx

@@ -15,91 +15,13 @@ import {
   faEye,
   faCodeBranch,
 } from '@fortawesome/free-solid-svg-icons';
-import DevFull from '../models/DevFull';
+import DevFull, {dummyDevFull as dev} from '../models/DevFull';
 import Experience from '../models/Experience';
 import {parseDate} from '../types';
 import Education from '../models/Education';
 import Repo from '../models/Repo';
 
 const Profile: FC<DevFull> = () => {
-  const dev: DevFull = {
-    id: '0',
-    name: 'John Doe',
-    picture:
-      'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
-    description: 'Developer at Microsoft',
-    location: 'Seattle, WA',
-    skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
-    links: {
-      web: '#',
-      instagram: 'http://insta.com',
-      facebook: '#',
-      linkedin: '#',
-      twitter: '#',
-      github: '#',
-    },
-    bio:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis unde quae vero enim adipisci voluptas magni sapiente reprehenderit error minima.',
-    experiences: [
-      {
-        employer: 'Microsoft',
-        from: new Date(2011, 10),
-        to: 'Current',
-        position: 'Senior Developer',
-        description:
-          'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
-      },
-      {
-        employer: 'Sun Microsystems',
-        from: new Date(2004, 10),
-        to: new Date(2010, 11),
-        position: 'System Admin',
-        description:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
-      },
-    ],
-    educations: [
-      {
-        school: 'University of Washington',
-        from: new Date(1993, 9),
-        to: new Date(1999, 6),
-        degree: 'Master',
-        field: 'Computer Science',
-        description:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus at rem totam sed qui! Quas.',
-      },
-    ],
-    repos: [
-      {
-        name: 'Repo #1',
-        description:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
-        link: '#',
-        stars: 42,
-        watchers: 2,
-        forks: 4,
-      },
-      {
-        name: 'Repo #2',
-        description:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
-        link: '#',
-        stars: 21,
-        watchers: 1,
-        forks: 2,
-      },
-      {
-        name: 'Repo #3',
-        description:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit,deserunt.',
-        link: '#',
-        stars: 50,
-        watchers: 32,
-        forks: 12,
-      },
-    ],
-  };
-
   /** return the icon corresponding to the social name */
   const renderSocialIcon = (name: string): IconDefinition => {
     switch (name) {