ethanglide/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add cpp-console-game project

Browse Source
This commit is contained in:
ethanglide 2024-07-13 18:33:15 -04:00
parent 4a4c56b42d
commit c7211c625b
3 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Pictures/cpp-console-game.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

48
index.html
View File

@ -38,13 +38,13 @@
<h2>Skills</h2> <h2>Skills</h2>
<ul> <ul>
<li style="margin: 0;"> <li style="margin: 0;">
5+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript 6+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript
</li> </li>
<li> <li>
Solid Full-Stack Web Development experience with React/Next.js frontend, Express.js backend API Solid Full-Stack Web Development experience with React/Next.js frontend, Express.js backend API
</li> </li>
<li> <li>
Experienced in SQL (MySQL, SQLite) and NoSQL (Firebase, MongoDB) databases Experienced in SQL (PostgreSQL, SQLite) and NoSQL (MongoDB, Firebase Realtime DB) databases
</li> </li>
<li> <li>
Strong DevOps skills with AWS: API Gateway, Lambda, EC2, S3, CodePipeline Strong DevOps skills with AWS: API Gateway, Lambda, EC2, S3, CodePipeline
@ -84,7 +84,7 @@ agency taking on several new clients, beating last year’s profit records by 10
</div> </div>
</div> </div>
<div class="experience"> <div class="experience">
<div class="jump-wrapper"> <div class="square-wrapper">
<div> <div>
<img src="./Pictures/jumpplus.jpeg" alt="jump+ logo"> <img src="./Pictures/jumpplus.jpeg" alt="jump+ logo">
</div> </div>
@ -110,7 +110,7 @@ communication and product knowledge to drive customer engagement and satisfactio
<div class="section"> <div class="section">
<h2>Projects</h2> <h2>Projects</h2>
<div class="experience"> <div class="experience">
<div class="youtube-wrapper"> <div class="rectangular-wrapper">
<div> <div>
<iframe <iframe
src="https://www.youtube.com/embed/HS9tsFQpMUA?si=8mIM_T5hKvkPNSYb&controls=0&autoplay=1&mute=1&loop=1&playlist=HS9tsFQpMUA" src="https://www.youtube.com/embed/HS9tsFQpMUA?si=8mIM_T5hKvkPNSYb&controls=0&autoplay=1&mute=1&loop=1&playlist=HS9tsFQpMUA"
@ -120,7 +120,7 @@ communication and product knowledge to drive customer engagement and satisfactio
</div> </div>
<div class="experience-text"> <div class="experience-text">
<div class="experience-header"> <div class="experience-header">
<h2> <a href="https://store.steampowered.com/app/2117410/Cosmotica/" target="_blank">Cosmotica</a> | Unity 3D Game Development</h2> <h2> <a href="https://store.steampowered.com/app/2117410/Cosmotica/" target="_blank">Cosmotica</a> | Unity 3D Game</h2>
<p>01/2022 - 09/2022</p> <p>01/2022 - 09/2022</p>
</div> </div>
<ul> <ul>
@ -141,7 +141,7 @@ and systems design for future additions and bug fixes
</div> </div>
</div> </div>
<div class="experience"> <div class="experience">
<div class="youtube-wrapper"> <div class="rectangular-wrapper">
<div> <div>
<iframe <iframe
src="https://www.youtube.com/embed/rsZMfWVyc90?si=jERn5iKCQvnH3Y_g&controls=0&autoplay=1&mute=1&loop=1&playlist=rsZMfWVyc90" src="https://www.youtube.com/embed/rsZMfWVyc90?si=jERn5iKCQvnH3Y_g&controls=0&autoplay=1&mute=1&loop=1&playlist=rsZMfWVyc90"
@ -151,7 +151,7 @@ and systems design for future additions and bug fixes
</div> </div>
<div class="experience-text"> <div class="experience-text">
<div class="experience-header"> <div class="experience-header">
<h2><a href="https://ethanglide.itch.io/solitude-echoes" target="_blank">Solitude Echoes</a> | Unity 2D Game Development</h2> <h2><a href="https://ethanglide.itch.io/solitude-echoes" target="_blank">Solitude Echoes</a> | Unity 2D Game</h2>
<p>12/2023</p> <p>12/2023</p>
</div> </div>
<ul> <ul>
@ -163,14 +163,14 @@ and systems design for future additions and bug fixes
</div> </div>
</div> </div>
<div class="experience"> <div class="experience">
<div class="youtube-wrapper"> <div class="rectangular-wrapper">
<div> <div>
<img src="./Pictures/grantors.png" alt="grantors web app dashboard"> <img src="./Pictures/grantors.png" alt="grantors web app dashboard">
</div> </div>
</div> </div>
<div class="experience-text"> <div class="experience-text">
<div class="experience-header"> <div class="experience-header">
<h2><a href="https://github.com/GlassesNoGlasses/c01w24-project-grantors" target="_blank">Grantors</a> | React Web App Development</h2> <h2><a href="https://github.com/GlassesNoGlasses/c01w24-project-grantors" target="_blank">Grantors</a> | React Web App</h2>
<p>02/2024 - 04/2024</p> <p>02/2024 - 04/2024</p>
</div> </div>
<ul> <ul>
@ -197,7 +197,7 @@ and systems design for future additions and bug fixes
</div> </div>
<div class="experience-text"> <div class="experience-text">
<div class="experience-header"> <div class="experience-header">
<h2>UTSC Course Planner | Android App Development</h2> <h2>UTSC Course Planner | Android App</h2>
<p>11/2022 - 12/2022</p> <p>11/2022 - 12/2022</p>
</div> </div>
<ul> <ul>
@ -217,14 +217,14 @@ and systems design for future additions and bug fixes
</div> </div>
</div> </div>
<div class="experience"> <div class="experience">
<div class="youtube-wrapper"> <div class="rectangular-wrapper">
<div> <div>
<img src="./Pictures/telepuzzle.png" alt="telepuzzle demo"> <img src="./Pictures/telepuzzle.png" alt="telepuzzle demo">
</div> </div>
</div> </div>
<div class="experience-text"> <div class="experience-text">
<div class="experience-header"> <div class="experience-header">
<h2> <a href="https://ethanglide.itch.io/telepuzzle1" target="_blank">Telepuzzle</a> | Unity 3D Game Development</h2> <h2> <a href="https://ethanglide.itch.io/telepuzzle1" target="_blank">Telepuzzle</a> | Unity 3D Game</h2>
<p>12/2022</p> <p>12/2022</p>
</div> </div>
<ul> <ul>
@ -240,6 +240,30 @@ and systems design for future additions and bug fixes
</ul> </ul>
</div> </div>
</div> </div>
<div class="experience">
<div class="square-wrapper">
<div>
<img src="./Pictures/cpp-console-game.png" alt="cpp-console-game demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://github.com/ethanglide/cpp-console-game" target="_blank">cpp-console-game</a> | C++ Multiplayer Terminal Game</h2>
<p>12/2022</p>
</div>
<ul>
<li>
Developed as a side project to learn the C++ programming language, CMake build automation system, and RPC basics
</li>
<li>
Simple terminal-based game where you can move around a map and see other players moving in real-time
</li>
<li>
Uses a custom RPC library to communicate between the server and clients, which uses TCP sockets
</li>
</ul>
</div>
</div>
</div> </div>
<div class="section"> <div class="section">
<h2>Programming Languages, Tools, and Frameworks</h2> <h2>Programming Languages, Tools, and Frameworks</h2>

