feat: add more works/experiences and changes some UI

package.json

@@ -23,6 +23,7 @@
     "typescript": "^5.4.3"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.12",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0"
   }

src/components/BlogContent.astro

@@ -1,51 +1,12 @@
 ---
-// @ts-expect-error no types for this dependencies
-import MarkdownIt from "markdown-it";
-// @ts-expect-error no types for this dependencies
-import texmath from "markdown-it-texmath";
-// @ts-expect-error no types for this dependencies
-import katex from "katex";
-import hljs from "highlight.js";
-// @ts-expect-error no types for this dependencies
-import hljs_svelte from "highlightjs-svelte";
+import markdown from "./markdown";
 import "highlight.js/styles/tomorrow-night-bright.css";
 import "katex/dist/katex.min.css";
 
 type Props = { body: string };
 
 const { body } = Astro.props;
 
-hljs_svelte(hljs);
-const markdown: MarkdownIt = MarkdownIt({
-  html: true,
-  breaks: false,
-  highlight: (str: string, lang: string) => {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return (
-          `<pre class="hljs relative"><u class="absolute top-1 right-2 rounded-md">${lang}</u><code>` +
-          hljs.highlight(str, {
-            language: lang,
-            ignoreIllegals: true,
-          }).value +
-          "</code></pre>"
-        );
-      } catch (e) {
-        console.log(e);
-      }
-    }
-    return (
-      '<pre class="hljs"><code>' +
-      markdown.utils.escapeHtml(str) +
-      "</code></pre>"
-    );
-  },
-});
-
-markdown.use(texmath, {
-  engine: katex,
-});
-
 const content = markdown.render(body);
 ---
 

src/components/Collapsible.astro

@@ -19,7 +19,7 @@
   <div class="card-header">
     <slot name="header" />
   </div>
-  <div class="card-body notshown">
+  <div class="card-body">
     <slot name="body" />
   </div>
 </div>
@@ -33,10 +33,10 @@
   .card-body {
     overflow: hidden;
     max-height: 0;
-    transition: max-height 0.2s ease-out;
+    transition: max-height 0.4s ease-out;
   }
 
   .shown {
-    max-height: min(200px, 100vh); /* need to set this responsively */
+    max-height: 500px;
   }
 </style>

src/components/markdown.ts

@@ -0,0 +1,43 @@
+// @ts-expect-error no types for this dependencies
+import MarkdownIt from "markdown-it";
+// @ts-expect-error no types for this dependencies
+import texmath from "markdown-it-texmath";
+// @ts-expect-error no types for this dependencies
+import katex from "katex";
+import hljs from "highlight.js";
+// @ts-expect-error no types for this dependencies
+import hljs_svelte from "highlightjs-svelte";
+
+
+hljs_svelte(hljs);
+const markdown: MarkdownIt = MarkdownIt({
+  html: true,
+  breaks: false,
+  highlight: (str: string, lang: string) => {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return (
+          `<pre class="hljs relative"><u class="absolute top-1 right-2 rounded-md">${lang}</u><code>` +
+          hljs.highlight(str, {
+            language: lang,
+            ignoreIllegals: true,
+          }).value +
+          "</code></pre>"
+        );
+      } catch (e) {
+        console.log(e);
+      }
+    }
+    return (
+      '<pre class="hljs"><code>' +
+      markdown.utils.escapeHtml(str) +
+      "</code></pre>"
+    );
+  },
+});
+
+markdown.use(texmath, {
+  engine: katex,
+});
+
+export default markdown;

src/content/config.ts

