feat: projects page

.eslintrc.js

@@ -17,5 +17,6 @@ module.exports = {
   ],
   rules: {
     'capitalized-comments': ['off'],
+    'object-curly-spacing': ['error', 'always'],
   },
 };

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']};
+module.exports = { extends: ['@commitlint/config-conventional'] };

components/LinkList.jsx

@@ -1,6 +1,6 @@
-import {createSignal} from 'solid-js';
+import { createSignal } from 'solid-js';
 
-function LinkList({link, text, subtext}) {
+function LinkList({ link, text, subtext }) {
   const [hoverState, setHoverState] = createSignal(false);
   return (
     <li

components/Repository.jsx

@@ -35,7 +35,7 @@ function getLanguageColor(language) {
   }
 }
 
-function Repository({url, name, stars, language, description}) {
+function Repository({ url, name, stars, language, description }) {
   return (
     <div class="flex flex-col py-4 px-2 lg:px-0 opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
       <div class="flex-1 text-sm hover:text-blue-300 font-bold transition duration-500 ease-in-out">

config/head.js

@@ -80,16 +80,16 @@ export default {
     lang: 'en',
   },
   link: [
-    {rel: 'preconnect', href: 'https://fonts.gstatic.com'},
+    { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
-    {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'},
+    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap' },
-    {rel: 'icon', type: 'image/png', href: 'favicon.png'},
+    { rel: 'icon', type: 'image/png', href: 'favicon.png' },
-    {rel: 'icon', type: 'image/svg', href: 'favicon.svg'},
+    { rel: 'icon', type: 'image/svg', href: 'favicon.svg' },
   ],
   script: [
-    {src: 'https://static.cloudflareinsights.com/beacon.min.js', 'data-cf-beacon': '{"token": "2a03659d407a47e282375a70a91bdfc4"}', defer: true},
+    { src: 'https://static.cloudflareinsights.com/beacon.min.js', 'data-cf-beacon': '{"token": "2a03659d407a47e282375a70a91bdfc4"}', defer: true },
   ],
   meta: [
-    {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     ...prepareMeta(),
   ],
 };

config/projects.js

@@ -0,0 +1,86 @@
+const projects = [
+  {
+    id: 1,
+    type: 'library',
+    stack: ['typescript'],
+    title: 'Generate Passphrase',
+    description: 'Secure random passphrase for Node.js',
+    repository: 'https://github.com/aldy505/generate-passphrase',
+    role: 'author',
+  },
+  {
+    id: 2,
+    type: 'library',
+    stack: ['go'],
+    title: 'Bob',
+    description: 'SQL query builder as an extension of Squirrel',
+    repository: 'https://github.com/aldy505/bob',
+    role: 'author',
+  },
+  {
+    id: 3,
+    type: 'library',
+    stack: ['go'],
+    title: 'PHC Crypto',
+    description: 'Password hashing with Argon2, Bcrypt, Scrypt, and PBKDF2 simplified',
+    repository: 'https://github.com/aldy505/phc-crypto',
+    role: 'author',
+  },
+  {
+    id: 4,
+    type: 'library',
+    stack: ['typescript'],
+    title: 'Malibu',
+    description: 'Framework-agnostic CSRF middleware for modern Node.js applications',
+    repository: 'https://github.com/tinyhttp/malibu',
+    role: 'author',
+  },
+  {
+    id: 5,
+    type: 'application',
+    stack: ['go', 'typescript', 'svelte', 'tailwindcss', 'postgresql', 'redis'],
+    title: 'Jokes Bapak2',
+    description: 'Image API for serving Indonesian dad jokes',
+    repository: 'https://github.com/aldy505/jokes-bapak2',
+    website: 'http://jokesbapak2.pages.dev/',
+    role: 'author',
+  },
+  {
+    id: 6,
+    type: 'library',
+    stack: ['typescript'],
+    title: 'Tinyhttp',
+    description: 'Typescript-based framework as a replacement for Express',
+    repository: 'https://github.com/tinyhttp/tinyhttp',
+    role: 'contributor',
+  },
+  {
+    id: 7,
+    type: 'application',
+    stack: ['vuejs', 'tailwindcss'],
+    title: 'ARCET Creative Visual Studio',
+    description: 'Website for ARCET',
+    website: 'https://www.arcet.id',
+    role: 'author',
+  },
+  {
+    id: 8,
+    type: 'application',
+    stack: ['vuejs', 'bootstrap'],
+    title: 'Pesanyuk',
+    description: 'Store-management application for Indonesian small to medium businesses',
+    website: 'https://pesanyuk.id',
+    role: 'contributor',
+  },
+  {
+    id: 9,
+    type: 'application',
+    stack: ['javascript', 'redis', 'mongodb'],
+    title: 'Teknologi Umum Bot',
+    description: 'A simple telegram bot for managing daily poll & programming-related quizes',
+    repository: 'https://github.com/teknologi-umum/bot',
+    role: 'author',
+  },
+];
+
+export default projects;

layouts/default.jsx

@@ -1,17 +1,33 @@
+import { useRoutes } from 'solid-app-router';
 // eslint-disable-next-line no-unused-vars
-import {Route} from 'solid-app-router';
+import { For, lazy } from 'solid-js';
 // eslint-disable-next-line no-unused-vars
-import {For} from 'solid-js';
+import { MetaProvider, Title, Link, Meta } from 'solid-meta';
-// eslint-disable-next-line no-unused-vars
-import {MetaProvider, Title, Link, Meta} from 'solid-meta';
 import head from '../config/head.js';
 import '@fontsource/poppins';
 
+const route = [
+  {
+    path: '/',
+    component: () => lazy(() => import('../pages/index.jsx')),
+  },
+  {
+    path: '/projects',
+    component: () => lazy(() => import('../pages/projects.jsx')),
+  },
+  {
+    path: '*all',
+    component: () => lazy(() => import('../pages/index.jsx')),
+  },
+];
+
+// eslint-disable-next-line no-unused-vars
+const Routes = useRoutes(route);
+
 function Default() {
   return (
     <>
       <MetaProvider>
-        <Route />
         <Title>{head.title}</Title>
         <For each={head.link}>{link =>
           <Link rel={link.rel} href={link.href} type={link?.type ?? ''} />
@@ -20,6 +36,11 @@ function Default() {
           <Meta name={meta?.name ?? ''} property={meta?.property ?? ''} content={meta.content} />
         }</For>
       </MetaProvider>
+      <div class="bg-cool-gray-900 text-white min-h-screen min-w-full h-full w-full font-body">
+        <div class="container mx-auto px-10 md:px-20 lg:px-32">
+          <Routes />
+        </div>
+      </div>
     </>
   );
 }

pages/index.jsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import {createSignal, For, onMount, Show} from 'solid-js';
+import { createSignal, For, onMount, Show } from 'solid-js';
 import anime from 'animejs';
 // eslint-disable-next-line no-unused-vars
 import MadeWithLove from '../components/MadeWithLove';
@@ -18,16 +18,16 @@ function Index() {
   const [repoRequest, setRepoRequest] = createSignal(false);
 
   const link = [
+    {
+      link: 'projects',
+      text: 'Projects',
+      subtext: 'See my projects & libraries!',
+    },
     {
       link: 'mailto:aldy505@tutanota.com',
       text: 'Email',
       subtext: 'Get in touch!',
     },
-    {
-      link: 'https://www.github.com/aldy505',
-      text: 'Github',
-      subtext: 'See my projects & libraries!',
-    },
     {
       link: 'https://t.me/aldy505',
       text: 'Telegram',
@@ -43,12 +43,12 @@ function Index() {
       anime({
         targets: '.repository',
         opacity: [
-          {value: 0, duration: 500, delay: 500},
+          { value: 0, duration: 500, delay: 500 },
-          {value: 100, duration: 4000},
+          { value: 100, duration: 4000 },
         ],
         translateY: [
-          {value: 800, duration: 500, delay: 800},
+          { value: 800, duration: 500, delay: 800 },
-          {value: 0, duration: 4000},
+          { value: 0, duration: 4000 },
         ],
       });
     } catch {
@@ -57,71 +57,67 @@ function Index() {
   });
 
   return (
-    <div class="bg-cool-gray-900 text-white min-h-screen min-w-full h-full w-full font-body">
+    <div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-content">
-      <div class="container mx-auto px-10 md:px-20 lg:px-32">
+      <div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
-        <div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-content">
+        <div class="flex flex-row items-center">
-          <div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
+          <div class="flex-initial">
-            <div class="flex flex-row items-center">
+            <h1 class="text-5xl md:text-8xl font-bold py-4">
-              <div class="flex-initial">
+              Reinaldy Rafli
-                <h1 class="text-5xl md:text-8xl font-bold py-4">
+            </h1>
-                  Reinaldy Rafli
-                </h1>
-              </div>
-              <div class="flex-initial md:pl-4">
-                <img
-                  src={image.me}
-                  alt="My Memoji"
-                  class="w-full md:w-2/3 h-auto md:py-4"
-                />
-              </div>
-            </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 😉
-            </p>
-
-            <ul class="list-none text-base py-2">
-              <For each={link}>{item =>
-                <LinkList link={item.link} text={item.text} subtext={item.subtext}></LinkList>
-              }</For>
-            </ul>
-
-            <div class="text-sm py-2 hidden md:block">
-              <MadeWithLove />
-            </div>
           </div>
-
+          <div class="flex-initial md:pl-4">
-          <div class="flex-1 pl-0 lg:pl-12">
+            <img
-            <Show when={repoRequest()} fallback={<div></div>}>
+              src={image.me}
-              <div class="repository">
+              alt="My Memoji"
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 place-content-center">
+              class="w-full md:w-2/3 h-auto md:py-4"
-                  <For each={repositories()}>{repo =>
+            />
-                    <div class="line">
-                      <Repository
-                        url={repo.html_url}
-                        name={repo.name}
-                        stars={repo.stargazers_count}
-                        language={repo.language}
-                        description={repo.description}
-                      />
-                    </div>
-                  }</For>
-                  <div class="line">
-                    <p class="text-sm opacity-75 hover:opacity-100 hover:text-blue-100 hover:underline md:pb-0 pb-4 transition duration-500 ease-in-out">
-                      <a href="https://www.github.com/aldy505">
-                        Explore more on Github &mdash;&gt;
-                      </a>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </Show>
-          </div>
-
-          <div class="flex-initial md:hidden py-4">
-            <MadeWithLove />
           </div>
         </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 😉
+        </p>
+
+        <ul class="list-none text-base py-2">
+          <For each={link}>{item =>
+            <LinkList link={item.link} text={item.text} subtext={item.subtext}></LinkList>
+          }</For>
+        </ul>
+
+        <div class="text-sm py-2 lg:pt-8 lg:pb-0 hidden md:block">
+          <MadeWithLove />
+        </div>
+      </div>
+
+      <div class="flex-1 pl-0 lg:pl-12">
+        <Show when={repoRequest()} fallback={<div></div>}>
+          <div class="repository">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 place-content-center">
+              <For each={repositories()}>{repo =>
+                <div class="line">
+                  <Repository
+                    url={repo.html_url}
+                    name={repo.name}
+                    stars={repo.stargazers_count}
+                    language={repo.language}
+                    description={repo.description}
+                  />
+                </div>
+              }</For>
+              <div class="line">
+                <p class="text-sm opacity-75 hover:opacity-100 hover:text-blue-100 hover:underline md:pb-0 pb-4 transition duration-500 ease-in-out">
+                  <a href="https://www.github.com/aldy505">
+                    Explore more on Github &mdash;&gt;
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </Show>
+      </div>
+
+      <div class="flex-initial md:hidden py-4">
+        <MadeWithLove />
       </div>
     </div>
   );

pages/projects.jsx

@@ -0,0 +1,88 @@
+// eslint-disable-next-line no-unused-vars
+import { NavLink } from 'solid-app-router';
+// eslint-disable-next-line no-unused-vars
+import { For, Show } from 'solid-js';
+// eslint-disable-next-line no-unused-vars
+import Icons from '../components/Icons';
+import projects from '../config/projects';
+
+function Projects() {
+  return (
+    <>
+      <section className="w-full flex flex-col md:flex-row justify-between py-6 items-center">
+        <div className="flex-3">
+          <NavLink href="/">
+            <h1 className="text-3xl font-bold inline-block">Reinaldy Rafli </h1>
+            <img
+              src="/me.png"
+              alt="My Memoji"
+              class="w-14 h-auto md:py-4 inline pl-4"
+            />
+          </NavLink>
+        </div>
+        <div className="flex-1 text-right py-2 text-2xl">Projects</div>
+      </section>
+
+      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
+        <For each={projects}>
+          {project =>
+            <div className="p-4 rounded-lg bg-steel-900 hover:bg-wisteria-800 transition duration-500 ease-in-out">
+              <div className="flex flex-col">
+                <div className="flex-1 py-2">
+                  <h2 className="text-xl font-bold">{project.title}</h2>
+                  <p className="text-base">{project.description}</p>
+                </div>
+                <div className="flex-1 py-2">
+                  <div className="flex-col md:flex-row items-center">
+                    <p className="text-xs text-gray-300 inline pr-2">{project.type.toUpperCase()}</p>
+                    <p className="text-xs text-gray-300 inline pr-2">{project.role.toUpperCase()}</p>
+                  </div>
+                </div>
+                <div className="flex-1 py-2">
+                  <div className="flex flex-row flex-wrap items-center">
+                    <For each={project.stack}>
+                      {item => <div className="flex-initial pr-2"><Icons name={item}></Icons></div>}
+                    </For>
+                  </div>
+                </div>
+                <div className="flex-1 py-2">
+                  <div className="flex flex-row flex-wrap items-center">
+                    <Show when={project.repository}>
+                      <div className="flex-initial pr-2">
+                        <a href={project.repository}>
+                          <Icons name="github"></Icons>
+                        </a>
+                      </div>
+                      <div className="flex-initial pr-4 text-xs">
+                        <a href={project.repository}>Repository</a>
+                      </div>
+                    </Show>
+                    <Show when={project.website}>
+                      <div className="flex-initial pr-2">
+                        <a href={project.website}>
+                          <Icons name="arrow-right"></Icons>
+                        </a>
+                      </div>
+                      <div className="flex-initial pr-2 text-xs">
+                        <a href={project.website}>Website</a>
+                      </div>
+                    </Show>
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </For>
+      </section>
+
+      <section className="py-4">
+        <p className="text-sm text-center text-gray-100 pb-8 lg:opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
+          These are just a few of my projects.
+          Explore more on my <a className="hover:underline" href="https://www.github.com/aldy505">Github</a>
+        </p>
+      </section>
+    </>
+  );
+}
+
+export default Projects;

solid.config.jsx

@@ -1,24 +1,12 @@
-import {lazy} from 'solid-js';
+import { render } from 'solid-js/web';
-import {render} from 'solid-js/web';
 import 'virtual:windi.css';
 // eslint-disable-next-line no-unused-vars
-import {Router} from 'solid-app-router';
+import { Router, useRoutes } from 'solid-app-router';
 // eslint-disable-next-line no-unused-vars
 import Default from './layouts/default.jsx';
 
-const route = [
-  {
-    path: '/',
-    component: () => lazy(() => import('./pages/index.jsx')),
-  },
-  {
-    path: '*all',
-    component: () => lazy(() => import('./pages/index.jsx')),
-  },
-];
-
 render(() => (
-  <Router routes={route}>
+  <Router>
     <Default />
   </Router>
 ), document.getElementById('root'));

vite.config.js

@@ -1,4 +1,4 @@
-import {defineConfig} from 'vite';
+import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 import windiCSS from 'vite-plugin-windicss';