-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (137 loc) · 7.26 KB
/
index.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#000000">
<meta name="Description" content="Developed by: Chris Quinn, Site: Full Stack Developer Portfolio">
<!-- LINKS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="static/css/styles.css">
<link rel='icon' href="static/img/favicon.png" type="image/x-icon">
<title>Chris Quinn | Full Stack Developer</title>
</head>
<body>
<section id="hero-landing">
<div class="console-container center-align">
<div>
<span id="text" class="crt"></span><span id="console">_</span>
</div>
</div>
</section>
<nav>
<div class="nav-wrapper">
<a href="#hero-landing" class="brand-logo"><img src="static/img/cq-logo.png" alt="Chris Quinn"></a>
<a href="#" data-target="mobile-menu" class="right sidenav-trigger"><i class="fas fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#hero-landing" id="nav-home">Home</a></li>
<li><a href="#about" id="nav-about">About Me</a></li>
<li><a href="#projects" id="nav-projects">Projects</a></li>
<li><a href="#skills" id="nav-skills">Skills</a></li>
<li><a href="#contact" id="nav-contact">Contact</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-menu">
<img src="static/img/cq-logo.png" alt="CQ Logo">
<li class="sidenav-close crt"><a href="#hero-landing" id="sidenav-home">Home</a></li>
<li class="sidenav-close shadows"><a href="#about" id="sidenav-about">About Me</a></li>
<li class="sidenav-close shadows"><a href="#projects" id="sidenav-projects">Projects</a></li>
<li class="sidenav-close shadows"><a href="#skills" id="sidenav-skills">Skills</a></li>
<li class="sidenav-close shadows"><a href="#contact" id="sidenav-contact">Contact</a></li>
<div class="sidenav-footer">
<a href="https://github.com/10xOXR" target="_blank"><i class="fab fa-github-square shadows"></i></a>
<a href="https://www.linkedin.com/in/c-quinn/" target="_blank"><i class="fab fa-linkedin shadows"></i></a>
</div>
</ul>
<main>
<section id="about">
<div class="row">
<div class="col s12 m4 chris-avatar center-align">
<img src="static/img/cq-8bit.png" alt="Chris Quinn">
</div>
<div class="col s12 m8 about-text">
<h2 class="center-align">Who am I?</h2>
<ul>
<li>A massive geek</li>
<li>Forever curious about how things work and making them better</li>
<li>Happiest when working technical challenges through to creative solutions</li>
<li>Fascinated with technologies past, present, and on the bleeding-edge of what's possible</li>
<li>Expert at converting ordinary coffee into code</li>
</ul>
<br>
<p>I'm a Full Stack Developer that loves to find the best solution to any given task, often in ways
that aren't immediately obvious! Whatever the task, I write clean, efficient code that delivers
rock-solid reliability and a great user experience.
</p>
<p>Have a look at some of my recent work below, and the skills that I've learned along the way.</p>
</div>
</div>
</section>
<section id="projects">
<h2 id="projects-heading" class="center-align">Recent Projects</h2>
</section>
<section id="skills">
<h2 id="skill-heading" class="center-align">Coding Skills</h2>
<p>Here are some of the skills that I've picked up along the way. I'm always learning and trying out new
things!</p>
<div class="skill-tiles">
</div>
</section>
<section id="contact">
<h2 class="center-align">Let's do this!</h2>
<p class="center-align">If you're looking to collaborate on a project, turn your ideas into something
awesome, or discuss something more permanent, then fill in the form below and let's get the ball
rolling!
</p>
<div class="row">
<div class="col s12 m6 offset-m3">
<form id="form" action="form-to-email.php" method="POST" name="myemailform">
<!-- Name -->
<div class="input-field">
<label for="name">Name</label>
<input class="validate" type="text" name="name" required>
</div>
<!-- Email -->
<div class="input-field">
<label for="email">Email</label>
<input class="validate" type="email" name="email" required>
</div>
<!-- Subject -->
<div class="input-field">
<label for="subject">Subject</label>
<input class="validate" type="text" name="subject" required>
</div>
<!-- Message -->
<div class="input-field">
<label for="text-area">Message</label>
<textarea class="materialize-textarea validate" type="input-field" name="message"
required></textarea>
</div>
<!-- Submit -->
<input class="btn" id="submit" type="submit" value="Submit">
</form>
</div>
</div>
</section>
</main>
<footer class="page-footer">
<div id="copyright">
<p>© <span id="year"></span> Chris Quinn</p>
</div>
<div id="ext-links">
<a href="https://github.com/10xOXR" target="_blank"><i class="fab fa-github-square"></i></a>
<a href="https://www.linkedin.com/in/c-quinn/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</footer>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="static/js/scripts.js"></script>
<script src="static/js/skills.js"></script>
<script src="static/js/projects.js"></script>
</html>