Improve blog (#55)

* Update writing detail content padding and add bottom border

* Update article card styles and writing subtitle

* Add draft article

* Add border-radius to article card and adjust gap in article list

* Remove unnecessary margins in article card

* Add draft status to index.md

* Add animation to other work cards

src/assets/scripts/modules/animation.js

@@ -109,6 +109,12 @@ document.addEventListener("DOMContentLoaded", function () {
 		animateCardStagger(Array.from(nextProjectCard))
 	}
 
+	// Animation on other work cards
+	const writingCard = document.querySelectorAll(".article-card")
+	if (writingCard && writingCard.length > 0) {
+		animateCardStagger(Array.from(writingCard))
+	}
+
 	// Avoid flash of unstyled content
 	const textSplitElements = document.querySelectorAll("[text-split]")
 	if (textSplitElements && textSplitElements.length > 0) {

src/assets/styles/components/writing/_article-card.scss

@@ -4,11 +4,10 @@
 	overflow: hidden;
 	border: 1px solid var(--border-default);
 	background: var(--background-default);
-	margin-left: -1px;
-	margin-bottom: -1px;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	border-radius: $border-radius-16;
 
 	.article-date {
 		display: inline-flex;
@@ -35,6 +34,8 @@
 		a {
 			background: none;
 			text-decoration: none;
+			margin: 0;
+			padding: 0;
 
 			h5 {
 				margin: 0px;

src/assets/styles/components/writing/_header.scss

@@ -1,6 +1,7 @@
 .writing-detail {
 	&--content {
-		margin: 144px 0px 0px 0px;
+		padding: 144px 0px 64px 0px;
+		border-bottom: 1px solid var(--border-default);
 
 		@include mq-down(lg) {
 			margin: 64px 24px 0px 24px;

src/assets/styles/pages/_writing.scss

@@ -3,6 +3,10 @@
 		padding-bottom: 64px;
 	}
 
+	&--article-list {
+		gap: 24px;
+	}
+
 	&--content {
 		margin: 144px 0px;
 

src/assets/styles/utils/_variables.scss

@@ -135,3 +135,5 @@ $box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
 $box-shadow-elevated: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
 
 $border-radius-16: 1rem;
+$border-radius-12: 0.75rem;
+$border-radius-8: 0.5rem;

src/includes/writing/writing.njk

@@ -7,7 +7,7 @@
     <div class="writing--content">
         <div class="title">
             <h1>Writing</h1>
-            <p class="subtitle">Sharing things related to design, development, career, and personal</p>
+            <p class="subtitle">Sharing things related to design, development, career, and personal life.</p>
         </div>
 
         <r-grid columns="10" class="writing--article-list">
@@ -26,10 +26,10 @@
                         <div class="article-title">
                             <a href="{{ article.url }}">
                                 <h5>
-
                                     {{ article.data.title }}
                                 </h5>
                             </a>
+
                             <p class="description">{{ article.data.description }}</p>
                         </div>
                     </div>

src/pages/writing.njk

@@ -10,7 +10,7 @@ permalink: /writing/
 {% include "userinfo.njk" %}
 {% include "header.njk" %}
 
-<div class="container writing article-index">
+<div class="container writing">
     <r-grid columns="12" columns-s="4">
         {% include "writing/writing.njk" %}
     </r-grid>

src/writing/personal-website-refresh-2024/2024-04-19-index.md

@@ -0,0 +1,26 @@
+---
+title: Effortless Personal Website Refresh to Get Things Done Quickly
+description: Every new year, I tried to refresh my site. Let's take a look at the changes made to my personal website in 2024.
+tags: ["portfolio", "website", "development"]
+draft: true
+---
+
+Jika kamu sering berkunjung ke website ini atau sudah scroll hingga mentok, mungkin tidak asing kalau melihat bagian footer ada pilihan versi dari website ini. Ini jadi suatu kebiasaan tahunan bagiku untuk mengulik ulang bagaimana desain, tata letak, maupun teknologi yang aku gunakan. Karena tahun ini serasa longgar, aku punya waktu lebih untuk menggarap versi 2024. Hitung-hitung mengisi waktu luang ketika libur Ramadhan yang panjang.
+
+## Latar belakang
+
+Portfolio adalah assets yang penting untuk pekerja kreatif. Khususnya ketika kita ingin apply suatu pekerjaan. Bentuknya bisa bermacam-macam. Dari website, file PDF, atau bahkan versi cetak. Apapun medianya, yang terpenting bisa menjelaskan value kita untuk menerima suatu pekerjaan. Salah satu contoh portfolio yang mungkin bisa kita lihat adalah website ini. Website ini sering aku gunakan untuk meminang pekerjaan–walaupun tidak begitu lengkap isinya.
+
+Website merupakan media yang aku pilih karena sifat fleksibilitasnya. Fleksibel karena bukan hanya untuk portfolio saja, melainkan aku gunakan juga sebagai tempat untuk mengarsipkan dan menuliskan cerita. Tidak hanya itu, aku gunakan juga sebagai tempat bereksperimen dalam mempelajari teknologi pembangunan situs. Selain fleksibel sebagai media, fleksibel pula dalam aksesibilitasnya. Website dapat dengan mudah di akses dimanapun kita berada.
+
+## Tema dan teknologi tahun ini
+
+*Desain situs di Figma*
+
+*Gambar layar VS Code*
+
+## Alur proses perancangan situs
+
+## Making it open source
+
+*Repository website di GitHub*