mclack.github.io/index.html at main · mclack/mclack.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en-GB">

<head>
	<title>Milo Clack Portfolio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<script src="https://kit.fontawesome.com/f1113e7579.js" crossorigin="anonymous"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Oswald:wght@500&family=Rubik:ital@1&display=swap" rel="stylesheet">

	<link rel="stylesheet" href="normalize.css" type="text/css" />
	<link rel="stylesheet" href="styles.css" type="text/css" />
	<script defer src="index.js"></script>
</head>

<body>

<!-- FIXED NAV BAR -->
<nav>
	<div class="button">
		<a href="index.html">HOME</a>
	</div>
	<div class="button">
		<a href="aboutMe.html">ABOUT ME</a>
	</div>
	<div class="button emailBtn">
		<a class="tooltip">MILOCLACK@GMAIL.COM<span class="tooltipText">Email Copied!</span></a>
	</div>
</nav>

<main class="intro">
	<h2>Hi, I'm Milo</h2>
	<p>
		I'm a full-stack developer who takes immense satisfaction out of solving problems
		and discovering new ways of tackling even more problems. Please check out my portfolio below!<br>
		(After all, that's what you're really here for, isn't it?)
	</p>
</main>

<!-- PORTFOLIO PROJECTS -->
<section class="portfolio">

	<div class="projectPlusLinks">
		<h1>Stock Tracking API</h1>
		<div class="project">
			<div>
				<img class="projectImage" src="assets/stockTrackingSmaller.png" alt="Screenshot showing a get request from stock tracking API that retrieves product data" />
			</div>
			<div class="projectText">
				<p>
					Built an API using Express with Node that connects to an SQL database. It allows for
					stock management, providing routes to add, edit, delete and retrieve product data
					as well as manage customer orders.<br><br>The relational database allowed us to use a
					table which joins customers and their orders, minimising the need for repeated data. The API will
					add new customer data to the database but will re-use customer data for returning customers when
					adding an order. It will also automatically update current stock quantity when orders are made,
					giving reliable feedback on what stock is currently left to be sold.<br><br>
					When a new product is entered a unique SKU is generated which the product can be identified by.
				</p>
			</div>
		</div>
		<div class="links">
			<div class="button projectLink liveProjectLink inactiveLink">
				<a class="inactiveLink">NO FRONT-END</a>
			</div>
			<div class="button projectLink">
				<a href="https://github.com/iO-Academy/2021-aug-stock" target="_blank">GITHUB PROJECT</a>
			</div>
		</div>
	</div>

	<div class="projectPlusLinks">
		<h1>SnakeSweeper</h1>
		<div class="project">
			<div>
				<img class="projectImage" src="assets/snakesweeperScreenshotCompressed.png" alt="Screenshot showing a Snakesweeper game in progress" />
			</div>
			<div class="projectText">
				<p>
					Created a Minesweeper-esque JavaScript game where the user dictates the size of the game
					and how many lynx they wish to find in a randomly generated forest of snakes.<br><br>
					I utilised the powers of JavaScript to dynamically render the amount of lives a user would have
					before starting the game, based on how many lynx they wish to find.<br><br>Used a modal which
					was set as hidden in CSS by default. It's triggered to display through JS when the game ends
					with the modal message being set dependent on a win or loss. Also set a default error
					message on the modal as a preventative measure against bugs, in case there happens to be an issue
					with setting the win/loss message.
				</p>
			</div>
		</div>
		<div class="links">
			<div class="button projectLink liveProjectLink">
				<a href="https://dev.io-academy.uk/projects/2021-aug/2021-aug-snakeSweeper/" target="_blank">LIVE PROJECT</a>
			</div>
			<div class="button projectLink">
				<a href="https://github.com/iO-Academy/2021-aug-minesweeper" target="_blank">GITHUB PROJECT</a>
			</div>
		</div>
	</div>

	<div class="projectPlusLinks">
		<h1>Muppets Collection</h1>
		<div class="project">
			<div>
				<img class="projectImage" src="assets/muppetScreenshot-min.png" alt="Screenshot of Muppet app index page" />
			</div>
			<div class="projectText">
				<p>
					Utilised OOP within PHP, as well as the hydrator design pattern to retrieve muppets and
					their stats to display on the front-end.<br><br>I worked on multiple tasks across the project such
					as the 'more details' feature on each muppet which retrieved a single entity from the database
					to display on a new page. Also worked on error handling for this to make sure users couldn't put
					an incorrect ID directly into the URL without being sent back with a custom error.<br><br>
					Made use of mocking in unit tests to decouple dependencies that certain methods had.<br><br>
					Sanitised and validated user input for partial search queries to the DB.
				</p>
			</div>
		</div>
		<div class="links">
			<div class="button projectLink liveProjectLink">
				<a href="https://dev.io-academy.uk/projects/2021-aug/OOPMuppets/index.php" target="_blank">LIVE PROJECT</a>
			</div>
			<div class="button projectLink">
				<a href="https://github.com/iO-Academy/2021-aug-oopMuppets" target="_blank">GITHUB PROJECT</a>
			</div>
		</div>
	</div>

	<div class="projectPlusLinks">
		<h1>iO Academy Portal (Legacy Codebase)</h1>
		<div class="project">
			<div>
				<img class="projectImage" src="assets/ioPortalScreenshotCompressed.png" alt="Screenshot showing the applicant stages view on the iO Academy Portal" />
			</div>
			<div class="projectText">
				<p>
					Built upon a legacy codebase using OOP & JavaScript with Slim. Followed the MVC design pattern in place
					and adhered to SOLID principles.<br><br>Found a pattern for a known bug in order to narrow down the
					cause and fix it. Also went about adding lock functionality to prevent deletion of applicant
					stages. I edited pre-existing Bootstrap classes for this page to incorporate lock icons and
					neaten the layout.<br><br>jQuery was prominent, so I had to learn more jQuery on the fly to fit with
					existing code. Was also introduced to Continuous Integration checks when pushing to GitHub.
				</p>
			</div>
		</div>
		<div class="links">
			<div class="button projectLink liveProjectLink">
				<a href="https://portal.dev.io-academy.uk/" target="_blank">LIVE PROJECT</a>
			</div>
			<div class="button projectLink">
				<a href="https://github.com/iO-Academy/AcademyPortal" target="_blank">GITHUB PROJECT</a>
			</div>
		</div>
	</div>

	<div class="projectPlusLinks bottomProject">
		<h1>iO Academy Aptitude Test</h1>
		<div class="project">
			<div>
				<img class="projectImage" src="assets/aptitudeScreenshot.png" alt="Screenshot showing question view page from the iO Academy aptitude test" />
			</div>
			<div class="projectText">
				<p>
					Rebuilt the Academy aptitude test in React, harnessing JavaScript to dynamically render
					pages with reusable components.<br><br>Working in 3 teams of 8, communication and sufficient sprint
					planning was paramount to our success. I optimised the codebase from the start to minimise
					technical debt. Also fetched correct answers from a RESTful API to compare with user answers
					that were captured in application state.
				</p>
			</div>
		</div>
		<div class="links">
			<div class="button projectLink liveProjectLink">
				<a href="https://aptitude-test.dev.io-academy.uk/" target="_blank">LIVE PROJECT</a>
			</div>
			<div class="button projectLink">
				<a href="https://github.com/iO-Academy/aptitude-test-react" target="_blank">GITHUB PROJECT</a>
			</div>
		</div>
	</div>

</section>

<!-- SOCIAL LINKS FIXED TO RIGHT SIDE -->
<div class="socialLinks">
	<aside>
		<a href="https://github.com/mclack" class="socialLink fab fa-github-square" target="_blank"></a>
	</aside>
	<aside>
		<a href="https://www.linkedin.com/in/milo-clack-69549621a/" target="_blank" class="socialLink fab fa-linkedin"></a>
	</aside>
</div>
</body>
</html>