commit 668a90a0c9ad78072d00a5c8c63382df61766685
parent d3aa188ad62cbfcef7990515ffa01a5e90257e82
Author: Christian Ermann <christianermann@gmail.com>
Date: Sat, 19 Sep 2020 21:21:13 -0700
Simplified the layout.
Diffstat:
4 files changed, 130 insertions(+), 176 deletions(-)
diff --git a/images/marquam-gulch.jpg b/images/marquam-gulch.jpg
Binary files differ.
diff --git a/images/profile.jpg b/images/profile.jpg
Binary files differ.
diff --git a/index.html b/index.html
@@ -1,103 +1,96 @@
<!doctype html>
<html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="x-ua-compatible" content="ie=edge"/>
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <meta name="author" content="Christian Ermann"/>
- <title>Christian Ermann</title>
- <link rel="stylesheet" href="styles.css"/>
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Rokkitt:wght@300&display=swap"/>
- </head>
-
- <body>
- <div id="header" class="vertical horizontal">
- <h1>Hi, I'm Christian!</h1>
- </div>
-
- <div id="columns">
- <div id="left">
- <div id="about" class="vertical">
- <h2>About me:</h2>
- <img src="images/profile.jpg" alt="Profile of Christian Ermann"/>
- <p>
- I'm a junior at Lewis & Clark College with a passion for math,
- physics, and computer science. My main focus is always my
- coursework, but I enjoy being involved outside of the classroom as
- well. I joined the rowing team my first semester of college and I
- have competed on the L&C Men's Varsity Crew Team each semester
- since, with teammates who quickly became great friends. Since the
- beginning of my sophomore year, I've worked both as a STEM tutor,
- helping other students to prepare for upcoming exams and understand
- assignments, and as a lab assistant, aiding other students in
- understanding physics principles through experimentation, alongside
- various professors. Aside from math and physics, I've also taken
- three semesters of Mandarin and plan to study abroad in the spring
- of 2021 in a language intensive program at National Taiwan
- University in Taipei.
- </p>
+ <head>
+ <meta charset="utf-8"/>
+ <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
+ <meta name="author" content="Christian Ermann"/>
+ <title>Christian Ermann</title>
+ <link rel="stylesheet" href="styles.css"/>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans"/>
+ </head>
+
+ <body>
+ <div id="header">
+ <h2>Hi, I'm Christian!</h2>
+ <nav>
+ <h3>
+ <a href="https://github.com/c2000e?tab=repositories">
+ Projects
+ </a>
+ </h3>
+ </nav>
+ </div>
+ <hr>
+ <div id="introduction">
+ <p>I'm currently studying math, physics, and computer science at
+ <a href="https://www.lclark.edu/">Lewis & Clark College</a> in
+ Portland, Oregon. I also compete on the men's varsity crew team,
+ work in the physics department, and tutor at the <a href="https://college.lclark.edu/departments/mathematical_sciences/sqrc/">
+ SQRC</a>.</p>
</div>
- </div>
-
- <div id="right">
- <div id="align">
- <div id="projects" class="vertical">
- <h2>Check out my projects:</h2>
+ <div id="projects">
+ <h2>Recent Projects:</h2>
+ <hr>
<ul>
- <li>
- <a href="https://github.com/c2000e/Polygonize">
- Polygonize (WIP)
- </a>
- <p class="indent">
- Evolve "stained glass" recreations of images using a
- combination of OpenGL's traditional rendering pipeline and
- compute shaders.
- </p>
- </li>
- <li>
- <a href="https://github.com/c2000e/MarchingCubesReference">
- Marching Cubes
- </a>
- <p class="indent">
- A simple implementation of the marching cubes algorithm in C++
- that I plan to use as a stepping stone to build a more complex
- version that utilizes the GPU.
- </p>
- </li>
- <li>
- <a href="https://github.com/c2000e">All Projects</a>
- <p class="indent">View all my work on Github.</p>
- </li>
+ <li class="project">
+ <h4>
+ <a href="https://github.com/c2000e/marching_cubes">
+ Marching Cubes
+ </a>
+ </h4>
+ <p>Render signed distance functions with the marching cubes
+ algorithm. Utilizes OpenGL and C++.</p>
+ </li>
+ <li class="project">
+ <h4>
+ <a href="https://github.com/c2000e/Triangulate">
+ Triangulate (WIP)
+ </a>
+ </h4>
+ <p>Draw points, lines, and polygons and then triangulate
+ them. Written in C++.</p>
+ </li>
+ <li class="project">
+ <h4>
+ <a href="https://github.com/c2000e/skej">
+ Skej
+ </a>
+ </h4>
+ <p>A REST-API for tracking deadlines built with python.</p>
+ </li>
</ul>
- </div>
-
- <div id="achievements" class="vertical">
- <h2>Education and achievements:</h2>
+ </div>
+ <div id="achievements">
+ <h2>Education and Achievements:</h2>
+ <hr>
<ul>
- <li>
- <p>BA in Physics & BA in Mathematics, Expected 2022<p>
- <p class="indent">Lewis & Clark College, Portland, Oregon<p>
- </li>
- <li>
- <p>
- <a href="https://fhsu.edu/kams/">KAMS</a>
- Completion Certificate, 2018
- </p>
- <p class="indent">Fort Hays State University, Hays, Kansas</p>
- </li>
- <li>
- <p>Eagle Scout Award, 2016</p>
- <p class="indent">Troop 73, Liberal, Kansas</p>
- </li>
+ <li class="achievement">
+ <p>B.A. in Physics & B.A. in Mathematics, Expected May
+ 2022<p>
+ <p class="indent">Lewis & Clark College, Portland,
+ Oregon<p>
+ </li>
+ <li class="achievement">
+ <p>
+ <a href="https://fhsu.edu/kams/">KAMS</a>
+ Completion Certificate, 2018
+ </p>
+ <p class="indent">Fort Hays State University, Hays,
+ Kansas</p>
+ </li>
+ <li class="achievement">
+ <p>Eagle Scout Award, 2016</p>
+ <p class="indent">Troop 73, Liberal, Kansas</p>
+ </li>
</ul>
- </div>
</div>
- </div>
- </div>
-
- <div id="footer" class="vertical horizontal">
- <h2>Contact me:</h2>
- <a href="mailto:christianermann@gmail.com">christianermann@gmail.com</a>
- </div>
- </body>
+ <div id="footer">
+ <h2>Contact me:</h2>
+ <hr>
+ <a href="mailto:christianermann@gmail.com">
+ christianermann@gmail.com
+ </a>
+ </div>
+ </body>
</html>
diff --git a/styles.css b/styles.css
@@ -1,15 +1,10 @@
* {
margin: 0;
padding: 0;
- box-sizing: border-box;
-}
-
-h1,h2 {
- font-family: 'Rokkitt', serif;
}
ul {
- list-style-type: none;
+ list-style: none;
}
a {
@@ -17,120 +12,86 @@ a {
}
a:link {
- color: #E98074;
+ color: #FA3253;
}
a:visited {
- color: #E98074;
+ color: #FA3253;
}
a:hover {
- color: #E85A4F;
+ color: #FA3253;
+ text-decoration: underline;
}
html {
width: 100%;
height: 100%;
- background-image: url("images/marquam-gulch.jpg");
- background-size: cover;
- background-repeat: no-repeat;
}
body {
- background-color: rgba(234, 231, 220, 0.9);
+ background-color: rgb(234, 231, 220);
margin: auto;
- padding: 0 10px 10px 10px;
- border-radius: 0 0 5px 5px;
- max-width: 800px;
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
+ max-width: 600px;
font-family: 'Open Sans', sans-serif;
}
-.vertical {
- margin-top: 20px;
+#header {
+ margin-top: 1em;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
-h2 {
- border-bottom: thin solid #8E8D8A;
+#header nav {
+ align-self: center;
+}
+
+#introduction {
+ margin-left: 1em;
+ margin-bottom: 2em;
+ display: flex;
+ flex-direction: column;
}
-#columns {
- display: flex;
- flex-direction: row;
+#projects {
+ margin-bottom: 2em;
+ display: flex;
+ flex-direction: column;
}
-#left {
- width: 50%;
- padding-right: 10px;
- display: flex;
- flex-direction: column;
- flex: 1 1 auto;
+.project {
+ margin-left: 1em;
+ margin-bottom: 1em;
}
-#left #about img {
- max-width: 40%;
- border-radius: 50%;
- float: left;
- padding-right: 10px;
+.project p {
+ margin-left: 1em;
}
-#right {
- width: 50%;
- padding-left: 10px;
- display: flex;
- flex: 1 1 auto;
- justify-content: flex-end;
+#achievements {
+ margin-bottom: 2em;
+ display: flex;
+ flex-direction: column;
}
-#right #align {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+#achievements ul {
+ margin-left: 2em;
+ list-style-position: outside;
+ list-style-type: disc;
}
-#right ul li {
- margin-bottom: 10px;
+#achievements ul li {
+ margin-bottom: 1em;
}
-.indent {
- padding-left: 5px;
+#footer {
+ margin-bottom: 2em;
}
-@media only screen and (max-width: 820px)
+@media only screen and (max-width: 800px)
{
- html {
- width: auto;
- height: auto;
- }
-
body {
max-width: 400px;
- align-items: center;
- }
-
- .horizontal {
- width: 100%;
- }
-
- #columns {
- flex-direction: column;
- align-items: center;
- }
-
- #left {
- width: 100%;
- padding: 0;
- }
-
- #right {
- width: 100%;
- padding: 0;
- justify-content: flex-start;
- }
-
- #right #align {
- width: 100%
}
}
