chore: updated content

components/Home/Main.tsx

@@ -41,7 +41,7 @@ function Home() {
         </div>
 
         <p class="text-base py-2 md:w-2/3">
-          Not a CS student, don't work in IT industry, but most of the time I do web development. Always love to be working on a cool project 😉
+          Not a CS student, yet currently working in the IT industry, but most of the time I do web development. Always love to be working on a cool project 😉
         </p>
 
         <div class="text-sm py-2 lg:pt-8 lg:pb-0 hidden md:block">

components/Home/Projects.tsx

@@ -1,24 +1,48 @@
-import { For } from 'solid-js';
+import { createSignal, For, Show } from 'solid-js';
 import projects from '../../config/projects';
 import ProjectCard from '../Project';
 
 function Projects() {
+  const [toggleLibrary, setToggleLibrary] = createSignal<boolean>(false);
+  const libraryProjects = projects.filter(project => project.type === 'library');
+  const moreLibraries = libraryProjects.slice(6);
+
+  const [toggleApplication, setToggleApplication] = createSignal<boolean>(false);
+  const applicationProjects = projects.filter(project => project.type === 'application');
+  const moreApplications = applicationProjects.slice(6);
+
   return (
     <>
       <section id="projects">
         <div><h2 class="text-3xl font-bold py-2">Library</h2></div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
-          <For each={projects.filter(o => o.type === 'library')}>
+          <For each={libraryProjects.slice(0, 6)}>
             {project => <ProjectCard {...project} />}
           </For>
+          <Show when={moreLibraries.length > 0}>
+            <Show when={toggleLibrary()} fallback={<div onClick={() => setToggleLibrary(true)} class="text-center py-4 w-full cursor-pointer self-center">See more libraries</div>}>
+              <For each={moreLibraries}>
+                {project => <ProjectCard {...project} />}
+              </For>
+              <div onClick={() => setToggleLibrary(false)} class="text-center py-4 w-full cursor-pointer self-center">Show less libraries</div>
+            </Show>
+          </Show>
         </div>
       </section>
       <section>
         <div><h2 class="text-3xl font-bold py-2">Application</h2></div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
-          <For each={projects.filter(o => o.type === 'application')}>
+          <For each={applicationProjects.slice(0, 6)}>
             {project => <ProjectCard {...project} />}
           </For>
+          <Show when={moreApplications.length > 0}>
+            <Show when={toggleApplication()} fallback={<div onClick={() => setToggleApplication(true)} class="text-center py-4 w-full cursor-pointer self-center">See more applications</div>}>
+              <For each={moreApplications}>
+                {project => <ProjectCard {...project} />}
+              </For>
+              <div onClick={() => setToggleApplication(false)} class="text-center py-4 w-full cursor-pointer self-center">Show less applications</div>
+            </Show>
+          </Show>
         </div>
       </section>
 

config/projects.ts

@@ -158,6 +158,51 @@ const projects: Project[] = [
     repository: 'https://github.com/teknologi-umum/manusier',
     role: 'author',
   },
+  {
+    id: 20,
+    type: 'library',
+    stack: ['go'],
+    title: 'Asciitxt',
+    description: 'Create ASCII-styled text from a given string',
+    repository: 'https://github.com/aldy505/asciitxt',
+    role: 'author',
+  },
+  {
+    id: 21,
+    type: 'application',
+    stack: ['go', 'postgresql', 'mongodb', 'docker', 'sentry'],
+    title: 'Captcha Bot',
+    description: 'Secure and concurrent-safe captcha bot for Teknologi Umum group',
+    repository: 'https://github.com/teknologi-umum/captcha',
+    role: 'author',
+  },
+  {
+    id: 22,
+    type: 'library',
+    stack: ['go'],
+    title: 'Cheapcash',
+    description: 'SSD utilized as a cheap cache storage',
+    repository: 'https://github.com/aldy505/cheapcash',
+    role: 'author',
+  },
+  {
+    id: 23,
+    type: 'library',
+    stack: ['go'],
+    title: 'Decrr',
+    description: 'Error decorator that returns native error type in Go',
+    repository: 'https://github.com/aldy505/decrr',
+    role: 'author',
+  },
+  {
+    id: 23,
+    type: 'application',
+    title: 'add-editorconfig',
+    stack: ['rust'],
+    description: 'Small and simple CLI app to generate .editorconfig based on a given settings',
+    repository: 'https://github.com/aldy505/add-editorconfig',
+    role: 'author',
+  },
 ];
 
 export default projects;

package.json

@@ -23,28 +23,28 @@
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/poppins": "^4.5.0",
     "animejs": "^3.2.1",
-    "marked": "^3.0.7",
+    "marked": "^4.0.6",
-    "solid-app-router": "^0.1.9",
+    "solid-app-router": "^0.1.14",
-    "solid-js": "^1.1.6",
+    "solid-js": "^1.2.6",
     "solid-meta": "^0.27.2",
     "solid-styled-jsx": "^0.27.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
+    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^13.2.0",
+    "@commitlint/config-conventional": "^15.0.0",
-    "@types/marked": "^3.0.1",
+    "@types/marked": "^4.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@typescript-eslint/parser": "^5.6.0",
     "@windicss/plugin-scrollbar": "^1.2.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.4.1",
     "eslint-config-xo-space": "^0.30.0",
     "eslint-plugin-solid": "^0.1.2",
-    "husky": "^7.0.2",
+    "husky": "^7.0.4",
-    "sass": "^1.43.2",
+    "sass": "^1.44.0",
-    "typescript": "^4.4.4",
+    "typescript": "^4.5.2",
-    "vite": "^2.6.7",
+    "vite": "^2.7.1",
-    "vite-plugin-solid": "^2.1.1",
+    "vite-plugin-solid": "^2.1.3",
-    "vite-plugin-windicss": "^1.4.11",
+    "vite-plugin-windicss": "^1.5.4",
-    "windicss": "^3.1.9"
+    "windicss": "^3.2.1"
   }
 }

pages/project/[repo].tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'solid-app-router';
 import { createSignal, For, onMount, Show } from 'solid-js';
-import marked from 'marked';
+import { marked } from 'marked';
 import Navbar from '../../components/Navbar';
 import { convertCase } from '../../config/case';
 import projects from '../../config/projects';
@@ -55,7 +55,7 @@ function ProjectRepo() {
             {item => <div class="flex-initial pr-2"><Icons name={item}></Icons></div>}
           </For>
         </div>
-        <div innerHTML={marked(data().details)} class="repoContent pb-6 pt-4"></div>
+        <div innerHTML={marked.parse(data().details)} class="repoContent pb-6 pt-4"></div>
       </Show>
     </div>
   );

types/project.ts

@@ -15,6 +15,7 @@ export type Stack =
   'nuxtjs' |
   'postgresql' |
   'redis' |
+  'rust' |
   'sass' |
   'sentry' |
   'solidjs' |