feat(index): simplify home page with pastel tag colors (#67)

* feat(index): simplify home page with pastel tag colors - Font size now uniform to 100% of HTML tag - Listing of email and contact info rather than `more information below` - Pastel tags on headings and in-page links Next: homepage modifiers
ayazhafiz · Aug 17, 2019 · 0e88ee6 · 0e88ee6
1 parent cbb5067
commit 0e88ee6
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 95 deletions.
diff --git a/src/build/index.scss b/src/build/index.scss
@@ -23,25 +23,7 @@ body {
 }
 
 html {
-  font-size: 15px;
-}
-
-@media screen and (min-width: 350px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-@media screen and (min-width: 900px) {
-  html {
-    font-size: 17px;
-  }
-}
-
-@media screen and (min-width: 1000px) {
-  html {
-    font-size: 18px;
-  }
+  font-size: 100%;
 }
 
 body {
@@ -63,6 +45,10 @@ body {
     > {
       p {
         margin: 0;
+
+        &.margin-1 {
+          margin-bottom: 1em;
+        }
       }
     }
   }
@@ -75,6 +61,7 @@ code {
 section {
   display: flex;
   flex-direction: column-reverse;
+  width: 90%;
 
   .section-img {
     background-image: url('/img/self.jpg');
@@ -393,7 +380,10 @@ h3 {
   margin-bottom: 0;
 
   &:hover {
-    color: $h3-section-hover-color;
+    .hash {
+      color: $link-color;
+      opacity: 1;
+    }
   }
 
   .hash {
@@ -411,7 +401,8 @@ small {
 
 a,
 b,
-h3 {
+h3,
+.name-line {
   font-weight: 400;
 }
 
@@ -422,6 +413,8 @@ small {
 }
 
 a {
+  cursor: pointer;
+
   &,
   &:active,
   &:hover,
@@ -440,11 +433,14 @@ a {
   }
 
   &.pgp {
-    color: $black;
     font-family: $code-font;
-    font-size: 0.7em;
-    opacity: 0.2;
+    font-size: 0.8em;
     text-decoration: none;
+
+    &:not(:hover) {
+      color: $black;
+      opacity: 0.2;
+    }
   }
 }
 
@@ -463,6 +459,28 @@ img {
   }
 }
 
+@mixin title-backgrounds($args...) {
+  @each $name, $color in keywords($args) {
+    &.#{$name} {
+      background: $color;
+    }
+  }
+}
+@include title-backgrounds(
+  $pastel-blue: rgb(200, 215, 234),
+  $pastel-purple: rgb(210, 201, 234),
+  $pastel-yellow: rgb(236, 225, 203),
+  $pastel-red: rgb(238, 201, 200),
+  $pastel-green: rgb(202, 217, 213),
+  $pastel-orange: rgb(237, 212, 200)
+);
+
+.tag {
+  border-radius: 0.25em;
+  font-weight: 300;
+  padding: 0.25em 0.5em;
+}
+
 .quasi {
   @mixin content-values($normal, $hover) {
     &::before {
@@ -481,7 +499,10 @@ img {
 
   &.name {
     &.en {
-      @include content-values('Ayaz', 'hafiz');
+      @include content-values('Ayaz Hafiz', 'hafiz');
+      display: inline-block;
+      line-height: 1em;
+      width: 5em;
     }
 
     &.ru {
@@ -581,7 +602,10 @@ input {
   }
 
   &:checked ~ label > h3 {
-    color: $h3-section-opened-color;
+    .hash {
+      color: $link-color;
+      opacity: 1;
+    }
   }
 }
 
@@ -854,15 +878,15 @@ p {
       }
 
       &.work {
-        max-height: 30em;
+        max-height: 42em;
       }
 
       &.about {
-        max-height: 25em;
+        max-height: 30em;
       }
 
       &.links {
-        max-height: 20em;
+        max-height: 25em;
       }
     }
   }

diff --git a/src/build/index.ts b/src/build/index.ts
@@ -1,16 +1,17 @@
-import { $, $$ } from '../ts/util/el';
-import { polyfill as invokePolyfill } from 'smoothscroll-polyfill';
-
 import './index.scss';
 
+import {polyfill as invokePolyfill} from 'smoothscroll-polyfill';
+
+import {$, $$} from '../ts/util/el';
+
 (window as any).__forceSmoothScrollPolyfill__ = true;
 invokePolyfill();
 
 function scrollIntoView(this: HTMLInputElement) {
   if (this.checked) {
     setTimeout(
-      () => $(`#${this.name}`).scrollIntoView({ behavior: 'smooth' }),
-      50,
+        () => $(`#${this.name}`).scrollIntoView({behavior: 'smooth'}),
+        50,
     );
   }
 }
@@ -20,11 +21,19 @@ function toggleQuasiText(this: HTMLElement) {
 }
 
 (() => {
-  $$('.quasi').forEach((q) =>
-    ['touchstart', 'touchend'].forEach((e) =>
-      q.addEventListener(e, toggleQuasiText),
-    ),
+  // Toggle quasi text on touch events.
+  $$('.quasi').forEach(
+      (q) => ['touchstart', 'touchend'].forEach(
+          (e) => q.addEventListener(e, toggleQuasiText),
+          ),
   );
 
+  // Open each section when it is clicked.
   $$('input').forEach((i) => i.addEventListener('change', scrollIntoView));
+
+  // Open sections when data links to them are clicked.
+  $$('[data-open]').forEach(link => {
+    const targetStr = `#${link.dataset['open']}`;
+    link.addEventListener('click', () => $(`${targetStr} label`).click());
+  });
 })();
diff --git a/src/scss/base/vars.scss b/src/scss/base/vars.scss
@@ -16,7 +16,7 @@ $base-break: 767px;
 
 $base-font: Quicksand;
 $code-font: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
-$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+$system-font: sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
   'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
   'Segoe UI Emoji', 'Segoe UI Symbol';
 

diff --git a/src/util/index.cr b/src/util/index.cr
@@ -10,55 +10,38 @@ module Util::Index
   }
 
   HEADER = {
-    intro: {
+    info: {
       "en" => <<-HTML,
-              <p> Hey! I'm <span class="quasi name en"></span>.
-                  I am a CS/Chemistry undergrad at
-                  <a href="https://vanderbilt.edu">Vanderbilt</a>
-                  and an <a href="https://angular.io">Angular</a>
-                  contributor.
+              <p class="name-line margin-1"><span class="quasi name en"></span></p>
+              <p>
+                  Hi! I'm a CS/Chemistry undergrad at
+                  <a href="https://vanderbilt.edu">Vanderbilt</a>.
+                  Previously, I
+                  <a class="tag pastel-purple" data-open="work">worked</a>
+                  on Angular and TypeScript at Google.
+              </p>
+              <p class="margin-1">
+                  My current interests are in compilers, language tools, and systems software. I am
+                  an active open-source contributor, especially to
+                  <a href="https://github.com/angular/angular">Angular</a>.
+              </p>
+              <p>
+                  The best way to reach me is via
+                  <a href="mailto:ayaz.hafiz.1@gmail.com?subject=Hi!">email</a>.
+                  More contact information can be found
+                  <a class="tag pastel-yellow" data-open="links">below</a>.
               </p>
               HTML
       "ru" => <<-HTML,
-              <p> Здрасьте! Я <span class="quasi name ru"></span>.
+              <p>
+                  Здрасьте! Я <span class="quasi name ru"></span>.
                   Я создаю вещи, пока в
                   <a href="https://vanderbilt.edu">Vanderbilt</a>,
                   где моя учеба концентрируются в <span class="quasi major ru"></span>
               </p>
-              HTML
-    },
-    future: {
-      "en" => <<-HTML,
-              <p> My interest is in
-                  <b>compilers and language tools</b>. I previously
-                  <a href="https://cc.ayazhafiz.com/articles/19/what-i-did-this-summer">worked</a>
-                  at Google in this domain.
-              </p>
-              HTML
-      # <<-HTML,
-      # <p> My social and developmental interests are in
-      #     diversification and
-      #     <a href="https://en.wikipedia.org/wiki/Ownership_(psychology)">ownership</a>.
-      # </p>
-      # HTML
-      "ru" => <<-HTML,
-              <p> Я инженер-кода. Мой текущий фокус на
-              <b>языках и разработке компиляторов</b>.
-              </p>
-              HTML
-    },
-    learn_more: {
-      "en" => <<-HTML,
-              <p> Below, you can
-                  <span class="quasi expand en"></span> my experiences. To get started,
-                  <a href="/?ui">here's a feel for my style</a>.
-              </p>
-              HTML
-      "ru" => <<-HTML,
-              <p> Работа сильнее слов. По этой причине, ниже вы можете
-                  <span class="quasi expand ru"></span> вещей с чем я занимаюсь
-                  (и увидете кто я такой). Для начала,
-                  <a href="/?ui">вот мой стиль</a>.
+              <p>
+                  Я инженер-кода. Мой текущий фокус на
+                  <b>языках и разработке компиляторов</b>.
               </p>
               HTML
     },

diff --git a/tslint.json b/tslint.json
@@ -129,7 +129,7 @@
     "no-string-based-set-immediate": true,
     "no-string-based-set-interval": true,
     "no-string-based-set-timeout": true,
-    "no-string-literal": true,
+    "no-string-literal": false,
     "no-string-throw": true,
     "no-suspicious-comment": true,
     "no-switch-case-fall-through": true,

diff --git a/views/head/meta.ecr b/views/head/meta.ecr
@@ -1,5 +1,5 @@
 <meta charset="utf-8" />
-<meta name="description" content="Hey! I'm Ayaz. I make stuff, usually related
+<meta name="description" content="Hi! I'm Ayaz. I make stuff, usually related
 to Computer Science or Chemistry. This is my public homepage." />
 
 <meta name="keywords" content="hafiz" />

diff --git a/views/pages/index.ecr b/views/pages/index.ecr
@@ -1,10 +1,7 @@
 <div class="content">
-<section>
+  <section>
     <div class="section-text">
-      <%= HEADER[:intro][render_lang] %>
-      <%= HEADER[:future][render_lang] %>
-      <br />
-      <%= HEADER[:learn_more][render_lang] %>
+      <%= HEADER[:info][render_lang] %>
     </div>
     <% # experiment/self-image-placement
     %>
@@ -21,8 +18,10 @@
   <div id="<%= PARTIAL[:section][0][:tag]["en"] %>" class="tab">
     <input id="tab-0" type="checkbox" name="<%= PARTIAL[:section][0][:tag]["en"] %>">
     <label for="tab-0"><h3><span class="hash">###</span>
-      <%= PARTIAL[:section][0][:tag][render_lang].capitalize %>
-      <%= Util::Emoji.render PARTIAL[:section][0][:emoji], native_display: apple %>
+      <span class="title tag pastel-blue">
+        <%= PARTIAL[:section][0][:tag][render_lang].capitalize %>
+        <span class="temoji"><%= Util::Emoji.render PARTIAL[:section][0][:emoji], native_display: apple %></span>
+      </span>
     </h3></label>
     <div class="tab-content <%= PARTIAL[:section][0][:tag]["en"] %>">
       <%= render {{ PARTIAL[:section][0][:view] }} %>
@@ -32,8 +31,10 @@
   <div id="<%= PARTIAL[:section][1][:tag]["en"] %>" class="tab">
     <input id="tab-1" type="checkbox" name="<%= PARTIAL[:section][1][:tag]["en"] %>">
     <label for="tab-1"><h3><span class="hash">###</span>
-      <%= PARTIAL[:section][1][:tag][render_lang].capitalize %>
-      <%= Util::Emoji.render PARTIAL[:section][1][:emoji], native_display: apple %>
+      <span class="title tag pastel-purple">
+        <%= PARTIAL[:section][1][:tag][render_lang].capitalize %>
+        <span class="temoji"><%= Util::Emoji.render PARTIAL[:section][1][:emoji], native_display: apple %></span>
+      </span>
     </h3></label>
     <div class="tab-content <%= PARTIAL[:section][1][:tag]["en"] %>">
       <%= render {{ PARTIAL[:section][1][:view] }} %>
@@ -43,8 +44,10 @@
   <div id="<%= PARTIAL[:section][2][:tag]["en"] %>" class="tab">
     <input id="tab-2" type="checkbox" name="<%= PARTIAL[:section][2][:tag]["en"] %>">
     <label for="tab-2"><h3><span class="hash">###</span>
-      <%= PARTIAL[:section][2][:tag][render_lang].capitalize %>
-      <%= Util::Emoji.render PARTIAL[:section][2][:emoji], native_display: apple %>
+      <span class="title tag pastel-orange">
+        <%= PARTIAL[:section][2][:tag][render_lang].capitalize %>
+        <span class="temoji"><%= Util::Emoji.render PARTIAL[:section][2][:emoji], native_display: apple %></span>
+      </span>
     </h3></label>
     <div class="tab-content <%= PARTIAL[:section][2][:tag]["en"] %>">
       <%= render {{ PARTIAL[:section][2][:view] }} %>
@@ -54,8 +57,10 @@
   <div id="<%= PARTIAL[:section][3][:tag]["en"] %>" class="tab">
     <input id="tab-3" type="checkbox" name="<%= PARTIAL[:section][3][:tag]["en"] %>">
     <label for="tab-3"><h3><span class="hash">###</span>
-      <%= PARTIAL[:section][3][:tag][render_lang].capitalize %>
-      <%= Util::Emoji.render PARTIAL[:section][3][:emoji], native_display: apple %>
+      <span class="title tag pastel-yellow">
+        <%= PARTIAL[:section][3][:tag][render_lang].capitalize %>
+        <span class="temoji"><%= Util::Emoji.render PARTIAL[:section][3][:emoji], native_display: apple %></span>
+      </span>
     </h3></label>
     <div class="tab-content <%= PARTIAL[:section][3][:tag]["en"] %>">
       <%= render {{ PARTIAL[:section][3][:view] }} %>