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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -5,7 +5,7 @@
<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=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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ethan's Github</title> <title>Ethan's Github</title>
</head> </head>
@ -30,9 +30,12 @@
</div> </div>
<div class="content"> <div class="content">
<div> <div>
<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. 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> <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>
<div class="section"> <div class="section">
<h2>Skills</h2> <h2>Skills</h2>
@ -54,6 +57,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div class="section"> <div class="section">
<h2>Work Experience</h2> <h2>Work Experience</h2>
<div class="experience"> <div class="experience">

46
style.css
View File

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