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

Add content

Browse Source
This commit is contained in:
ethanglide 2023-08-20 15:48:54 -04:00
parent edf4e853e4
commit 8b81e48172
4 changed files with 316 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Pictures/adverience.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
Pictures/jumpplus.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

188
index.html
View File

@ -30,16 +30,182 @@
</div>
<div class="content">
<div>
<div class="section">
<h2>About</h2>
<p>I am a 3rd year Computer Science student at University of Toronto Scarborough with a focus on Software Development. Passionate in developing scalable, high quality web and games software with readable, optimized, and well tested code. In my spare time, my main hobby is music. I play Trombone and Piano, and enjoy most to play jazz music.</p>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li style="margin: 0;">
5+ years experience programming in C/C++, C#, Java, Python, HTML/CSS, JavaScript
</li>
<li>
Solid Full-Stack Web Development experience with React/Next.js frontend, Express.js backend API
</li>
<li>
Experienced in SQL (MySQL, SQLite) and NoSQL (Firebase, MongoDB) databases
</li>
<li>
Strong DevOps skills with AWS: API Gateway, Lambda, EC2, S3, CodePipeline
</li>
<li>
Effective communication for working in collaborative groups
</li>
</ul>
</div>
<div class="section">
<h2>Work Experience</h2>
<div class="experience">
<div class="advertience-wrapper">
<div>
<img src="./Pictures/adverience.png" alt="adverience logo">
</div>
</div>
<div>
<div class="experience-header">
<h2>advertience Inc. | Ad Analytics Developer</h2>
<p>05/2023 - Present</p>
</div>
<p>Toronto, ON.</p>
<ul>
<li>
Implemented analytics tracking via Google Tag Manager and gtag.js on client's websites, resulting in a 30%
improvement in data accuracy, empowering clients to execute data-driven marketing strategies
</li>
<li>
Developed a unique attribution system to differentiate my agency from the competition, which led to the
agency taking on several new clients, beating last year’s profit records by 10%
</li>
<li>
Created a full-stack web application to help nonprofit organizations create customized donation pages with
optimized payment forms, resulting in an over 25% increase in donation conversions for our clients
</li>
</ul>
</div>
</div>
<div class="experience">
<div>
<div class="experience-header">
<h2>Jump+ | Sales Associate</h2>
<p>05/2021 - 01/2023</p>
</div>
<p>Hamilton, ON.</p>
<ul>
<li>
Collaborated within a sales team to achieve a 20% increase in Apple product sales, leveraging effective
communication and product knowledge to drive customer engagement and satisfaction
</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
</li>
</ul>
</div>
<div class="jump-wrapper">
<div>
<img src="./Pictures/jumpplus.jpeg" alt="jump+ logo">
</div>
</div>
</div>
</div>
<div class="section">
<h2>Projects</h2>
<div class="experience">
<div class="cosmotica-wrapper">
<div>
<iframe
src="https://www.youtube.com/embed/HS9tsFQpMUA?si=8mIM_T5hKvkPNSYb&controls=0&autoplay=1&mute=1&loop=1&playlist=HS9tsFQpMUA"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; loop; mute; playlist; controls; fullscreen;"
></iframe>
</div>
</div>
<div>
<div class="experience-header">
<h2> <a href="https://store.steampowered.com/app/2117410/Cosmotica/" target="_blank">Cosmotica</a> | Unity 3D Game Development</h2>
<p>01/2022 - 09/2022</p>
</div>
<ul>
<li>
Led a team of 6 to program, design, compose, model, and market a full video game
</li>
<li>
Programmed a game written in C# for the Unity game engine, with a focus on readable and scalable code
and systems design for future additions and bug fixes
</li>
<li>
Designed levels and UI while applying user feedback to get the best user experience
</li>
<li>
Published the finished product on Steam, the world’s largest online game storefront
</li>
</ul>
</div>
</div>
<div class="experience">
<div>
<div class="experience-header">
<h2>UTSC Course Planner | Android App Development</h2>
<p>11/2022 - 12/2022</p>
</div>
<ul>
<li>
Collaborated with a team of 5 to develop an android app to help students plan their university courses
</li>
<li>
Used Google’s Firebase Realtime Database to store course and user data and authenticate users
</li>
<li>
Followed industry best practices using agile methodologies (scrum)
</li>
<li>
Received a grade of 95 though good planning, teamwork, and execution
</li>
</ul>
</div>
<div class="course-planner-wrapper">
<div>
<img src="./Pictures/courseplanner.jpg" alt="course planner demo">
</div>
</div>
</div>
<div class="experience">
<div class="cosmotica-wrapper">
<div>
<img src="./Pictures/telepuzzle.png" alt="telepuzzle demo">
</div>
</div>
<div>
<div class="experience-header">
<h2> <a href="https://ethanglide.itch.io/telepuzzle1" target="_blank">Telepuzzle</a> | Unity 3D Game Development</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>
<div class="section">
<h2>Programming Languages</h2>
<div style="display: flex; flex-wrap: wrap; gap: 2rem;">
<div class="languages-images">
<img src="./Pictures/c.png" alt="c logo">
<img src="./Pictures/csharp.png" alt="c# logo">
<img src="./Pictures/python.webp" alt="python logo">
<img src="./Pictures/java.png" alt="java 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;">
<div>
<img src="./Pictures/c.png" alt="c logo">
<img src="./Pictures/csharp.png" alt="c# logo">
<img src="./Pictures/python.webp" alt="python logo">
<img src="./Pictures/java.png" alt="java 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;">
</div>
</div>
<div>
<ul>
@ -63,16 +229,6 @@
</div>
</div>
</div>
<div class="section">
<h2>Work Experience</h2>
<div>
<p>Hi</p>
<p>Hello</p>
</div>
</div>
<div class="section">
<h2>Projects</h2>
</div>
</div>
</div>
</main>

