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

Compare commits

base: ethanglide:7da858fea7a63a5596eb00b63276acf7d0e15c8f
Branches Tags
ethanglide:main
...
compare: ethanglide:main
Branches Tags
ethanglide:main

6 Commits
7da858fea7 ... main

Author SHA1 Message Date
Ethan
17586ae648 Add cscc43 project 2025-04-22 12:13:53 -04:00
Ethan
ce7018251a Add d-ticketmaster project 2025-04-22 11:53:08 -04:00
Ethan
c2e06b87bc Remove unneeded images 2025-04-22 11:29:38 -04:00
Ethan
f6290b28b1 Add rust project 
Also reorder projects
 2024-12-27 21:12:05 -05:00
ethanglide
542b353f27 Add smartli experience 
Also change some sizes of the top menu on mobile
 2024-12-05 14:20:02 -05:00
ethanglide
b56415f2bb Reformat html and css files 2024-12-05 13:53:08 -05:00
11 changed files with 531 additions and 365 deletions
Expand all files Collapse all files

285
src/index.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="pictures/thedeer.ico"> <link rel="icon" type="image/x-icon" href="pictures/thedeer.ico">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ethan's Portfolio</title> <title>Ethan's Portfolio</title>
</head> </head>
<body> <body>
<main> <main>
<div class="header"> <div class="header">
@ -33,15 +36,18 @@
<div class="side-by-side"> <div class="side-by-side">
<div class="section"> <div class="section">
<h2>About</h2> <h2>About</h2>
<p>I am a 4th year Computer Science student at University of Toronto Scarborough with a focus on Software Development.</p> <p>I am a 4th year Computer Science student at University of Toronto Scarborough with a focus on Software
<p>Passionate in developing scalable, high quality web and games software with readable, optimized, and well tested code.</p> Development.</p>
<p>In my spare time, my main hobby is music. I play Trombone and Piano, and enjoy most to play jazz music.</p> <p>Passionate in developing scalable, high quality web and games software with readable, optimized, and well
tested code.</p>
<p>In my spare time, my main hobby is music. I play Trombone and Piano, and enjoy most to play jazz music.
</p>
</div> </div>
<div class="section"> <div class="section">
<h2>Skills</h2> <h2>Skills</h2>
<ul> <ul>
<li style="margin: 0;"> <li style="margin: 0;">
6+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript 7+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript, Rust
</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
@ -60,6 +66,34 @@
</div> </div>
<div class="section"> <div class="section">
<h2>Work Experience</h2> <h2>Work Experience</h2>
<div class="experience">
<div class="smartli-wrapper">
<div>
<img src="./pictures/smartli.png" alt="smartli logo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2>SmartLi Inc. | Analytics Developer</h2>
<p>05/2024 - Present</p>
</div>
<p>Toronto, ON.</p>
<ul>
<li>
Configured and maintained analytics tracking on client's websites through Google Tag Manager
for Google Analytics, Facebook Pixel, StackAdapt, Microsoft Clarity, and more
</li>
<li>
Implemented custom tracking solutions on a per-client basis to track specific user interactions
on custom web applications, resulting in a 20% increase in data accuracy
</li>
<li>
Developed a full-stack web application to automate lead generation with automatic reporting and
email notifications, resulting in a 50% increase in team efficiency for lead generation
</li>
</ul>
</div>
</div>
<div class="experience"> <div class="experience">
<div class="advertience-wrapper"> <div class="advertience-wrapper">
<div> <div>
@ -74,15 +108,16 @@
<p>Toronto, ON.</p> <p>Toronto, ON.</p>
<ul> <ul>
<li> <li>
Implemented analytics tracking via Google Tag Manager and gtag.js on client's websites, resulting in a 30% Implemented analytics tracking via Google Tag Manager and gtag.js on client's websites, resulting in a
improvement in data accuracy, empowering clients to execute data-driven marketing strategies 30% improvement in data accuracy, empowering clients to execute data-driven marketing strategies
</li> </li>
<li> <li>
Developed a unique attribution system to differentiate my agency from the competition, which led to the Developed a unique attribution system to differentiate my agency from the competition, which led to
agency taking on several new clients, beating last year's profit records by 10% the agency taking on several new clients, beating last year's profit records by 10%
</li> </li>
<li> <li>
Created a full-stack CRM web application to help our nonprofit clients leverage their geographical analytics, resulting in an over 25% increase in donation conversions for our clients Created a full-stack CRM web application to help our nonprofit clients leverage their geographical
analytics, resulting in an over 25% increase in donation conversions for our clients
</li> </li>
</ul> </ul>
</div> </div>
@ -101,11 +136,12 @@ agency taking on several new clients, beating last year's profit records by 10%
<p>Hamilton, ON.</p> <p>Hamilton, ON.</p>
<ul> <ul>
<li> <li>
Collaborated within a sales team to achieve a 20% increase in Apple product sales, leveraging effective Collaborated within a sales team to achieve a 20% increase in Apple product sales, leveraging
communication and product knowledge to drive customer engagement and satisfaction effective communication and product knowledge to drive customer engagement and satisfaction
</li> </li>
<li> <li>
Orchestrated seamless store operations by coordinating with team members to assign tasks and optimize workflow on the sales floor, contributing to a 15% boost in overall store efficiency Orchestrated seamless store operations by coordinating with team members to assign tasks and optimize
workflow on the sales floor, contributing to a 15% boost in overall store efficiency
</li> </li>
</ul> </ul>
</div> </div>
@ -124,7 +160,8 @@ 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</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>
@ -155,17 +192,79 @@ 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</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>
<li>Developed in 9 days for the Unity Developer Community Game Jam #28, with the theme "Silence"</li> <li>Developed in 9 days for the Unity Developer Community Game Jam #28, with the theme "Silence"</li>
<li>Puzzle/Horror game where you wake up in a decrepid dungeon and have to find your way out, while being stalked by the monsters within</li> <li>Puzzle/Horror game where you wake up in a decrepid dungeon and have to find your way out, while
<li>Led an international team of 5 people, with programmers, artists, musicians, and level designers</li> being stalked by the monsters within</li>
<li>Led an international team of 5 people, with programmers, artists, musicians, and level designers
</li>
<li>Game is playable completely within the browser</li> <li>Game is playable completely within the browser</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/cscc43-project.png" alt="D-Ticketmaster demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2><a href="https://github.com/ethanglide/cscc43-project" target="_blank">Social Investment
Platform</a> |
Full-Stack Web Application</h2>
<p>03/2025-04/2025</p>
</div>
<ul>
<li>
Social platform where users can manage stock portfolios, analyze market trends, and share investment
strategies with friends
</li>
<li>
Developed as a project for my university's database course, with a focus on smart schema design and
efficient queries
</li>
<li>
Built with React frontend, Express.js backend, and PostgreSQL database
</li>
</ul>
</div>
</div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/dticketmaster.png" alt="D-Ticketmaster demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2>D-Ticketmaster | Web3 Blockchain dApp</h2>
<p>03/2025</p>
</div>
<ul>
<li>
Decentralized ticket marketplace powered by the Ethereum blockchain, allowing users to buy, sell, and
trade tickets securely and transparently
</li>
<li>
Developed for my university's blockchain course for learning about smart contracts, wallet
connections, and decentralized applications
</li>
<li>
Ticket purchases are done using the platform's custom ERC-20 tokens, and tickets themselves are
ERC-721 NFTs with royalties built-in so that the original seller/artist gets a cut of all resales
</li>
<li>
Built with React frontend, Solidity smart contracts, and <a href="https://viem.sh/"
target="_blank">viem</a> for interacting with the Ethereum blockchain
</li>
</ul>
</div>
</div>
<div class="experience"> <div class="experience">
<div class="rectangular-wrapper"> <div class="rectangular-wrapper">
<div> <div>
@ -174,7 +273,8 @@ 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://github.com/GlassesNoGlasses/c01w24-project-grantors" target="_blank">Grantors</a> | React Web App</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>
@ -185,7 +285,8 @@ and systems design for future additions and bug fixes
Developed with industry standard stack of React frontend, Express.js backend, and MongoDB database Developed with industry standard stack of React frontend, Express.js backend, and MongoDB database
</li> </li>
<li> <li>
Web Content Accessibility Guidelines (WCAG) compliant, with a focus on user experience and accessibility for grantors and applicants alike Web Content Accessibility Guidelines (WCAG) compliant, with a focus on user experience and
accessibility for grantors and applicants alike
</li> </li>
<li> <li>
Automated CI/CD with Jest, GitHub Actions, and Docker Automated CI/CD with Jest, GitHub Actions, and Docker
@ -193,6 +294,91 @@ and systems design for future additions and bug fixes
</ul> </ul>
</div> </div>
</div> </div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/rhdc.png" alt="Romhacking.com home page">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://romhacking.com/" target="_blank">Romhacking.com</a> | Full-Stack Web Development
</h2>
<p>08/2024 - Present</p>
</div>
<ul>
<li>
Joined group of developers to add features to an existing production-level project
</li>
<li>
Navigated the large codebases, frontend and backend, and learned the new technologies required to make
extensions to the functionality
</li>
<li>
Worked cloesly with maintainers to make sure code additions were consistent in quality and style with
the rest of the codebase
</li>
<li>
Added a live-updating activity feed to the home page to make the site more lively
</li>
</ul>
</div>
</div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/groq-model-comparison.png" alt="Groq Model Comparison demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://git.thingsnstuff.xyz/ethanglide/groq-model-comparison" target="_blank">Groq Model
Comparison</a> | Rust Desktop App
</h2>
<p>12/2024</p>
</div>
<ul>
<li>
Desktop application for easily comparing LLM responses and response times to find the one
best suited for your project
</li>
<li>
Developed as a side project to learn the Rust programming language after becoming interested in memory
safety from a cybersecurity course
</li>
<li>
Uses the <code>egui</code> library for the GUI, <code>reqwest</code> for making HTTP requests, and
<code>tokio</code> for concurrency
</li>
</ul>
</div>
</div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/telepuzzle.png" alt="telepuzzle demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://ethanglide.itch.io/telepuzzle1" target="_blank">Telepuzzle</a> | Unity 3D Game
</h2>
<p>12/2022</p>
</div>
<ul>
<li>
Developed in 4 days for the Unity Developer Community Game Jam #16, with the theme "Teleportation"
</li>
<li>
Puzzle game where your goal is to get to the end of the level by manipulating the objects around you
with your teleportation gun
</li>
<li>
Worked together with a 3D artist to create the game with fun gameplay and a unique art style
</li>
</ul>
</div>
</div>
<div class="experience"> <div class="experience">
<div class="course-planner-wrapper"> <div class="course-planner-wrapper">
<div> <div>
@ -220,30 +406,6 @@ and systems design for future additions and bug fixes
</ul> </ul>
</div> </div>
</div> </div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/telepuzzle.png" alt="telepuzzle demo">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://ethanglide.itch.io/telepuzzle1" target="_blank">Telepuzzle</a> | Unity 3D Game</h2>
<p>12/2022</p>
</div>
<ul>
<li>
Developed in 4 days for the Unity Developer Community Game Jam #16, with the theme "Teleportation"
</li>
<li>
Puzzle game where your goal is to get to the end of the level by manipulating the objects around you with your teleportation gun
</li>
<li>
Worked together with a 3D artist to create the game with fun gameplay and a unique art style
</li>
</ul>
</div>
</div>
<div class="experience"> <div class="experience">
<div class="square-wrapper"> <div class="square-wrapper">
<div> <div>
@ -252,12 +414,14 @@ 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://git.thingsnstuff.xyz/ethanglide/cpp-console-game" target="_blank">cpp-console-game</a> | C++ Multiplayer Terminal Game</h2> <h2> <a href="https://git.thingsnstuff.xyz/ethanglide/cpp-console-game"
target="_blank">cpp-console-game</a> | C++ Multiplayer Terminal Game</h2>
<p>07/2024</p> <p>07/2024</p>
</div> </div>
<ul> <ul>
<li> <li>
Developed as a side project to learn the C++ programming language, CMake build automation system, and RPC basics Developed as a side project to learn the C++ programming language, CMake build automation system, and
RPC basics
</li> </li>
<li> <li>
Simple terminal-based game where you can move around a map and see other players moving in real-time Simple terminal-based game where you can move around a map and see other players moving in real-time
@ -268,33 +432,6 @@ and systems design for future additions and bug fixes
</ul> </ul>
</div> </div>
</div> </div>
<div class="experience">
<div class="rectangular-wrapper">
<div>
<img src="./pictures/rhdc.png" alt="Romhacking.com home page">
</div>
</div>
<div class="experience-text">
<div class="experience-header">
<h2> <a href="https://romhacking.com/" target="_blank">Romhacking.com</a> | Full-Stack Web Development</h2>
<p>08/2024 - Present</p>
</div>
<ul>
<li>
Joined group of developers to add features to an existing production-level project
</li>
<li>
Navigated the large codebases, frontend and backend, and learned the new technologies required to make extensions to the functionality
</li>
<li>
Worked cloesly with maintainers to make sure code additions were consistent in quality and style with the rest of the codebase
</li>
<li>
Added a live-updating activity feed to the home page to make the site more lively
</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>
@ -306,7 +443,8 @@ and systems design for future additions and bug fixes
<img src="./pictures/python.webp" alt="python logo"> <img src="./pictures/python.webp" alt="python logo">
<img src="./pictures/java.png" alt="java logo"> <img src="./pictures/java.png" alt="java logo">
<img src="./pictures/htmlcss.png" alt="html and css logo"> <img src="./pictures/htmlcss.png" alt="html and css logo">
<img src="./pictures/javascript.png" alt="javascript logo" style="overflow: hidden; border-radius: 0.5rem;"> <img src="./pictures/javascript.png" alt="javascript logo"
style="overflow: hidden; border-radius: 0.5rem;">
</div> </div>
</div> </div>
<div style="display: flex; flex-grow: 1; flex-wrap: wrap; justify-content: space-between;"> <div style="display: flex; flex-grow: 1; flex-wrap: wrap; justify-content: space-between;">
@ -343,4 +481,5 @@ and systems design for future additions and bug fixes
</div> </div>
</main> </main>
</body> </body>
</html> </html>