14
style.css
View File

@ -185,18 +185,18 @@ div.advertience-wrapper > div > img {
border-radius: 1rem; border-radius: 1rem;
} }
div.jump-wrapper { div.square-wrapper {
width: 20%; width: 20%;
max-width: 10rem; max-width: 10rem;
} }
div.jump-wrapper > div { div.square-wrapper > div {
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 100%; padding-bottom: 100%;
} }
div.jump-wrapper > div > img { div.square-wrapper > div > img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -207,18 +207,18 @@ div.jump-wrapper > div > img {
border-radius: 1rem; border-radius: 1rem;
} }
div.youtube-wrapper { div.rectangular-wrapper {
width: 50%; width: 50%;
max-width: 20rem; max-width: 20rem;
} }
div.youtube-wrapper > div { div.rectangular-wrapper > div {
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 56.25%; padding-bottom: 56.25%;
} }
div.youtube-wrapper > div > iframe, div.youtube-wrapper > div > img { div.rectangular-wrapper > div > iframe, div.rectangular-wrapper > div > img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -315,7 +315,7 @@ div.experience-header {
grid-template-columns: repeat(3, min(33%)); grid-template-columns: repeat(3, min(33%));
} }
div.youtube-wrapper { div.rectangular-wrapper, div.square-wrapper, div.advertience-wrapper {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }