-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex2.html
128 lines (127 loc) · 10.1 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Garratt Campton's Personal Portfolio of Digital Work.">
<meta name="keywords" content="HTML, CSS, JAVASCRIPT, XML, SQL, C#, C++, Java, Garratt Campton, Software Developer, NodeJS, React, WPF, Xamarin, Blazor Server, MongoDB, Pixel Art">
<meta name="author" content="Garratt Campton">
<title>Garratt's Portfolio</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe&family=Waiting+for+the+Sunrise&family=Montserrat">
</head>
<body>
<content>
<div class="hero-image">
<div class="hero-text">
<h1>I'm Garratt,</h1>
<h2>A Full-Stack Developer and Software Engineer.</h2>
</div>
</div>
<!-- TODO: ADD PAGES FOR PIXEL ART + CODING PROJECTS -->
<!-- FIXME: FLEX CONTAINER HERE FOR PROFILE AND SKILL ROWS -->
<!-- FIXME: HOBBIES PAGE-->
<!-- TODO: ADD CERTIFICATES FOR COMPLETED TRAINING -->
<!-- TODO: ADD AWARDS / TROPHIES -->
<!-- TODO: CODE SMALL UNIQUE JAVASCRIPT BROWSER GAME OR ANIMATION TO SHOW SKILLS -->
<!-- FIXME: CONTACT BUTTON (JAVASCRIPT TO HIDE EMAIL) / STYLE BUTTON-->
<div class="middle-container">
<div class="profile">
<img class="skill-img" src="images/sidebar-profile.png" alt="Garratt Campton Profile Picture">
<h2>Hello.</h2>
<p>I'm a self taught programmer. My passion for coding started when my father bought me a Commodore64 at age 5.
For the past 10 years I've been doing commercial locksmithing.</p>
<p>In my spare time I create C# Unity games and other projects. I also run a SEO/Website design business for a handful of clients.</p>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="skills">
<h1>My Skills.</h1>
<div class="skill-row">
<img class="skill-img" src="images/programming.png" alt="programming icon">
<h3>Languages Used</h3>
<p>HTML, CSS, Javascript, XML, SQL, C, C#, C++, Java, PHP, NoSQL and many others.</p>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="skill-row">
<img class="skill-img2" src="images/briefcase.png" alt="briefcase icon">
<h3>Work Experience</h3>
<table class="work-table">
<tr>
<td class="table-date">2006-2010:</td>
<td>Yellow Cabs - Driver</td>
</tr>
<tr>
<td class="table-date">2010-Current:</td>
<td>That SEO Guy - Owner - Web Design/Digital Marketing</td>
</tr>
<tr>
<td class="table-date">2012-2021:</td>
<td>JMA Hardware - Locksmith/Warehouse Storeman</td>
</tr>
<tr>
<td class="table-date">2021-Current:</td>
<td>Lang's Building Supplies - Locksmith/Retail Trade Assistant</td>
</tr>
</table>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="skill-row">
<img class="skill-img" src="images/game-development.png" alt="joystick controller icon">
<h3>Game Design and Pixel Art</h3>
<table>
<tr>
<td class="table-date">Github Link: </td>
<td> https://github.com/gcampton</td>
</tr>
<tr>
<td class="table-date">Deviart Link: </td>
<td></td>
</tr>
</table>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="skill-row">
<img class="skill-img2" src="images/book.png" alt="book icon">
<h3>Books and Learning</h3>
<ul>
<li>The Web Developer Bootcamp 2022 - <em><a href="https://www.udemy.com/course/the-web-developer-bootcamp/" target="_blank">Colt Steele</a></em></li>
<li>C# Master Course - <em><a href="https://www.iamtimcorey.com/" target="_blank">Tim Corey</a></em></li>
<li>C# Player's Guide 5th ed. - <em><a href="https://csharpplayersguide.com/" target="_blank" >RB Whitaker</a></em></li>
<li>The Linux Command Line - <em><a href="https://www.udemy.com/course/the-linux-command-line-bootcamp/" target="_blank">Colt Steele</a></em></li>
<li>Certificate of Software Development - <a href="https://tafeqld.edu.au/" target="_blank">Ithaca Tafe 2002</a></li>
</ul>
</div>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="contact-me">
<h2>Get In Touch</h2>
<p>Please reach out and I will get back to you ASAP.</p>
<p><br>
<button class="btn button is-info">CONTACT GAZ</button>
<br></p>
</div>
</div>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg height="24" width="24" fill="#3d3d3d" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-160c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<div class="footer">
<a class="footer-link" href="https://www.linkedin.com/in/garrattcamptonseo/">Linkedin</a>
<a class="footer-link" href="https://github.com/gcampton">Github</a>
<p class="copyright">© 2002-2022 Garratt Campton.</p>
</div>
</content>
</body>
</html>