147
style.css
View File

@ -13,12 +13,27 @@ main {
p, h1, h2, h3, h4, h5, h6, li {
color: #fff;
font-family: 'Roboto Slab', sans-serif;
margin: 0;
}
p, li {
font-size: 1.5rem;
}
a {
color: #ae00d1;
text-decoration: none;
transition: all 0.1s ease-out 0s;
}
a:hover {
color: #c500ec;
}
a:active {
color: #d400ff;
}
div.header {
display: flex;
flex: 0 1 auto;
@ -56,7 +71,7 @@ div.social-media {
div.social-media a img {
width: 3rem;
height: 3rem;
transition: box-shadow 0.25s ease-out 0s;
transition: box-shadow 0.2s ease-out 0s;
}
div.social-media a:hover img {
@ -103,17 +118,143 @@ div.section h2 {
}
div.languages-images {
width: 15%;
}
div.languages-images div {
display: grid;
grid-template-columns: repeat(2, 6rem);
grid-template-rows: repeat(3, 6rem);
grid-template-columns: repeat(2, 50%);
gap: 1rem;
}
div.languages-images img {
width: 100%;
height: 100%;
border: #00000000 0.15rem solid;
border-radius: 1rem;
transition: all 0.25s ease-out 0s;
}
div.languages-images img:hover {
border: #fff 0.15rem solid;
background-color: #5a5a5a;
}
ul {
margin: 0;
}
li {
margin-top: 1rem;
}
li li {
font-size: 90%;
}
div.advertience-wrapper {
width: 20%;
padding: 1rem;
min-width: 7rem;
}
div.advertience-wrapper > div {
position: relative;
width: 100%;
padding-bottom: 140%;
}
div.advertience-wrapper > div > img {
position: absolute;
top: -0.6rem;
left: -0.6rem;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
padding: 0.6rem;
background-color: #fff;
border-radius: 1rem;
}
div.jump-wrapper {
width: 20%;
min-width: 10rem;
}
div.jump-wrapper > div {
position: relative;
width: 100%;
padding-bottom: 100%;
}
div.jump-wrapper > div > img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
border-radius: 1rem;
}
div.cosmotica-wrapper {
width: 50%;
min-width: 20rem;
}
div.cosmotica-wrapper > div {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
div.cosmotica-wrapper > div > iframe, div.cosmotica-wrapper > div > img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
border-radius: 1rem;
}
div.course-planner-wrapper {
width: 1%;
min-width: 10rem;
}
div.course-planner-wrapper > div {
position: relative;
width: 100%;
padding-bottom: 197%;
}
div.course-planner-wrapper > div > img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
border-radius: 0.5rem;
}
div.experience {
display: flex;
gap: 2rem;
}
div.experience > div {
flex-grow: 1;
}
div.experience-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}