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

Major style change

Browse Source
This commit is contained in:
ethanglide
2024-08-27 16:18:59 -04:00
parent ef68678758
commit 56aa9f7d32
2 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
index.html
View File

@ -5,7 +5,7 @@
<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.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&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">
<title>Ethan's Github</title>
</head>
@ -30,29 +30,33 @@
</div>
<div class="content">
<div>
<div class="section">
<h2>About</h2>
<p>I am a 4th 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;">
6+ 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 (PostgreSQL, SQLite) and NoSQL (MongoDB, Firebase Realtime DB) 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 class="side-by-side">
<div class="section">
<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>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 class="section">
<h2>Skills</h2>
<ul>
<li style="margin: 0;">
6+ 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 (PostgreSQL, SQLite) and NoSQL (MongoDB, Firebase Realtime DB) 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>
<div class="section">
<h2>Work Experience</h2>

46
style.css
View File

@ -1,5 +1,5 @@
body {
background-color: #353535;
background-color: #212730;
margin: 0;
height: 100vh;
}
@ -12,8 +12,9 @@ main {
p, h1, h2, h3, h4, h5, h6, li {
color: #fff;
font-family: 'Roboto Slab', sans-serif;
font-weight: 100;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
line-height: 1.6rem;
margin: 0;
}
@ -60,6 +61,7 @@ div.profile-name img {
div.profile-name h1 {
font-size: 1.5rem;
font-weight: 600;
padding: 0%;
}
@ -96,33 +98,43 @@ div.content {
flex: 1 1 auto;
overflow-y: auto;
padding: 1rem;
justify-content: center;
}
div.content > div {
display: flex;
width: 100%;
width: 70%;
flex-flow: column;
gap: 1rem;
padding-bottom: 1rem;
}
div.side-by-side {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
div.section {
display: flex;
flex-flow: column;
gap: 1rem;
padding: 0.7rem;
gap: 1.5rem;
padding: 2rem;
border-radius: 0.5rem;
border: #18181800 0.15rem solid;
border: #151920 0.15rem solid;
background-color: #2d323b;
transition: all 0.25s ease-out 0s;
}
div.section:hover {
border-color: #181818;
background-color: #414141;
border-color: #14171b;
background-color: #3d4450;
}
div.section h2 {
font-size: 1.5rem;
margin: 0%;
font-weight: 600;
}
div.languages-images {
@ -285,7 +297,7 @@ div.experience-header {
}
div.profile-name h1 {
font-size: 1rem;
font-size: 1.1rem;
}
div.social-media {
@ -323,4 +335,18 @@ div.experience-header {
.large-list li {
font-size: 1rem;
}
div.side-by-side {
display: flex;
flex-direction: column;
gap: 1rem;
}
div.content > div {
width: 100%;
}
div.section {
padding: 1rem;
}
}