Refactor: semantic JSX, fix nav/footer, cleanup global CSS
This commit is contained in:
+17
-20
@@ -1,22 +1,19 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export const NoMatch = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>404 ERROR</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>404 ERROR</h1>
|
||||
export const NoMatch = () => {
|
||||
useEffect(() => {
|
||||
document.title = '404 Error';
|
||||
}, []);
|
||||
|
||||
<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>
|
||||
)
|
||||
return (
|
||||
<main className="notfound-page">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
+17
-23
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import { Home } from './Home';
|
||||
import { Resume } from './Resume';
|
||||
@@ -10,27 +10,21 @@ 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 = () => (
|
||||
<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>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
+22
-38
@@ -1,41 +1,25 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export const Contact = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>Contact Info</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>How to Reach Me</h1>
|
||||
export const Contact = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'Contact Gregory Campbell';
|
||||
}, []);
|
||||
|
||||
<aside>Give me a shout!</aside>
|
||||
</header>
|
||||
return (
|
||||
<main className="contact-page">
|
||||
<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>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>
|
||||
);
|
||||
};
|
||||
|
||||
+26
-46
@@ -1,50 +1,30 @@
|
||||
import React from 'react'
|
||||
import Me from './assets/Me.jpeg'
|
||||
import React, { useEffect } from 'react';
|
||||
import Me from './assets/Me.jpeg';
|
||||
|
||||
export const Home = () => (
|
||||
<div>
|
||||
<head>
|
||||
<title>The Works of Gregory Campbell</title>
|
||||
</head>
|
||||
<body>
|
||||
export const Home = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'The Works of Gregory Campbell';
|
||||
}, []);
|
||||
|
||||
<h2>Welcome to the personal website of Gregory Campbell</h2>
|
||||
return (
|
||||
<main className="home-page">
|
||||
<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 resume page, feel free to give it a look!</li>
|
||||
</ul>
|
||||
|
||||
<p></p>
|
||||
|
||||
<ul>
|
||||
<li>The many projects that I've mosted in the projects 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={Me} alt="Portrait of Gregory Campbell" className="homeimage" />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+124
-236
@@ -1,236 +1,124 @@
|
||||
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, { useEffect } 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 = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'The Projects of Gregory Campbell';
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="projects-page">
|
||||
<header>
|
||||
<h1>My Projects</h1>
|
||||
<aside>Look at what I've created!</aside>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<p>This page contains the projects I've done in the past, present and future.</p>
|
||||
<p>
|
||||
If you want to see what I'm currently working on, you can see all my updates{' '}
|
||||
<a href="https://twitter.com/Gregory_Soup" target="_blank" rel="noreferrer noopener">here</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/python-state-machine" target="_blank" rel="noreferrer noopener">Python State Machine</a></h2>
|
||||
<p>
|
||||
Recently while going through Godot documentation I came across a tutorial for building your own state machine with Python.
|
||||
I continued working on that state machine to emulate a locked/unlocked device.
|
||||
<a href="https://github.com/gjcampbell777/python-state-machine" target="_blank" rel="noreferrer noopener">View the project</a>.
|
||||
</p>
|
||||
<img src={StateMachine} alt="Python state machine demo" />
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/python-photo-skin-detection" target="_blank" rel="noreferrer noopener">Python Skin Detection Algorithms</a></h2>
|
||||
<p>
|
||||
In an image processing course I replicated multiple skin detection algorithms in Python.
|
||||
I cleaned up the original assignment and made it compatible with Python 3.
|
||||
<a href="https://github.com/gjcampbell777/python-photo-skin-detection" target="_blank" rel="noreferrer noopener">View the project</a>.
|
||||
</p>
|
||||
<img src={Skin2} alt="Skin detection before" />
|
||||
<p>Before the algorithm.</p>
|
||||
<img src={HSV} alt="Skin detection after" />
|
||||
<p>After the HSV algorithm.</p>
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/euler-checking-algorithm" target="_blank" rel="noreferrer noopener">Euler Checking Algorithm</a></h2>
|
||||
<p>
|
||||
This C program checks whether a graph is Eulerian by reading a text file and analyzing graph structure.
|
||||
It repeats the process until end-of-file and reports whether the graph is Eulerian.
|
||||
<a href="https://github.com/gjcampbell777/euler-checking-algorithm" target="_blank" rel="noreferrer noopener">View the project</a>.
|
||||
</p>
|
||||
<img src={EulerExample} alt="Euler graph input example" />
|
||||
<p>Example of a graph from euler-graphs.txt.</p>
|
||||
<img src={EulerCycle} alt="Euler cycle output" />
|
||||
<p>Output from running the algorithm.</p>
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/fortran-hangman" target="_blank" rel="noreferrer noopener">Fortran Hangman</a></h2>
|
||||
<p>
|
||||
A legacy programming course project to update a Fortran 77 hangman game to Fortran 95 and improve the code.
|
||||
Use the executable or Makefile to run the game.
|
||||
</p>
|
||||
<img src={Hangman} alt="Fortran hangman game" />
|
||||
<p>A very quick hangman game.</p>
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/ada-knights-tour" target="_blank" rel="noreferrer noopener">Ada Knights Tour</a></h2>
|
||||
<p>
|
||||
A program that solves the knight's tour problem in Ada.
|
||||
It generates a solution for small boards and shows the move sequence.
|
||||
</p>
|
||||
<img src={KngihtsTour} alt="Knights tour output" />
|
||||
<p>Knights tour output for a 5x5 chessboard starting at position (1,1).</p>
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/cobol-text-analyzer" target="_blank" rel="noreferrer noopener">COBOL Text Analyzer</a></h2>
|
||||
<p>
|
||||
A modernized COBOL text analyzer updated from a legacy script.
|
||||
It analyzes fixed data and reports text statistics.
|
||||
</p>
|
||||
<img src={TextAnalyzer} alt="COBOL text analyzer output" />
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://github.com/gjcampbell777/legacy-algorithm-comparison" target="_blank" rel="noreferrer noopener">Legacy Code Algorithm Comparison</a></h2>
|
||||
<p>
|
||||
A comparison of C, Fortran, and Ada implementations of the KMP search algorithm.
|
||||
The project generates executables for each language to compare performance.
|
||||
</p>
|
||||
<img src={AlgorithmComparison} alt="Algorithm comparison charts" />
|
||||
</article>
|
||||
|
||||
<article className="project">
|
||||
<h2><a href="https://gregorysoup.itch.io" target="_blank" rel="noreferrer noopener">My Many Games</a></h2>
|
||||
<p>
|
||||
I have built a collection of games using Unity and Godot, including endless runners, turn-based combat puzzles, and game jam projects.
|
||||
</p>
|
||||
<img src={ShowingOff} alt="Presenting a game at a Toronto indie game dev meetup" />
|
||||
<img src={MJB} alt="Game project showcase" />
|
||||
<img src={WH} alt="Game project showcase" />
|
||||
<img src={SRS} alt="Game project showcase" />
|
||||
</article>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
+71
-93
@@ -1,103 +1,81 @@
|
||||
import React from 'react'
|
||||
import pdf from './assets/Gregory Campbell Resume.pdf'
|
||||
import pic from './assets/Resume.png'
|
||||
import React, { useEffect } from 'react';
|
||||
import pdf from './assets/Gregory Campbell Resume.pdf';
|
||||
import pic 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 = () => {
|
||||
useEffect(() => {
|
||||
document.title = 'The Resume of Gregory Campbell';
|
||||
}, []);
|
||||
|
||||
<aside>Check out everything I have accomplished in my career.</aside>
|
||||
</header>
|
||||
return (
|
||||
<main className="resume-page">
|
||||
<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={pic} alt="Resume preview" />
|
||||
</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>
|
||||
|
||||
+9
-11
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user