Refactor: semantic JSX, fix nav/footer, cleanup global CSS

This commit is contained in:
Gregory Campbell
2026-06-03 21:42:34 -04:00
parent e617745772
commit d8fe355a07
32 changed files with 2004 additions and 511 deletions
+17 -20
View File
@@ -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
View File
@@ -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
View File
@@ -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:&nbsp;
<a href="mailto:gjcampbell777@gmail.com">gjcampbell777@gmail.com </a>
</h2>
<h2>Cell #:&nbsp;
<a href="tel:6477797951">(647)-779-7951</a>
</h2>
<h2>LinkedIn:&nbsp;
<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
View File
@@ -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
View File
@@ -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&nbsp;
<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
View File
@@ -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 &ndash; 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 &ndash; 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) &ndash; 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
View File
@@ -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>
);
};
+6 -14
View File
@@ -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
View File
@@ -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 {