added images and contact component.

Author: knight-coder-llc

widgets/portfolio/package.json

@@ -4,6 +4,8 @@
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
+ "@material-ui/core": "^4.11.2",
+ "@material-ui/icons": "^4.11.2",
  "@types/react-router-dom": "^5.1.5",
  "bootstrap": "^4.5.2",
  "dotenv": "^8.2.0",

widgets/portfolio/src/components/Carousel/index.tsx

@@ -57,24 +57,24 @@ export class ProfileSlider extends React.Component<CarouselProps, {}> {
  <img className="mx-auto img-responsive" src="../../src/images/cookies.png" width={250} height={150}/>
  </div>
  <div className="mb-sm-3">
- <h3><a className="text-white" href="https://github.com/knight-coder-llc/AI-Vehicle-Calculator">AI Price Estimator</a></h3>
+ <h3><a className="text-white" href="https://github.com/knight-coder-llc/AI-Vehicle-Calculator">Price Estimator</a></h3>
  <img className="mx-auto rounded-circle img-responsive" src="../../src/images/ai-cars.png" width={150} height={150}/>
  </div>
  <div className="mb-sm-3">
  <h3><a className="text-white" href="https://github.com/knight-coder-llc/sms-spam-filter">SMS Spam Filter</a></h3>
- <img className="mx-auto img-responsive" src="../../src/images/cookies.png" width={250} height={150}/>
+ <img className="mx-auto img-responsive" src="../../src/images/open-email.png" width={160} height={150}/>
  </div>
  <div className="mb-sm-3">
  <h3><a className="text-white" href="https://github.com/knight-coder-llc/Meal_Planner">Meal Planner</a></h3>
- <img className="mx-auto img-responsive" src="../../src/images/cookies.png" width={250} height={150}/>
+ <img className="mx-auto img-responsive" src="../../src/images/porkchops.jpg" width={250} height={150}/>
  </div>
  <div className="mb-sm-3">
  <h3><a className="text-white" href="https://github.com/knight-coder-llc/my_pygame_projects">Deep Space</a></h3>
  <img className="mx-auto img-responsive" src="../../src/images/pygame_logo.gif" width={250} height={100}/>
  </div>
  <div className="mb-sm-3">
  <h3><a className="text-white" href="https://github.com/knight-coder-llc/knight-coder">Knight Coder Profile</a></h3>
- <img className="mx-auto img-responsive" src="../../src/images/cookies.png" width={250} height={150}/>
+ <img className="mx-auto img-responsive" src="../../src/images/logo_transparent.png" width={150} height={150}/>
  </div>
 
  </Slider>

widgets/portfolio/src/components/Contact/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {ContactProps} from './interface';
+import Button from '@material-ui/core/Button';
+import EmailIcon from '@material-ui/icons/Email';
+
+export class Contact extends React.Component<ContactProps, {}> {
+ render () {
+ return (
+ <div className="text-center mb-2 mt-4 ">
+ <Button variant="outlined" color="secondary"><EmailIcon color="secondary" fontSize="large" /> Contact</Button>
+ </div>
+ )
+ }
+}

widgets/portfolio/src/components/Contact/interface.tsx

@@ -0,0 +1,3 @@
+export interface ContactProps {
+ 
+}

widgets/portfolio/src/components/Home/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ProfileSlider } from '../Carousel';
 import { HomePageProps } from './interface';
+import { Contact } from '../Contact';
 import { ChatBot } from '../Chatbot';
 
 export class HomePage extends React.Component<HomePageProps, {}> {
@@ -20,6 +21,7 @@ export class HomePage extends React.Component<HomePageProps, {}> {
  </picture>
  <h2 className="text-center ">Brian Kilburn - Owner</h2>
  </div>
+ <Contact />
  <div className="mt-5">
  <div className="d-flex" id="background-anim">
  <div className="purple"></div>

widgets/portfolio/src/components/Layout/index.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { LayoutProps } from './interface';
 import { Header } from '../Header';
 import { Navigator } from '../Navigation';
+import { Contact } from '../Contact';
 import { Footer } from '../Navigation/footer';
 
 export class Layout extends React.Component<LayoutProps, {}> {
@@ -26,6 +27,7 @@ export class Layout extends React.Component<LayoutProps, {}> {
  </div>
  </div>
  </div>
+ {/* <Contact /> */}
  <Footer />
  </>
  )