BIN
src/pictures/cscc43-project.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
src/pictures/dticketmaster.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
src/pictures/glidebot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
src/pictures/gmail.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
src/pictures/groq-model-comparison.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 KiB

BIN
src/pictures/linkedin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
src/pictures/polyfactor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
src/pictures/smartli.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/pictures/solitudeechoes.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

55
src/style.css
View File

@ -10,7 +10,14 @@ main {
height: 100%; height: 100%;
} }
p, h1, h2, h3, h4, h5, h6, li { p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
color: #fff; color: #fff;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-weight: 500; font-weight: 500;
@ -18,7 +25,8 @@ p, h1, h2, h3, h4, h5, h6, li {
margin: 0; margin: 0;
} }
p, li { p,
li {
font-size: 1rem; font-size: 1rem;
} }
@ -118,7 +126,7 @@ div.side-by-side {
div.section { div.section {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 1.5rem; gap: 1.7rem;
padding: 2rem; padding: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: #151920 0.15rem solid; border: #151920 0.15rem solid;
@ -172,6 +180,27 @@ li li {
font-size: 90%; font-size: 90%;
} }
div.smartli-wrapper {
width: 20%;
max-width: 10rem;
}
div.smartli-wrapper>div {
position: relative;
width: 100%;
padding-bottom: 25%;
}
div.smartli-wrapper>div>img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
div.advertience-wrapper { div.advertience-wrapper {
width: 20%; width: 20%;
padding: 1rem; padding: 1rem;
@ -230,7 +259,8 @@ div.rectangular-wrapper > div {
padding-bottom: 56.25%; padding-bottom: 56.25%;
} }
div.rectangular-wrapper > div > iframe, div.rectangular-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;
@ -297,7 +327,7 @@ div.experience-header {
} }
div.profile-name h1 { div.profile-name h1 {
font-size: 1.1rem; font-size: 1.2rem;
} }
div.social-media { div.social-media {
@ -305,14 +335,8 @@ div.experience-header {
} }
div.social-media a img { div.social-media a img {
width: 1.5rem; width: 1.75rem;
height: 1.5rem; height: 1.75rem;
}
div.social-media a img[src="./Pictures/gmail.png"] {
width: 2.5rem;
height: 2rem;
border-radius: 0.2rem;
} }
div.experience { div.experience {
@ -327,7 +351,10 @@ div.experience-header {
grid-template-columns: repeat(3, min(33%)); grid-template-columns: repeat(3, min(33%));
} }
div.rectangular-wrapper, div.square-wrapper, div.advertience-wrapper { div.rectangular-wrapper,
div.square-wrapper,
div.advertience-wrapper,
div.smartli-wrapper {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
} }