commit d0059aaa5dbf6a67e3c8534b184d7dd85163dd2e
parent a243ed6d373ce55559d806266048aa4d59bd1245
Author: Christian Ermann <christianermann@gmail.com>
Date: Fri, 12 Jun 2020 18:17:27 -0600
Restructured for easier styling
Diffstat:
| M | index.html | | | 84 | ++++++++++++++++++++++++++++++++++++++++++++++++------------------------------- |
| M | profile.jpg | | | 0 | |
| M | styles.css | | | 109 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- |
3 files changed, 132 insertions(+), 61 deletions(-)
diff --git a/index.html b/index.html
@@ -8,47 +8,65 @@
<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="about">
+ <div id="header" class="vertical horizontal">
<h1>Hi, I'm Christian!</h1>
- <img src="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. In addition to academics, I also compete
- on the L&C Men's Varsity Crew Team.</p>
- <p>You can contact me at <a href="mailto:christianermann@gmail.com">
- christianermann@gmail.com</a></p>
</div>
- <div id="right-column">
- <div id="projects">
- <h2>Check out my projects!</h2>
- <ul>
- <li>
- <a href="https://github.com/c2000e/Polygonize">Polygonize</a>
- <p>Evolve images with OpenGL</p>
- </li>
- <li>
- <a href="https://github.com/c2000e/c2000e.github.io">My Website</a>
- <p>See what's behind this webpage</p>
- </li>
- <li><a href="https://github.com/c2000e">All Projects</a></li>
- </ul>
+
+ <div id="columns">
+ <div id="left">
+ <div id="about" class="vertical">
+ <h2>About me:</h2>
+ <img src="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. In addition to academics, I also
+ compete on the L&C Men's Varsity Crew Team.</p>
+ </div>
</div>
-
- <div id="achievements">
- <h2>Education and Achievements</h2>
- <ul>
- <li>
- <p>Lewis & Clark College, Expected May 2022</p>
- <ul>
- <li>Bachelor of Arts in Physics</li>
- <li>Bachelor of Arts in Mathematics</li>
+
+ <div id="right">
+ <div id="align">
+ <div id="projects" class="vertical">
+ <h2>Check out my projects:</h2>
+ <ul>
+ <li>
+ <a href="https://github.com/c2000e/Polygonize">Polygonize</a>
+ <p class="indent">Evolve images with OpenGL</p>
+ </li>
+ <li>
+ <a href="https://github.com/c2000e/c2000e.github.io">
+ My Website
+ </a>
+ <p class="indent">See what's behind this webpage</p>
+ </li>
+ <li><a href="https://github.com/c2000e">All Projects</a></li>
+ </ul>
+ </div>
+
+ <div id="achievements" class="vertical">
+ <h2>Education and achievements:</h2>
+ <ul>
+ <li>
+ <p>Lewis & Clark College, Expected May 2022</p>
+ <ul>
+ <li class="indent">Bachelor of Arts in Physics</li>
+ <li class="indent">Bachelor of Arts in Mathematics</li>
+ </ul>
+ </li>
+ <li>Eagle Scout Award, 2016</li>
</ul>
- </li>
- <li>Eagle Scout Award, 2016</li>
- </ul>
+ </div>
+ </div>
</div>
</div>
+
+ <div id="footer" class="vertical horizontal">
+ <h2>Contact me:</h2>
+ <a href="christianermann@gmail.com">christianermann@gmail.com</a>
+ </div>
</body>
</html>
diff --git a/profile.jpg b/profile.jpg
Binary files differ.
diff --git a/styles.css b/styles.css
@@ -1,57 +1,110 @@
-@media only screen and (max-width: 800px) {
- body {
- flex-direction: column;
- align-items: center;
- }
-}
-
* {
+ background-color: #EAE7DC;
margin: 0;
padding: 0;
box-sizing: border-box;
}
+h1,h2 {
+ font-family: 'Rokkitt', serif;
+}
+
ul {
list-style-type: none;
}
-body {
- display: flex;
- justify-content: center;
+a {
+ text-decoration: none;
+}
+
+a:link {
+ color: #E98074;
}
-#about {
- max-width: 400px;
+a:visited {
+ color: #E98074;
+}
+
+a:hover {
+ color: #E85A4F;
+}
+
+body {
+ margin: auto;
+ max-width: 800px;
display: flex;
flex-direction: column;
- align-items: flex-start;
- flex: 1;
+ font-family: 'Open Sans', sans-serif;
+}
+
+.vertical {
+ margin-top: 20px;
+}
+
+#header {
}
-#about img {
- max-width: 50%;
- height: auto;
- align-self: center;
+h2 {
+ border-bottom: thin solid #8E8D8A;
}
-#right-column {
- max-width: 400px;
- width: 100%;
+#columns {
display: flex;
- flex-direction: column;
- flex: 1;
+ flex-direction: row;
}
-#projects {
+#left {
+ width: 50%;
display: flex;
flex-direction: column;
- align-items: flex-start;
flex: 1 1 auto;
}
-#achievements {
+#left #about img {
+ max-width: 40%;
+ border-radius: 50%;
+}
+
+#right {
+ width: 50%;
+ display: flex;
+ flex: 1 1 auto;
+ justify-content: flex-end;
+}
+
+#right #align {
display: flex;
flex-direction: column;
- align-items: flex-start;
- flex: 1 1 auto;
+ justify-content: space-between;
+}
+
+.indent {
+ padding-left: 5px;
+}
+
+#footer {
+}
+
+@media only screen and (max-width: 820px)
+{
+ body {
+ align-items: center;
+ }
+
+ .horizontal {
+ width: 50%;
+ }
+
+ #columns {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ #right {
+ justify-content: flex-start;
+ }
+
+ #right #align {
+ width: 100%
+ }
}
