Redesign website to minimal homepage

calling · Oct 29, 2023 · 2780b6b · 2780b6b
1 parent 000a6f7
commit 2780b6b
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 418 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,6 @@ Personal Website
 
 Install docker and docker-compose
 
-```
+```bash
 docker-compose up
 ```
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        {% if page.layout == 'home' %}
+        <title>{{ page.title }}</title>
+        {% else %}
         <title>{{ page.title }} | {{ site.name }}</title>
+        {% endif %}
         <meta name="viewport" content="width=device-width, initial-scale=1" >
         {% if page.description %}
         <meta name="description" content="{{ page.description }}">
@@ -19,25 +23,9 @@
 
     </head>
     <body>
-
-      <div class="header">
-        <a class="title" href="/">{{ site.name }}</a>
-        <ul class="nav">
-          {% for p in site.data.header %}
-            <li>
-              <!-- Activate tab if the url matches or if tab is blog and page is a post -->
-              <a
-                {% if p.url == page.url or p.title == "Blog" and page.id %} class="active" {% endif %}
-                href="{{p.url}}">{{p.title}}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      </div>
-
       <div class="content">
         {{ content }}
       </div>
-
       <script src="/scripts/google-analytics.js" async></script>
     </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<div class="home">
+  {{ content }}
+</div>
diff --git a/_layouts/page.html b/_layouts/page.html
diff --git a/index.md b/index.md
@@ -1,7 +1,13 @@
 ---
-layout: page
-title: "About"
-description: "Home page"
+title: "Colin Chang - Software Engineering Manager"
+layout: "home"
+description: "Colin Chang's personal website"
 ---
 
-My name is Colin Chang and I'm based in Brookyln, NY. I'm happy to discuss professional topics via [LinkedIn](https://www.linkedin.com/in/colinichang/) or personal topics via email at colin at colinchang.org.
+# Colin Chang
+
+Software Engineering Manager
+
+- [LinkedIn](https://www.linkedin.com/in/colinichang/)
+- [Github](https://github.com/calling)
+- colin at colinchang dot org
diff --git a/now.md b/now.md
diff --git a/styles/main.scss b/styles/main.scss
@@ -2,50 +2,29 @@
 layout: none
 ---
 
-$font: Helvetica;
-
-$padding: 10px;
-
-$break-small: 450px;
-
-@mixin rounded-corners {
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px; /* future proofing */
-  -khtml-border-radius: 10px; /* for old Konqueror browsers */
-}
-
-:root {
-  --gray-text-color: #808080;
-  --header-color: #7794a6;
-  --post-color: #93b3bf;
-}
-
 /* Light mode */
 @media (prefers-color-scheme: light) {
   :root {
-    --body-bg: #f2f2f2;
-    --body-color: #3d3e40;
-    --header-color: #93b3bf;
-    --link-color: #7794a6;
-    --visited-link-color: #7794a6;
+    --body-bg: #f4f4f4;
+    --body-color: #333333;
+    --link-color: #0066b2;
+    --visited-link-color: #7f4982;
   }
 }
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   :root {
-    --body-bg: #3d3e40;
-    --body-color: #f2f2f2;
-    --header-color: #7794a6;
-    --link-color: #93b3bf;
-    --visited-link-color: #7794a6;
+    --body-bg: #1e1e1e;
+    --body-color: #eaeaea;
+    --link-color: #3399ff;
+    --visited-link-color: #b066b0;
   }
 }
 
 html,
 body {
-  font: 300 100% $font;
+  font-family: Verdana;
   background: var(--body-bg);
   color: var(--body-color);
 }
@@ -63,128 +42,19 @@ a {
   }
 }
 
-.header,
-.content,
-.footer {
-  padding: $padding;
-}
-
-.content,
-.header > *,
-.footer > * {
-  max-width: 700px;
-  margin: 0 auto;
-}
-
 .content {
-  line-height: 1.6;
-
-  blockquote {
-    background: #f9f9f9;
-    border-left: 10px solid #ccc;
-    margin: 1.5em 10px;
-    padding: 0.5em 10px;
-    quotes: "\201C""\201D""\2018""\2019";
-  }
-}
-
-.pagination {
-  text-align: center;
-}
-
-.highlight {
-  padding: $padding;
-  @include rounded-corners;
-}
-
-ul.posts {
-  list-style-type: none;
-  padding: 0;
-
-  h2 {
-    font-size: 1.25em;
-    margin: 0;
-  }
-}
-
-li.post-let {
-  background-color: var(--post-color);
-  padding: $padding;
-  margin: 10px;
-  @include rounded-corners;
+  padding: 10px;
+  line-height: 1.5;
 }
 
-.excerpt {
-  padding: 0 5% 0 5%;
+.home {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+  margin-top: 10px;
 }
 
-.previous {
-  float: left;
-}
-
-.next {
-  float: right;
-}
-
-.clearfix:after {
-  content: ".";
-  visibility: hidden;
-  display: block;
-  height: 0;
-  clear: both;
-}
-
-#now {
-  time {
-    padding: 0 $padding 0 0;
-    white-space: nowrap;
-  }
-  .title {
-    display: inline;
-    @media screen and (max-width: $break-small) {
-      display: block;
-      padding: 0 0 0 $padding;
-    }
-  }
-  h2 {
-    display: inline-block;
-    padding: 0 $padding 0 0;
-  }
-}
-
-.dust {
-  font-size: x-small;
-  color: var(--gray-text-color);
-}
-
-.header {
-  background-color: var(--header-color);
-
-  .title {
-    display: block;
-    font-size: 32px;
-  }
-
-  a {
-    text-decoration: none;
-    color: #000000;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  ul.nav {
-    list-style-type: none;
-    padding: 0;
-  }
-
-  li {
-    font-size: 120%;
-    display: inline;
-    text-transform: lowercase;
-
-    .active {
-      font-weight: bold;
-    }
-  }
+.home > * {
+  margin: 0;
 }