-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork.html
203 lines (165 loc) · 6.67 KB
/
work.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119898732-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-119898732-1');
</script>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>TP - Work</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
</head>
<body>
<header class="main-header">
<div class="container grid">
<nav class="main-nav" role="navigation">
<a href="/index">
<div class="logo">TP</div>
</a>
<ul>
<li>
<a href="/index">Home</a>
</li>
<li>
<a href="/work" class="current">Work</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
<div class="nav-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>
<section class="work">
<h1 class="page_title"> Work</h1>
<div class="grid-imgs">
<div class="grid-item">
<a class="text-link" href="https://toms-flower-power.herokuapp.com/index.html">
<img class="grid-image" src="img/flower.jpg">
<h2 class="work-title">Flower Home Page Prototype</h2>
</a>
<p class="post-content">
A responsive home page for a flower website.
</p>
<p class="post-content">
Here I challenged myself in implementing BEM into my web development. I found it's extremely useful in
creating code that's neat and organised, and very readable at a glance too.
</p>
</div>
<div class="grid-item">
<a class="text-link" href="https://codepen.io/freeptom/full/LJNBrr/">
<img class="grid-image" src="img/tesla.PNG">
<h2 class="work-title">Tesla Product Landing Page</h2>
</a>
<p class="post-content">
A product landing page built towards earning the 'Responsive Web Design' certification from FreeCodeCamp.
</p>
<p class="post-content">
Flexbox and CSS Grid were implemented to ensure the site could respond to any device size, stacking items when
necessary.
</p>
</div>
<div class="grid-item">
<a class="text-link" href="https://radiant-citadel-71798.herokuapp.com/">
<img class="grid-image" src="img/yelpCamp.PNG">
<h2 class="work-title">YelpCamp - Bootcamp Project </h2>
</a>
<p class="post-content">
This project was built during my enrollment on Colt Steele's 'Web Developer Bootcamp'.
</p>
<p class="post-content">
The technologies I learnt during this course were <strong>Node</strong>; server side framework
<strong>Express</strong>;
NoSQL database program <strong>MongoDB</strong>; ODM library <strong>Mongoose</strong>;
<strong>RESTful</strong> Routing; Authentication and CRUD functions.
</p>
</div>
<div class="grid-item">
<a class="text-link" href="galleryIndex.html">
<img class="grid-image" src="img/jsGallery.PNG">
<h2 class="work-title">jsGallery </h2>
</a>
<p class="post-content">
A Javascript slider gallery from scratch.
Creating it myself without relying on bloated frameworks means it is able to load quicker and can be
customised easily.</p>
</div>
<div class="grid-item">
<img class="grid-image" src="img/Uno&Una.png">
<h2 class="work-title">Uno and Una - Concept </h2>
<p class="post-content">
Mock-up home page for a clothing brand concept, "UNO & UNA". I wanted to test my wireframing and design
skills,
focusing on creating a brand style and logo. Using the diamond shape throughout the design helps to pull
together the brand identity.
</div>
<div class="grid-item">
<a class="text-link" href="http://stuclimbing.herokuapp.com/">
<img class="grid-image" src="/img/stu-climbing.png">
<h2 class="work-title"> Stuart Wetherell Climbing (Collaboration) </h2>
</a>
<p class="post-content">
This is a website currently in development, built by myself and a friend for a climbing instructor.
<br>
<br> This website was also created as a surprise. Putting newly aquired skills into practice, from an Agile
meetup, we
delivered a MVP. We purposefully didn't put too much time into the design. We took this approach as we knew
the potential
for the design to develop, in line with the needs of our 'client'.
<br>
<br> After showing our client what we had so far, he supplied lots of feedback which we are now in the process
of implementing.
</div>
<div class="grid-item">
<a class="text-link" href="todo.html">
<img class="grid-image" src="/img/todo.png">
<h2 class="work-title">Todo List </h2>
</a>
<p class="post-content">
A jQuery based todo list, part of the work from undertaking 'The Web Developer Bootcamp' course.
</div>
<div class="grid-item">
<a class="text-link" href="https://www.rtadventures.co.uk">
<img class="grid-image" src="/img/randt.png">
<h2 class="work-title">R&T Website </h2>
</a>
<p class="post-content">
A website I created as a surprise for my girlfriend, Bekah, to celebrate the adventures we'd been on. It was
my re-entry
into coding after universty.
<br>
<br> I used the W3.CSS framework as it was lightweight.
<br>
<br> While it was effective in getting the website built quickly, it made me realise I wanted to re-learn
HTML, CSS and
Javascript by hand-coding websites.
</div>
</div>
</section>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
</script>
</html>