feat: projects page

.eslintrc.js

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

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';
-// eslint-disable-next-line no-unused-vars
-import {For} from 'solid-js';
+import { For, lazy } from 'solid-js';
 // 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

@@ -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',
@@ -57,8 +57,6 @@ 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="container mx-auto px-10 md:px-20 lg:px-32">
     <div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-content">
       <div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
         <div class="flex flex-row items-center">
@@ -86,7 +84,7 @@ function Index() {
           }</For>
         </ul>
 
-            <div class="text-sm py-2 hidden md:block">
+        <div class="text-sm py-2 lg:pt-8 lg:pb-0 hidden md:block">
           <MadeWithLove />
         </div>
       </div>
@@ -122,8 +120,6 @@ function Index() {
         <MadeWithLove />
       </div>
     </div>
-      </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 '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'));