Merge branch 'master' of https://github.com/gjcampbell777/personal_site
This commit is contained in:
+18
-20
@@ -1,22 +1,20 @@
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
|
||||
export const NoMatch = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>404 ERROR</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>404 ERROR</h1>
|
||||
export const NoMatch = () => {
|
||||
return (
|
||||
<main className="notfound-page">
|
||||
<Helmet>
|
||||
<title>404 Error</title>
|
||||
</Helmet>
|
||||
|
||||
<aside>Hey, you shouldn't be here!</aside>
|
||||
</header>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>Don't know how you got here but you should probably turn around and head back.</h2>
|
||||
|
||||
<p>There's nothing here!</p>
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
<header>
|
||||
<h1>404 ERROR</h1>
|
||||
<p>Hey, you shouldn't be here!</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Don't know how you got here, but you should probably head back.</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+20
-23
@@ -1,5 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import { Home } from './Home';
|
||||
import { Resume } from './Resume';
|
||||
import { Projects } from './Projects';
|
||||
@@ -10,27 +11,23 @@ import { NavigationBar } from './components/NavigationBar';
|
||||
import { Jumbotron } from './components/Jumbotron';
|
||||
import Footer from './components/Footer';
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Router>
|
||||
<NavigationBar />
|
||||
<Jumbotron />
|
||||
<Layout>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/Resume" component={Resume} />
|
||||
<Route path="/Projects" component={Projects} />
|
||||
<Route path="/Contact" component={Contact} />
|
||||
<Route component={NoMatch} />
|
||||
</Switch>
|
||||
</Layout>
|
||||
<Footer />
|
||||
</Router>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
const App = () => (
|
||||
<HelmetProvider>
|
||||
<Router>
|
||||
<NavigationBar />
|
||||
<Jumbotron />
|
||||
<Layout>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/Resume" component={Resume} />
|
||||
<Route path="/Projects" component={Projects} />
|
||||
<Route path="/Contact" component={Contact} />
|
||||
<Route component={NoMatch} />
|
||||
</Switch>
|
||||
</Layout>
|
||||
<Footer />
|
||||
</Router>
|
||||
</HelmetProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
+24
-42
@@ -1,45 +1,27 @@
|
||||
import React from 'react'
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
|
||||
export const Contact = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>Contact Info</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>How to Reach Me</h1>
|
||||
export const Contact = () => {
|
||||
return (
|
||||
<main className="contact-page">
|
||||
<Helmet>
|
||||
<title>Contact Gregory Campbell</title>
|
||||
<meta name="description" content="Contact details for Gregory Campbell." />
|
||||
</Helmet>
|
||||
|
||||
<aside>Give me a shout!</aside>
|
||||
</header>
|
||||
<header>
|
||||
<h1>How to Reach Me</h1>
|
||||
<p>Give me a shout!</p>
|
||||
</header>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>Contact Info:</h2>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>Email:
|
||||
<a href="mailto:gjcampbell777@gmail.com">gjcampbell777@gmail.com </a>
|
||||
</h2>
|
||||
|
||||
<h2>Cell #:
|
||||
<a href="tel:6477797951">(647)-779-7951</a>
|
||||
</h2>
|
||||
|
||||
<h2>Twitter:
|
||||
<a href="https://twitter.com/Gregory_Soup">@Gregory_Soup</a>
|
||||
</h2>
|
||||
|
||||
<h2>LinkedIn:
|
||||
<a href="https://www.linkedin.com/in/gregoryjcampbell/">Gregory J Campbell</a>
|
||||
</h2>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<hr />
|
||||
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
<section>
|
||||
<h2>Contact Info</h2>
|
||||
<ul className="contact-list">
|
||||
<li>Email: <a href="mailto:gjcampbell777@gmail.com">gjcampbell777@gmail.com</a></li>
|
||||
<li>Phone: <a href="tel:6477797951">(647) 779-7951</a></li>
|
||||
<li>LinkedIn: <a href="https://www.linkedin.com/in/gregoryjcampbell/" target="_blank" rel="noreferrer noopener">Gregory J Campbell</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+33
-46
@@ -1,50 +1,37 @@
|
||||
import React from 'react'
|
||||
import Me from './assets/Me.jpeg'
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import meImage from './assets/Me.jpeg';
|
||||
|
||||
export const Home = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>The Works of Gregory Campbell</title>
|
||||
</head>
|
||||
<body>
|
||||
export const Home = () => {
|
||||
return (
|
||||
<main className="home-page">
|
||||
<Helmet>
|
||||
<title>The Works of Gregory Campbell</title>
|
||||
<meta name="description" content="Personal website and portfolio of Gregory Campbell." />
|
||||
</Helmet>
|
||||
|
||||
<h2>Welcome to the personal website of Gregory Campbell</h2>
|
||||
<section>
|
||||
<h2>Welcome to the personal website of Gregory Campbell</h2>
|
||||
<p>I hope you enjoy everything it has to offer.</p>
|
||||
</section>
|
||||
|
||||
<p>I hope you enjoy everything it has to offer</p>
|
||||
<section>
|
||||
<h3>Finished projects viewable on this site</h3>
|
||||
<ul>
|
||||
<li>This website is clean, easy to read, written in React, and adapts well to mobile.</li>
|
||||
<li>I also added a HTML and downloadable PDF version of my resume on the Resume page.</li>
|
||||
<li>Check out the many projects on the Projects tab.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h3>Finished Projects Viewable on this site:</h3>
|
||||
|
||||
<p></p>
|
||||
|
||||
<ul>
|
||||
<li>This website. It might not seem like much but it's clean, easy to read, is written in reactjs and adapts quite well to mobile.</li>
|
||||
</ul>
|
||||
|
||||
<p></p>
|
||||
|
||||
<p></p>
|
||||
|
||||
<ul>
|
||||
<li>I also added a html and downloadable .pdf version of my resume in the <a href="https://gregoryjcampbell.com/Resume">Resume</a> page, feel free to give it a look!</li>
|
||||
</ul>
|
||||
|
||||
<p></p>
|
||||
|
||||
<ul>
|
||||
<li>The many projects that I've mosted in the <a href="https://gregoryjcampbell.com/Projects">Projects</a> tab, go check it out!</li>
|
||||
</ul>
|
||||
|
||||
<p></p>
|
||||
|
||||
<blockquote></blockquote>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={Me} alt="It's Me!" className="homeimage"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<hr />
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
<section>
|
||||
<img
|
||||
src={meImage}
|
||||
alt="Portrait of Gregory Campbell"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+153
-236
@@ -1,236 +1,153 @@
|
||||
import React from 'react'
|
||||
import ShowingOff from './assets/ShowingOff.jpg'
|
||||
import MJB from './assets/MJB.jpg'
|
||||
import GC from './assets/GunControl.png'
|
||||
import Palish from './assets/Palish.png'
|
||||
import SRS from './assets/SRS.png'
|
||||
import WH from './assets/W&H.png'
|
||||
import StateMachine from './assets/StateMachine.png'
|
||||
import Skin2 from './assets/skin2.png'
|
||||
import HSV from './assets/HSV.png'
|
||||
import EulerCycle from './assets/EulerCycle.png'
|
||||
import EulerExample from './assets/EulerExample.png'
|
||||
import Hangman from './assets/Hangman.png'
|
||||
import KngihtsTour from './assets/KnightsTour.png'
|
||||
import TextAnalyzer from './assets/TextAnalyzer.png'
|
||||
import AlgorithmComparison from './assets/AlgorithmComparison.png'
|
||||
|
||||
export const Projects = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>The Projects of Gregory Campbell</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>My Projects</h1>
|
||||
|
||||
<aside>Look at what I've created!</aside>
|
||||
</header>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>This page contains the projects I've done over the past, present and future.</h2>
|
||||
|
||||
<br/>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h4>If you want to see what I'm currently working on you can see all my updates
|
||||
<a href="https://twitter.com/Gregory_Soup">Here</a>
|
||||
</h4>
|
||||
|
||||
<hr/>
|
||||
<h3> <a href="https://github.com/gjcampbell777/python-state-machine">Python State Machine</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>Recently while going through Godot documentation I came across a tutorial for building your own state machine with Python.
|
||||
I've always been interested in making a stand alone state machine and state machines are a big part of game developement
|
||||
so I figured it would be a good idea for me to check it out. After I finished the tutorial I decided to continue working on
|
||||
and fleshing out this state machine used to emulate a locked/unlocked device.
|
||||
You can check out my code and mess around with the state machine yourself <a href="https://github.com/gjcampbell777/python-state-machine">Here</a>.
|
||||
</p>
|
||||
|
||||
<img src={StateMachine} alt="StateMachine"/>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/python-photo-skin-detection">Python Skin Detection Algorithms</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In an image processing course I took in university we were tasked with replicating multiple skin detection algorithms through a python script.
|
||||
I enjoyed working on that assignment and was fascinated by how well (or not so well) a program is able to detect things that we as humans can figure out easily.
|
||||
It's one of the few assignments I worked on in university that I can still remember quite well so I figured I'd find it wherever I had saved it
|
||||
and clean it up as well as make sure it can run with python3.
|
||||
You can check out my code and run your own photos through the script by checking out the repo <a href="https://github.com/gjcampbell777/python-photo-skin-detection">Here</a>.
|
||||
</p>
|
||||
|
||||
<img src={Skin2} alt="Before"/>
|
||||
|
||||
<p>Before going through the algorithm</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={HSV} alt="After"/>
|
||||
|
||||
<p>After going through the HSV algorithm</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/euler-checking-algorithm">Euler Checking Algorithm</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In a course I took in university we were tasked checking if a graph was Eulerian or not.
|
||||
Much like the Python Skin Detection assignment this was also an assignment I could still remember
|
||||
from those days and wanted to re-explore and improve upon.
|
||||
This C algorithm takes the text file euler-graphs.txt and runs through the input to determine if its contents contain a Euler graph.
|
||||
The algorithm checks the initial line of a graph to determine the length of the graph and
|
||||
uses that information to know how many lines it must go through to gather all the info of the graph.
|
||||
It will repeat this process until it reaches EOF.
|
||||
You can check out my code by checking out the repo <a href="https://github.com/gjcampbell777/euler-checking-algorithm">Here</a>.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={EulerExample} alt="EulerExample"/>
|
||||
|
||||
<p>Example of a graph from euler-graphs.txt</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={EulerCycle} alt="EulerCycle"/>
|
||||
|
||||
<p>Output from running the algorithm with euler-graphs.txt</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/fortran-hangman">Fortran Hangman</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In a legacy programming course I took in university we were tasked with updating a fortran77 hangman program to fortran95
|
||||
as well as improving upon the code itself.
|
||||
Much like some of the other projects above this was also an assignment I could still remember
|
||||
from those days and wanted to re-explore and improve upon.
|
||||
Run the executable to play a simple game of hangman.
|
||||
You can even use the makefile I added to generate an executable of the fortran77 version.
|
||||
You can check out my code for this project <a href="https://github.com/gjcampbell777/fortran-hangman">Here</a>.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={Hangman} alt="Hangman"/>
|
||||
<p>A very quick game of hangman</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/ada-knights-tour">Ada Kngihts Tour</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In a legacy programming course I took in university we were tasked with creating a program that could solve the knights tour problem using Ada.
|
||||
Much like some of the other projects above this was also an assignment I could still remember
|
||||
from those days and wanted to re-explore and improve upon.
|
||||
Run the executable and follow the prompts to have the program solve the problem for you.
|
||||
However you should try to not make the chessboard size bigger than 7 if you don't have time to spare.
|
||||
You can check out my code for this project <a href="https://github.com/gjcampbell777/ada-knights-tour">Here</a>.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={KngihtsTour} alt="KnightsTour"/>
|
||||
|
||||
<p>Knights tour output for a 5x5 chessboard starting at position (1,1)</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/cobol-text-analyzer">Cobol Text Analyzer</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In a legacy programming course I took in university we were tasked with improving upon a cobol script that
|
||||
was full of dated coding practices.
|
||||
Much like some of the other projects above this was also an assignment I could still remember
|
||||
from those days and wanted to re-explore and improve upon.
|
||||
Run the executable and tell it which textfile you wish to have analyzed to see the text stats.
|
||||
You can even use the makefile I added to generate an executable of the dated script.
|
||||
However the text file that script takes is hard coded so you will have to change some things around if you want to analyze different text with it.
|
||||
You can check out my code for this project <a href="https://github.com/gjcampbell777/cobol-text-analyzer">Here</a>.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={TextAnalyzer} alt="TextAnalyzer"/>
|
||||
|
||||
<p>Analyzing some text from Star Wars</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://github.com/gjcampbell777/legacy-algorithm-comparison">Legacy Code Algorithm Comparison</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>In a legacy programming course I took in university we were tasked with comparing the speeds of C, Fortran and Ada using the KMP search algorithm.
|
||||
Much like some of the other projects above this was also an assignment I could still remember
|
||||
from those days and wanted to re-explore and improve upon.
|
||||
Run the executable of your choice to see the speed of that coding language.
|
||||
Using the makefile I created generates executables for each programming language.
|
||||
You can check out my code for this project <a href="https://github.com/gjcampbell777/legacy-algorithm-comparison">Here</a>.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={AlgorithmComparison} alt="AlgorithmComparison"/>
|
||||
|
||||
<p>Seeing how quickly C, Fortran and Ada are all able to find "Q" in a block of text</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3> <a href="https://gregorysoup.itch.io">My Many Games</a> </h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>Over the course of the last decade I've made a handful of games on my own.
|
||||
I've always been interested in game developement and I use this as a way to experiment and
|
||||
create games I would like to play myself. The fact that I've made all these games on my own allows me
|
||||
to go at my own pace as well as learn every aspect there is to this type of development while still being able to put my own charm into each game I make.
|
||||
I've worked on a fast paced endless runner 3D platformer, a 2D turn based combat puzzle and many game jam games.
|
||||
I continue to explore and create new game ideas as they pop into my head, so be sure to be on the look out for what I make next.
|
||||
Any game I've worked on has either been created using Unity or Godot which both utilize their own proprietary coding languages.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={ShowingOff} alt="Presenting my game at a toronto indie game dev meet up"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={MJB} alt="MJB"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={WH} alt="WH"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={SRS} alt="SRS"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={Palish} alt="Palish"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<img src={GC} alt="GC"/>
|
||||
|
||||
<br/>
|
||||
|
||||
<hr />
|
||||
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import ProjectCard from './components/ProjectCard';
|
||||
|
||||
// Import all project images
|
||||
import StateMachine from './assets/StateMachine.png';
|
||||
import HSV from './assets/HSV.png';
|
||||
import skin2 from './assets/skin2.png';
|
||||
import EulerExample from './assets/EulerExample.png';
|
||||
import EulerCycle from './assets/EulerCycle.png';
|
||||
import Hangman from './assets/Hangman.png';
|
||||
import KnightsTour from './assets/KnightsTour.png';
|
||||
import TextAnalyzer from './assets/TextAnalyzer.png';
|
||||
import AlgorithmComparison from './assets/AlgorithmComparison.png';
|
||||
import ShowingOff from './assets/ShowingOff.jpg';
|
||||
import MJB from './assets/MJB.jpg';
|
||||
import GunControl from './assets/GunControl.png';
|
||||
import Palish from './assets/Palish.png';
|
||||
import WH from './assets/W&H.png';
|
||||
import SRS from './assets/SRS.png';
|
||||
|
||||
|
||||
// Map imgName to imported images
|
||||
const imageMap = {
|
||||
StateMachine,
|
||||
HSV,
|
||||
skin2,
|
||||
EulerExample,
|
||||
EulerCycle,
|
||||
Hangman,
|
||||
KnightsTour,
|
||||
TextAnalyzer,
|
||||
AlgorithmComparison,
|
||||
ShowingOff,
|
||||
MJB,
|
||||
GunControl,
|
||||
Palish,
|
||||
WH,
|
||||
SRS
|
||||
};
|
||||
|
||||
const projects = [
|
||||
{
|
||||
title: 'Python State Machine',
|
||||
link: 'https://github.com/gjcampbell777/python-state-machine',
|
||||
description: 'A Python state machine used to emulate a locked/unlocked device.',
|
||||
imgName: 'StateMachine',
|
||||
imgAlt: 'Python state machine demo'
|
||||
},
|
||||
{
|
||||
title: 'Python Skin Detection Algorithms',
|
||||
link: 'https://github.com/gjcampbell777/python-photo-skin-detection',
|
||||
description: 'Replicated multiple skin detection algorithms in Python and modernized them for Python 3.',
|
||||
imgName: 'HSV',
|
||||
imgAlt: 'Skin detection image after',
|
||||
},
|
||||
{
|
||||
imgName: 'skin2',
|
||||
imgAlt: 'Skin detection image before',
|
||||
},
|
||||
{
|
||||
title: 'Euler Checking Algorithm',
|
||||
link: 'https://github.com/gjcampbell777/euler-checking-algorithm',
|
||||
description: 'C program to check if graphs are Eulerian.',
|
||||
imgName: 'EulerExample',
|
||||
imgAlt: 'Euler example'
|
||||
},
|
||||
{
|
||||
imgName: 'EulerCycle',
|
||||
imgAlt: 'Euler cycle output',
|
||||
},
|
||||
{
|
||||
title: 'Fortran Hangman',
|
||||
link: 'https://github.com/gjcampbell777/fortran-hangman',
|
||||
description: 'Updated a Fortran 77 hangman game to Fortran 95 and improved the code.',
|
||||
imgName: 'Hangman',
|
||||
imgAlt: 'Hangman game'
|
||||
},
|
||||
{
|
||||
title: "Ada Knights Tour",
|
||||
link: 'https://github.com/gjcampbell777/ada-knights-tour',
|
||||
description: "Solves the knight's tour problem in Ada.",
|
||||
imgName: 'KnightsTour',
|
||||
imgAlt: 'Knights tour output'
|
||||
},
|
||||
{
|
||||
title: 'COBOL Text Analyzer',
|
||||
link: 'https://github.com/gjcampbell777/cobol-text-analyzer',
|
||||
description: 'Modernized COBOL text analyzer to report text statistics.',
|
||||
imgName: 'TextAnalyzer',
|
||||
imgAlt: 'Text analyzer output'
|
||||
},
|
||||
{
|
||||
title: 'Legacy Algorithm Comparison',
|
||||
link: 'https://github.com/gjcampbell777/legacy-algorithm-comparison',
|
||||
description: 'Compare KMP implementations across C, Fortran, and Ada.',
|
||||
imgName: 'AlgorithmComparison',
|
||||
imgAlt: 'Algorithm comparison charts'
|
||||
},
|
||||
{
|
||||
title: 'My Many Games',
|
||||
description: 'A selection of games made with Unity and Godot.',
|
||||
imgName: 'ShowingOff',
|
||||
imgAlt: 'Game showcase'
|
||||
},
|
||||
{
|
||||
imgName: 'MJB',
|
||||
imgAlt: 'Magical Jumping Bean'
|
||||
},
|
||||
{
|
||||
imgName: 'GunControl',
|
||||
imgAlt: 'Gun Control'
|
||||
},
|
||||
{
|
||||
imgName: 'Palish',
|
||||
imgAlt: 'Palish'
|
||||
},
|
||||
{
|
||||
imgName: 'WH',
|
||||
imgAlt: 'Wally And Harv Escape the Fireball and Brick Factory'
|
||||
},
|
||||
{
|
||||
imgName: 'SRS',
|
||||
imgAlt: 'Super Robo Squad'
|
||||
},
|
||||
];
|
||||
|
||||
export const Projects = () => {
|
||||
|
||||
return (
|
||||
<main className="projects-page">
|
||||
<Helmet>
|
||||
<title>The Projects of Gregory Campbell</title>
|
||||
<meta name="description" content="Collection of projects by Gregory Campbell." />
|
||||
</Helmet>
|
||||
<header>
|
||||
<h1>My Projects</h1>
|
||||
<aside>Look at what I've created!</aside>
|
||||
</header>
|
||||
|
||||
{projects.map((p) => (
|
||||
<ProjectCard
|
||||
key={p.title}
|
||||
title={p.title}
|
||||
description={p.description}
|
||||
imgSrc={imageMap[p.imgName]}
|
||||
imgAlt={p.imgAlt}
|
||||
link={p.link}
|
||||
/>
|
||||
))}
|
||||
</main>
|
||||
);
|
||||
};
|
||||
+78
-93
@@ -1,103 +1,88 @@
|
||||
import React from 'react'
|
||||
import pdf from './assets/Gregory Campbell Resume.pdf'
|
||||
import pic from './assets/Resume.png'
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import pdf from './assets/Gregory Campbell Resume.pdf';
|
||||
import resumeImage from './assets/Resume.png';
|
||||
|
||||
export const Resume = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>The Resume of Gregory Campbell</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>My Resume</h1>
|
||||
export const Resume = () => {
|
||||
return (
|
||||
<main className="resume-page">
|
||||
<Helmet>
|
||||
<title>The Resume of Gregory Campbell</title>
|
||||
<meta name="description" content="Resume and professional experience of Gregory Campbell." />
|
||||
</Helmet>
|
||||
|
||||
<aside>Check out everything I have accomplished in my career.</aside>
|
||||
</header>
|
||||
<header>
|
||||
<h1>My Resume</h1>
|
||||
<p>Check out everything I have accomplished in my career.</p>
|
||||
</header>
|
||||
|
||||
<br/>
|
||||
<section>
|
||||
<h2>Downloadable PDF</h2>
|
||||
<p>
|
||||
You can view and download a PDF version of my resume{' '}
|
||||
<a href={pdf} target="_blank" rel="noreferrer noopener">here</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h2>Downloadable PDF</h2>
|
||||
<section>
|
||||
<h2>Written Resume</h2>
|
||||
<img
|
||||
src={resumeImage}
|
||||
alt="Resume preview"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<p>You can view and download a .pdf verison of my resume <a href={pdf}>Here</a></p>
|
||||
<section>
|
||||
<h2>Gregory Campbell</h2>
|
||||
<p>
|
||||
<a href="tel:6477797951">(647) 779-7951</a> ·{' '}
|
||||
<a href="mailto:gjcampbell777@gmail.com">gjcampbell777@gmail.com</a>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<h3>Profile</h3>
|
||||
<p>Highly motivated and team-focused software developer with 4+ years of experience developing code and creating test environments and infrastructure.</p>
|
||||
|
||||
<h2><u>Resume</u></h2>
|
||||
<h3>Education</h3>
|
||||
<p>
|
||||
<strong>Bachelor of Computing, Computer Science (Co-op)</strong><br />
|
||||
<em>University of Guelph – Guelph, Ontario</em><br />
|
||||
Completed April 2017
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<h3>Work Experience</h3>
|
||||
<article>
|
||||
<h4>Software Developer</h4>
|
||||
<p><em>Clear Blue Technologies – North York, Ontario</em> · Aug 2017 - Present</p>
|
||||
<ul>
|
||||
<li>Added features and fixed issues with various controllers using the functional programming language Elixir.</li>
|
||||
<li>Built automated black box testing devices and infrastructure with controller code, Raspberry Pi, and programmable power supplies.</li>
|
||||
<li>Developed automated black box front end testing across Chrome, Firefox, and Safari using TestCafe.</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<img src={pic} alt="Resume"/>
|
||||
<article>
|
||||
<h4>Software Test Specialist</h4>
|
||||
<p><em>IBM (AppScan Source team) – Markham, Ontario</em> · Jun 2014 - Aug 2016</p>
|
||||
<ul>
|
||||
<li>Created a test tool in HTML and JavaScript to help developers efficiently test builds using subsets of smoke tests.</li>
|
||||
<li>Presented security findings to stakeholders, architects, and developers.</li>
|
||||
<li>Integrated the Juliet test suite into AppScan Source test automation using Java.</li>
|
||||
<li>Developed, debugged, executed, and maintained Bash testing scripts.</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2><u>Written Resume</u></h2>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>Gregory Campbell</h2>
|
||||
|
||||
<p align="right">
|
||||
<a href="tel:6477797951">(647)-779-7951</a><br />
|
||||
<b><a href="mailto:gjcampbell777@gmail.com">gjcampbell777@gmail.com </a></b>
|
||||
</p>
|
||||
|
||||
<h3><u>Profile:</u></h3>
|
||||
|
||||
<p>Highly motivated and team-focused software developer with 4+ years of experience developing code and creating test environments and infrastructure.</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3><u>Education:</u></h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<p><b>Bachelor of Computing, Computer Science (Co-op)</b><br />
|
||||
<i>University of Guelph – Guelph, Ontario</i> <span>Completed April 2017 </span></p>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3><u>Work Experience</u></h3>
|
||||
|
||||
<p><b>Software Developer,</b><br />
|
||||
<i>Clear Blue Technologies – North York, Ontario</i> <span>Aug 2017 - Present </span></p>
|
||||
|
||||
<ul>
|
||||
<li>Adding features and fixing issues with various controllers using the functional programming language Elixir.</li>
|
||||
<li>Built multiple varieties of automated black box testing devices and accompanying infrastructure with the controller, a raspberry pi, a programmable power supply and elixir code from scratch.</li>
|
||||
<li>Developed automated black box front end testing infrastructure of the company web service across Chrome, Firefox and Safari using the node.js automation tool "Testcafe".</li>
|
||||
</ul>
|
||||
|
||||
<p><b>Software Test Specialist,</b><br />
|
||||
<i>IBM (Appscan Source team) – Markham, Ontario</i> <span>Jun 2014 - Aug 2016 </span></p>
|
||||
|
||||
<ul>
|
||||
<li>Created a test tool in HTML and Javascript with API usage for developers to more efficiently test builds using subsets of smoke tests.</li>
|
||||
<li>Multiple presentations to stakeholders, architects and developers on security vulnerabilities, demoed security programs. </li>
|
||||
<li>Integrated Juliet test suite into the Appscan Source test automation system using Java.</li>
|
||||
<li>Developed, debugged, executed and maintained bash testing scripts.</li>
|
||||
</ul>
|
||||
|
||||
<br/>
|
||||
|
||||
<h3><u>Technical Skills:</u></h3>
|
||||
|
||||
<ul>
|
||||
<li>Programming Languages: Elixir, C, C#, Java, Python, Fortran, Ada, Cobol</li>
|
||||
<li>Web Design and Coding: HTML, Javascript, ReactJs, CSS, Node.js, JQuery</li>
|
||||
<li>Software Environments: Windows, Mac, Linux, Unity, Godot, VirtualBox, Terminal/Console, Docker</li>
|
||||
<li>Various automation tools such as Bash, Testcafe, ExUnit, Jenkins, Gitlab CI and Python scripting</li>
|
||||
<li>Knowledge and experience with computer security, security vulnerabilities and security testing</li>
|
||||
<li>Well versed in application design, development and testing within an agile development cycle</li>
|
||||
<li>Expertise using SVN such as Github, Gitlab and Bitbucket within team and solo projects</li>
|
||||
</ul>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<blockquote></blockquote>
|
||||
|
||||
<br/>
|
||||
|
||||
<hr />
|
||||
</body>
|
||||
</div>
|
||||
)
|
||||
<h3>Technical Skills</h3>
|
||||
<ul>
|
||||
<li>Programming Languages: Elixir, C, C#, Java, Python, Fortran, Ada, Cobol</li>
|
||||
<li>Web Design and Coding: HTML, JavaScript, ReactJS, CSS, Node.js, jQuery</li>
|
||||
<li>Software Environments: Windows, Mac, Linux, Unity, Godot, VirtualBox, Docker</li>
|
||||
<li>Automation tools: Bash, TestCafe, ExUnit, Jenkins, GitLab CI, Python scripting</li>
|
||||
<li>Experience with security testing, vulnerabilities, and application design in agile environments</li>
|
||||
<li>Version control: GitHub, GitLab, Bitbucket</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+16
-30
@@ -4,36 +4,22 @@ import linkedin from "./../assets/LI-Logo.png";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<nav className="footer">
|
||||
<div className="footer-links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/gjcampbell777">
|
||||
<img
|
||||
src={github}
|
||||
alt="Github Logo"
|
||||
height="auto"
|
||||
width="100%"
|
||||
style={{ maxWidth: "80px" }}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/gregoryjcampbell/">
|
||||
<img
|
||||
src={linkedin}
|
||||
alt="LinkedIn Logo"
|
||||
height="auto"
|
||||
width="100%"
|
||||
style={{ maxWidth: "115px" }}
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
<footer className="footer">
|
||||
<div className="footer-links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/gjcampbell777" target="_blank" rel="noreferrer noopener">
|
||||
<img src={github} alt="GitHub profile" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/gregoryjcampbell/" target="_blank" rel="noreferrer noopener">
|
||||
<img src={linkedin} alt="LinkedIn profile" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -20,30 +20,22 @@ const Styles = styled.div`
|
||||
|
||||
export const NavigationBar = () => (
|
||||
<Styles>
|
||||
<Navbar expand="lg" color='light-blue lighten-4'>
|
||||
<Navbar expand="lg" bg="light" variant="light">
|
||||
<Navbar.Brand as={Link} to="/">GC</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav classname="navbar-link">
|
||||
<Nav className="navbar-link">
|
||||
<Nav.Item>
|
||||
<Nav.Link as={Link} to="/">
|
||||
<Link to="/">Home</Link>
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/">Home</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link as={Link} to="/Resume">
|
||||
<Link to="/Resume">Resume</Link>
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Resume">Resume</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link as={Link} to="/Projects">
|
||||
<Link to="/Projects">Projects</Link>
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Projects">Projects</Nav.Link>
|
||||
</Nav.Item>
|
||||
<Nav.Item>
|
||||
<Nav.Link as={Link} to="/Contact">
|
||||
<Link to="/Contact">Contact</Link>
|
||||
</Nav.Link>
|
||||
<Nav.Link as={Link} to="/Contact">Contact</Nav.Link>
|
||||
</Nav.Item>
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
export const ProjectCard = ({ title, description, imgSrc, imgAlt, link, children }) => {
|
||||
|
||||
return (
|
||||
<article className="project-card">
|
||||
<h3>{link ? <a href={link} target="_blank" rel="noreferrer noopener">{title}</a> : title}</h3>
|
||||
<p>{description}</p>
|
||||
{imgSrc && (
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt={imgAlt || title}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
+20
-15
@@ -12,32 +12,30 @@ code {
|
||||
monospace;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a{
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #219837
|
||||
color: #219837;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.homeimage{
|
||||
.homeimage {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
@@ -58,10 +56,9 @@ img {
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 1rem 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.footer-links ul {
|
||||
@@ -83,4 +80,12 @@ img {
|
||||
|
||||
.footer-links li:hover {
|
||||
background-color: #b2b2b2;
|
||||
}
|
||||
|
||||
/* Constrain footer images so they don't become massive */
|
||||
.footer-links img {
|
||||
display: inline-block;
|
||||
max-height: 120px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
Reference in New Issue
Block a user