@@ -14,7 +14,8 @@ const blog = defineCollection({
 const works = defineCollection({
   type: 'data',
   schema: z.object({
-    year: z.number(),
+    start: z.optional(z.coerce.date()),
+    end: z.coerce.date(),
     title: z.string(),
     tags: z.array(z.string()),
     body: z.string(),

src/content/works/airwareness.yaml

@@ -0,0 +1,11 @@
+end: March 2023
+title: A(ir)Wareness Application
+tags:
+  - Mobile
+  - Flutter
+links:
+  - href: https://github.com/AreYouWorking/Air-pollution-awareness
+    text: Code
+body: >-
+  Write a Flutter application for taking picture to add 
+  and air quality information overlay similar to how Instagram work.

src/content/works/amityintern.yaml

@@ -1,4 +1,5 @@
-year: 2023
+start: May 2023
+end: October 2023
 title: Backend Intern @ Amity
 tags:
   - Backend
@@ -9,5 +10,9 @@ links:
       https://riwez.github.io/TanatBlog/blog/my-experiences-as-an-backend-intern-@-amity/
     text: Blog
 body: >-
-  My role involves maintaining the current system and developing a new feature
-  using MoleculerJS, AWS Lambda, MongoDB, and other relevant technologies.
+  As a backend intern at Amity, my role involves <br>
+    - Developing a new feature using MoleculerJS (JavaScript microservice framework), AWS Lambda, 
+    MongoDB and other relevant technologies. <br>
+    - Fixing any bugs that customers raised or we've found <br>
+    - Technical debts work such as dependencies update, improving unit test <br>
+    - Any other miscellaneous tasks e.g. prepare for knowledge sharing session <br>

src/content/works/compiler.yaml

@@ -0,0 +1,7 @@
+end: Febuary 2024
+title: Compiler for Basic Functional Language
+tags:
+  - Compiler
+  - OCaml
+body: >-
+  Write a compiler using menhir and OCaml to compile a basic functional language from compiler class.

src/content/works/fuzzy.yaml

@@ -0,0 +1,13 @@
+start: December 2022
+end: March 2024
+title: Fuzzy Logic in Market Trading Decision Support System
+tags:
+  - Backend
+  - Fuzzy Logic
+  - Rust
+body: >-
+  My bachelor's thesis about how we can improve the effectiveness of various technical indicators 
+  in trading by using fuzzy logic, particle swarm optimization and other statistical methods. 
+  I'm involves in developing
+    - Backend using Actix on Rust.
+    - Frontend using SvelteKit.

src/content/works/icpc.yaml

@@ -0,0 +1,9 @@
+end: December 2023
+title: Participated in ICPC Hue City Regional Contest 2023
+tags:
+  - Competitve Programming
+  - Python
+body: >-
+  Participated in ACM ICPC Hue City Regional Contest 2023 which is 
+  an algorithmic programming contest for college students.
+

src/content/works/ieeextreme.yaml

@@ -0,0 +1,9 @@
+end: October 2023
+title: 877th world ranking on IEEEXtreme 17
+tags:
+  - Competitve Programming
+  - Python
+body: >-
+  IEEEXtreme is a global challenge in which teams of IEEE Student members compete 
+  in a 24-hour time span against each other to solve a set of programming problems. 
+  I joined this event and got 877th world ranking and 1st in Thailand ranking.

src/content/works/kibo2021.yaml

@@ -1,9 +1,9 @@
-year: 2021
+end: June 2021
 title: 8th place team on Kibo RPC 2021 (Lynx)
 tags:
-  - Space
-  - Java
   - Robot
+  - Java
+  - Space
 links:
   - href: https://www.nstda.or.th/spaceeducation/kibo-rpc-2021-20-final-list/
     text: Result

src/content/works/kibo2022.yaml

@@ -1,9 +1,9 @@
-year: 2022
+end: June 2022
 title: 3rd place team on Kibo RPC 2022 (Lynx)
 tags:
-  - Space
-  - Java
   - Robot
+  - Java
+  - Space
 links:
   - href: https://www.nstda.or.th/spaceeducation/3rd-kibo-rpc-score/
     text: Score Result

src/content/works/kitkat.yaml

@@ -0,0 +1,12 @@
+end: March 2022
+title: KitKatCarin (LITIENGINE based Java game)
+tags:
+  - Game
+  - Java
+body: >-
+    - A simulation game where the player has to bring antibodies to battle viruses. 
+    Both of them act according to a specific genetic code. Genetic code can be determined using 
+    a specific grammar.
+
+    - Use Java to create a game based on LITIENGINE, by writing game state management logic, 
+    a parser for antibodies and viruses genetic code, and more game related things.

src/content/works/mlpinrust.yaml

@@ -1,8 +1,8 @@
-year: 2022
+end: November 2022
 title: Basic Machine Learning On Rust
 tags:
-  - Rust
   - AI
+  - Rust
 links:
   - href: https://github.com/RiwEZ/MLPOnRust
     text: MLP Repo

src/layouts/MainLayout.astro

@@ -40,6 +40,22 @@ const { title, description } = Astro.props;
     >
       <Nav />
       <slot />
+      <div class="flex justify-center items-center space-x-2 mt-8 mb-4">
+        <p>( ͡° ͜ʖ ͡°)</p>
+        <p>Tanat Tangun</p>
+        <svg viewBox="0 0 72 72" width="32px" xmlns="http://www.w3.org/2000/svg"
+          ><path d="m5 17h62v38h-62z" fill="#fff"></path><path
+            d="m5 30h62v12h-62z"
+            fill="#1e50a0"></path><path d="m5 50h62v5h-62z" fill="#d22f27"
+          ></path><path d="m5 17h62v5h-62z" fill="#d22f27"></path><path
+            d="m5 17h62v38h-62z"
+            fill="none"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"></path></svg
+        >
+      </div>
     </div>
   </body>
 </html>

src/pages/about/index.astro

@@ -2,8 +2,12 @@
 import { getCollection } from "astro:content";
 import MainLayout from "../../layouts/MainLayout.astro";
 import Collapsible from "../../components/Collapsible.astro";
+import markdown from "../../components/markdown";
 
-const works = (await getCollection("works")).sort((a, b) => b.data.year - a.data.year);
+const works = (await getCollection("works"))
+  .sort((a, b) => b.data.end.valueOf() - a.data.end.valueOf());
+
+const formatOptions = { year: 'numeric', month: 'short' };
 ---
 
 <MainLayout title="About | Tanat" description="About page">
@@ -25,12 +29,12 @@ const works = (await getCollection("works")).sort((a, b) => b.data.year - a.data
       <a
         target="_blank"
         href="https://www.linkedin.com/in/tanat-tangun-46b38a201/"
-        class="hover:text-blue-600">Linkedin</a
+        class="hover:text-blue-600">LinkedIn</a
       >
       <a href="mailto:[email protected]">[email protected]</a>
     </div>
 
-    <h1 class="mt-10 text-2xl font-semibold">Some of my works</h1>
+    <h1 class="mt-10 text-2xl font-semibold">Some of my works/experiences</h1>
     <div class="mt-6 flex flex-col space-y-4">
       {
         works.map((work) => (
@@ -41,6 +45,11 @@ const works = (await getCollection("works")).sort((a, b) => b.data.year - a.data
             >
               <div>
                 <h1 class="text-xl">{work.data.title}</h1>
+                <h2 class="text-white/[.8]">
+                  {work.data.start 
+                  && work.data.start.toLocaleDateString('en-US', formatOptions) + ' - '}
+                  {work.data.end.toLocaleDateString('en-US', formatOptions)}
+                </h2>
                 <div class="mt-2 flex flex-shrink space-x-2">
                   {work.data.tags.map((tag) => (
                     <div
@@ -93,7 +102,9 @@ const works = (await getCollection("works")).sort((a, b) => b.data.year - a.data
                   ))}
                 </div>
               }
-              <p>{work.data.body}</p>
+              <div class="prose prose-zinc dark:prose-invert pt-1">
+                <Fragment set:html={markdown.render(work.data.body)}/>
+              </div>
             </div>
           </Collapsible>
         ))

tailwind.config.mjs

@@ -4,5 +4,7 @@ export default {
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }