M hugo-site/layouts/index.html → hugo-site/layouts/index.html

@@ -104,7 +104,7 @@ </div>
 
   </section>
 
-  <section id=projects>
+  <section id=projects class="page-section">
     <div class=container>
       <h1>Some of my works</h1>
       <div class="shadow-box">
@@ -123,16 +123,18 @@ </div>
     </div>
   </section>
 
-  <section id=projects>
+  <section id=writeups class="page-section">
     <div class=container>
       <h1>I also write about stuff</h1>
       <div class="shadow-box">
         <div class="project-text">
           {{ range sort (where .Site.RegularPages "Section" "posts") "Date" }}
+          <a href="{{ .RelPermalink }}" target="_blank">
             <div class="project-item">
               <h2>- {{ .Title }}</h2>
-              <p>{{ .Kind }}, {{ .Section }}<p>
+              <p>{{ .Date.Format "2 Jan 2006" }}<p>
             </div>
+          </a>
           {{ end }}
         </div>
         <!-- <div class=btn id=project-cta>View All</div> -->

M hugo-site/static/css/main.css → hugo-site/static/css/main.css

@@ -257,14 +257,33 @@ margin-top: 10rem;
     margin-bottom: 5rem;
 }
 
-#projects h1 {
+.page-section{
+    display: flex;
+    flex-flow: column;
+    margin-top: 10rem;
+    margin-bottom: 5rem;
+}
+
+#writeups a:hover{
+    color: #4ED44C
+}
+
+.page-section h1 {
     position: absolute;
-    top: -1.8rem;
-    left: -5rem;
-    z-index: 1;
     color: rgba(0,0,0,0.8);
     font-size: 2.4rem;
     text-shadow: 0 4px 7px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+#projects h1 {
+    top: -1.8rem;
+    left: -5rem;
+}
+
+#writeups h1 {
+    top: -1.8rem;
+    right: -7rem;
 }
 
 .project-text{
@@ -272,12 +291,19 @@ padding: 2rem 2rem;
     padding-top: 3.5rem;
 }
 
+.page-section h2 {
+    font-size: 1.4rem;
+}
+
 #projects h2 {
-    font-size: 1.4rem;
     color: #B554E3;
 }
 
-#projects p{
+#writeups h2 {
+    color: #4ED44C;
+}
+
+.page-section p{
     margin-left: 1.6rem;
     margin-bottom: 1rem;
 }