-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (163 loc) · 9.89 KB
/
index.html
File metadata and controls
164 lines (163 loc) · 9.89 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cai Mills Portfolio: Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<meta charset="utf-8" />
<link rel="stylesheet" href="files/css/style.css">
</head>
<style>
@font-face
{
font-family: ARCO;
src: url(fonts/ARCO.ttf);
}
@font-face
{
font-family: MADE TOMMY;
src: url(fonts/MADE\ TOMMY\ ExtraBold.otf);
}
</style>
<body>
<nav>
<ul style="background-color: #46025c; position: sticky;">
<li><a type="button" onclick="document.getElementById('home').scrollIntoView();" style="font-family: MADE TOMMY;">HOME</a></li>
<li><a type="button" onclick="document.getElementById('projects').scrollIntoView();" style="font-family: MADE TOMMY;">PROJECTS</a></li>
<li><a href="files/pdf/Cai Mills CV.pdf" style="font-family: MADE TOMMY;">CV</a></li>
<li><a type="button" onclick="document.getElementById('contacts').scrollIntoView();" style="font-family: MADE TOMMY;">CONTACT</a></li>
</ul>
</nav>
<div id="home">
<section-title>About Me</section-title>
<div style="background-color: #1f1e1f;">
<div style="padding: 3em; text-align: left; padding-left: 12%; padding-right: 12%;">
<p>Hello! My name is Cai, and I'm a Games Programming student from Wales. I am currently attending the <a style="color: rgb(131, 0, 0)" href="https://www.staffs.ac.uk/course/computer-games-programming-bsc" target="_blank">University of Staffordshire</a> as a third year student until May 2026.</p>
<p style="margin-top: 1em;">This website is a showcase of all my projects and contributions. I am constantly trying to expand my programming repertoire, and so I have dabbled in a variety of different projects ranging from graphics libraries to game engine's. I have a high-quality standard for all my personal projects, so I tend to spend as much time as I can afford on polishing each project I work on.</p>
<p style="margin-top: 1em;">My hobbies outside programming include art, music, and table-top RPG games.</p>
<p style="margin-top: 1em;">If you wish to get into contact, please check my details at the bottom, thank you.</p>
</div>
</div>
</div>
<div id="highlight">
<section-title>Highlighted Project</section-title>
<div style="padding: 1em; text-align: center; justify-content: center;">
<div style="justify-content: center; margin-left: 3em; display: flex;">
<div class ="filterDiv other, personal">
<a href="projects/Beatdown.html">
<img src="images/thumbnails/Beatdown Thumbnail.jpg" width="360" height="520" alt="Beatdown Game Thumbnail"></img>
</a>
</div>
<div style="margin-left: 1em; max-width: 40%; text-align: left;">
<h1 style="color: rgb(247, 0, 255);">Overview</h1>
<p style="font-size: 28px;">
'Beatdown' is a rhyhtm game beat-map editor that allows for quick and simple level creation, through the analysis of any provided audio file,
as well as the audio-specific analysis tools that help make the creation process more intuetive.
<br>
<br>
This project is continuously expanding, initially intended to only feature the editor for my university final year project,
I am now working on implementing a unique gameplay loop as well as polish, aiming for a completed product over the following months.
</p>
</div>
</div>
</div>
</div>
<div id="projects">
<section-title>Projects Showcase</section-title>
<div style="padding: 1em; text-align: center;">
<p>Click on the projects below to see more details;</p>
<p><i>(Projects are ordered newest to oldest)</i></p>
</div>
<div id="myBtnContainer" style="margin: auto; display: flex; justify-content: center; width: auto;">
<button class="btn active" onclick="filterSelection('all')">Show All</button>
<button class="btn" onclick="filterSelection('games')">Games</button>
<button class="btn" onclick="filterSelection('other')">Other</button>
<button class="btn" onclick="filterSelection('personal')">Personal</button>
<button class="btn" onclick="filterSelection('education')">Education</button>
</div>
<div class="container" style="padding: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 5px; justify-items: center;">
<div class ="filterDiv other, personal, education">
<a href="projects/Beatdown.html">
<img src="images/thumbnails/Beatdown Thumbnail.jpg" width="240" height="340" alt="Beatdown Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv other, personal">
<a href="projects/J.A.D.E.html">
<img src="images/thumbnails/J.A.D.E Thumbnail.jpg" width="240" height="340" alt="Just Another Dialogue Editor (J.A.D.E) Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv games, education">
<a href="projects/Adrenaline Junkie.html">
<img src="images/thumbnails/Adrenaline Junkie Thumbnail.jpg" width="240" height="340" alt="Adrenaline Junkie Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv games, education">
<a href="projects/Pogo King.html">
<img src="images/thumbnails/Pogo King Thumbnail.jpg" width="240" height="340" alt="Pogo King Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv games, education">
<a href="projects/Deep Dungeons.html">
<img src="images/thumbnails/Deep Dungeons Thumbnail.jpg" width="240" height="340" alt="Deep Dungeons Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv games, personal">
<a href="projects/Not a Political Game.html">
<img src="images/thumbnails/Not a Political Game Thumbnail.jpg" width="240" height="340" alt="Not* A Polticial Game Thumbnail"></img>
</a>
</div>
<div class ="filterDiv games, personal">
<a href="projects/Slinging Slimes.html">
<img src="images/thumbnails/Slinging Slimes Thumbnail.jpg" width="240" height="340" alt="Slinging Slimes Game Thumbnail"></img>
</a>
</div>
</div>
<script src="files/js/script.js"></script>
</div>
<div style="background-color: purple; padding: 1em;" id="contacts">
<h1 style="text-align: center;">Contact</h1>
<p style="text-align: center;">Feel free to contact me on any of the following;</p>
<p> </p>
<ul style="position: static; display: flex; justify-content: center;">
<!-- <li>
<a href="https://x.com/CaiMills">
<img src="images/social media/twitter.png" width="80" height="80" alt="Twitter"></img>
</a>
</li>
<li>
<a href="https://bsky.app/profile/caimills.bsky.social">
<img src="images/social media/bluesky.png" width="80" height="80" alt="Bluesky"></img>
</a>
</li>
<li>
<a href="https://www.instagram.com/cai_mills/">
<img src="images/social media/instagram.png" width="80" height="80" alt="Instagram"></img>
</a>
</li>-->
<li>
<a href="https://uk.linkedin.com/in/cai-mills-a31806241">
<img src="images/social media/linkedin.png" width="80" height="80" alt="LinkedIn"></img>
</a>
</li>
<li>
<a href="https://github.com/CaiMills">
<img src="images/social media/github.png" width="80" height="80" alt="GitHub"></img>
</a>
</li>
<li>
<a href="https://cai-mills.itch.io/">
<img src="images/social media/itchio.png" width="80" height="80" alt="Itch.io"></img>
</a>
</li>
<li>
<a href="https://www.youtube.com/@caimills6565">
<img src="images/social media/youtube.png" width="80" height="80" alt="YouTube"></img>
</a>
</li>
</ul>
<p style="text-align: center;">(For the quickest response, send me an email here: <a href="mailto:CaiMills111@outlook.com">CaiMills111@outlook.com</a>)</p>
</div>
</body>
<footer>
Copyright © 2026 by Cai Mills | All images, logos and names are used with permission
</footer>
</html>