-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (240 loc) · 12.1 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
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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!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">
<title>Liam Gates Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/mediaqueries.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
</head>
<body>
<header>
<p class="logo"><i class="fa-solid fa-mug-hot fa-bounce logo-icon"></i> Liam Gates</p>
<nav id="desktop-nav">
<ul class="nav-link-list">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#project">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
<nav id="mobile-nav">
<a class="nav-button" onclick="toggleMenu()"><i class="fa-solid fa-bars"></i></a>
<ul class="mobile-nav-link-list">
<li>
<a href="#" onclick="toggleMenu()">Home</a>
</li>
<li>
<a href="#about" onclick="toggleMenu()">About</a>
</li>
<li>
<a href="#skills" onclick="toggleMenu()">Skills</a>
</li>
<li>
<a href="#project" onclick="toggleMenu()">Projects</a>
</li>
<li>
<a href="#contact" onclick="toggleMenu()">Contact</a>
</li>
</ul>
</nav>
</header>
<section class="home" id="home">
<div class="home-container">
<img class="home-img" src="images/image.jpeg">
<div class="home-text">
<p>Hello World! I'm</p>
<h1>Liam Gates</h1>
<h1>Software Developer</h1>
<p>Passionate about developing creative and innovative solutions towards real-world problems. If you would like to work on a project together, <a href="#contact">contact me.</a></p>
</div>
</div>
<div class="home-arrow">
<h3>Learn about me</h3>
<a href="#about"><i class="fa-solid fa-chevron-down fa-2x fa-beat"></i></a>
</div>
<div class="button-container">
<div class="light-mode-button" onclick="toggleDarkMode()">
<i class="fa-solid fa-sun fa-2x"></i>
</div>
<div class="dark-mode-button" onclick="toggleDarkMode()">
<i class="fa-solid fa-moon fa-2x"></i>
</div>
</div>
</section>
<section class="about" id="about">
<div class="about-terminal">
<div class="about-window">
<ul class="button-list">
<li><i class="fa-solid fa-circle-xmark button"></i></li>
<li><i class="fa-solid fa-circle-minus button"></i></li>
<li><i class="fa-solid fa-circle-plus button"></i></li>
</ul>
</div>
<div class="terminal-content">
<p>
> Liam.origin
</p>
<p>
Worcester, MA
</p>
<p>
> Liam.education
</p>
<p>
University of Massachusetts Amherst
</p>
<p>
> Liam.major
</p>
<p>
Computer Science
</p>
<p>
> Liam.expectedGraduation
</p>
<p>
May 2025
</p>
<p>
> Liam.GPA
</p>
<p>
3.97
</p>
<p>
> Liam.professional_interests
</p>
<p>
[Full Stack Development, Artificial Intelligence]
</p>
<p>
> Liam.personal_interests
</p>
<p>
[Puzzles, Coffee, Classical Music, Soccer]
</p>
<p>> <span class="type">_</span></p>
</div>
</div>
</section>
<section class="skills-container" id="skills">
<h1>Technical Skills</h1>
<ul class="skills-list">
<li><i class="fa-brands fa-python"></i><p>Python</p></li>
<li><i class="fa-brands fa-js"></i><p>Javascript</p></li>
<li><i class="fa-brands fa-html5"></i><p>HTML</p></li>
<li><i class="fa-brands fa-css3-alt"></i><p>CSS</p></li>
<li><i class="fa-brands fa-java"></i><p>Java</p></li>
<li><i class="devicon-cplusplus-plain"></i><p>C++</p></li>
<li><i class="devicon-c-plain"></i><p>C</p></li>
<li><i class="devicon-bash-plain"></i><p>Bash</p></li>
<li><i class="fa-brands fa-react"></i><p>React</p></li>
<li><i class="fa-brands fa-node"></i><p>Node.js</p></li>
<li><i class="fa-brands fa-git"></i><p>Git</p></li>
<li><i class="fa-brands fa-github"></i><p>Github</p></li>
<li><i class="fa-brands fa-linux"></i><p>Linux</p></li>
<li><i class="devicon-flask-plain"></i><p>Flask</p></li>
</ul>
</section>
<section class="project" id="project">
<h1 class="project-title">Projects</h1>
<div class="project-container">
<div class="project-wrap">
<div class="project-item" id="project1">
<div class="project-display">
<h3>Chess Bot</h3>
<i class="fa-solid fa-chess fa-8x"></i>
</div>
<div class="project-links">
<h4 class="project-stack">Tech Stack: <i class="fa-brands fa-python fa-1x"></i></h4>
<a class="button" href="#popup1"><i class="fa-solid fa-circle-plus fa-2x"></i></a>
</div>
</div>
</div>
<div class="project-wrap">
<div class="project-item" id="project2">
<div class="project-display">
<h3>Algorhythmz</h3>
<i class="fa-solid fa-music fa-8x"></i>
</div>
<div class="project-links">
<h4 class="project-stack">Tech Stack: <i class="fa-brands fa-react fa-1x"></i> <i class="devicon-flask-plain"></i> <p>NLTK</p> </h4>
<a class="button" href="#popup2"><i class="fa-solid fa-circle-plus fa-2x"></i></a>
</div>
</div>
</div>
</div>
</section>
<footer id="contact">
<h2 class="contact-heading">Contact Me</h2>
<div class="contact-links">
<a class="link" href="https://www.linkedin.com/in/liamkaigates/" target="_blank"><i class="fa-brands fa-linkedin fa-4x"></i><p>LinkedIn</p></a>
<a class="link" href="https://github.com/liamkaigates" target="_blank"><i class="fa-brands fa-square-github fa-4x"></i><p>Github</p></a>
<a class="link" href="mailto:[email protected]"><i class="fa-solid fa-envelope fa-4x"></i><p>Email</p></a>
<a class="link" href="images/Liam Gates Resume.pdf" target="_blank"><i class="fa-solid fa-user fa-4x"></i><p>Resume</p></a>
</div>
<div class="footer-arrow">
<a href="#"><i class="fa-solid fa-chevron-up fa-2x fa-beat"></i></a>
<h3>Back to Home</h3>
</div>
<p class="copyright">© Liam Gates 2024</p>
</footer>
<script src="https://kit.fontawesome.com/c51edf595d.js" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
<div class="project-popup" id="popup1">
<div class="project-popup-content">
<h2 class="project-popup-title">Chess Bot</h2>
<a class="close" href="#project"><i class="fa-solid fa-circle-xmark fa-2x"></i></a>
<section>
<h3>Overview:</h3>
<p>The "Chess AI with Minimax and Alpha-Beta Pruning" project is a Python-based implementation of an artificial intelligence system designed to play chess against human opponents. It employs the Minimax algorithm with Alpha-Beta pruning to make strategic decisions on the chessboard, aiming to maximize its chances of winning while minimizing the opponent's opportunities.</p>
</section>
<section>
<h3>Description:</h3>
<p>This project features a 2D array representation of the chessboard, with pieces denoted by their initials. Each piece is assigned a score, and the AI evaluates different moves using the Minimax algorithm, exploring potential moves up to a specified depth. Alpha-Beta pruning optimizes the algorithm by reducing unnecessary exploration. The AI's strategies include piece scoring, depth-limited search, and Alpha-Beta pruning. Users can interact with the AI by running the provided Python script and adjusting parameters such as search depth and piece scores for customization.</p>
</section>
<section>
<h3>Credits:</h3>
<p>Inspired by chess AI concepts, Minimax algorithm, and Alpha-Beta pruning. Feel free to contribute or customize as desired!</p>
<h3>Tech Stack: <i class="fa-brands fa-python fa-2x"></i></h3>
<h3>Github Link: <a class="link" href="https://github.com/liamkaigates/Chess-Python" target="_blank"><i class="fa-brands fa-github fa-2x"></i></a></h3>
</section>
</div>
</div>
<div class="project-popup" id="popup2">
<div class="project-popup-content">
<h2 class="project-popup-title">Algorhythmz</h2>
<a class="close" href="#project"><i class="fa-solid fa-circle-xmark fa-2x"></i></a>
<section>
<h3>Overview:</h3>
<p>Algorhythmz is a web application built for HackUMass XI, allowing users to generate freestyle rap based on a one-word prompt. The application utilizes a dataset of over 40,000 songs to create unique rap lyrics tailored to the user's input. It is accessible via algorhythmz.tech and is hosted on Netlify.</p>
</section>
<section>
<h3>Description:</h3>
<p>At algorhythmz.tech, users can input a single-word prompt, and the application generates freestyle rap lyrics by leveraging a dataset of 40,000+ songs. The application is built using React.JS for the frontend, with HTML and CSS for layout and styling. Python is used for the backend, incorporating libraries such as Beautiful Soup and nltk for data processing.</p>
<p>The project is hosted on Netlify and makes use of the .tech domain name. Group members involved in the development include Liam Gates and Kaitlyn Malsky for the frontend, and Ty Dagan and Affan Ahmed Habib for the backend.</p>
</section>
<section>
<h3>Dataset:</h3>
<p>The dataset used for generating rap lyrics is sourced from the "genius-expertise" dataset, which explores expertise and dynamics within crowdsourced musical knowledge curation, as detailed in the paper by Derek Lim and Austin R. Benson presented at the International Conference on Web and Social Media (ICWSM) in 2021.</p>
<h3>Tech Stack: <i class="fa-brands fa-react fa-2x"></i> <i class="devicon-flask-plain"></i> <p class="framework">NLTK</p></h3>
<h3>Github Link: <a class="link" href="https://github.com/kaitlynmalsky/algorhythmz" target="_blank"><i class="fa-brands fa-github fa-2x"></i></a></h3>
</section>
</div>
</div>
</body>
</html>