chore: clean up a few features

README.md

@@ -2,7 +2,7 @@
 
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/9d8edaee380a43bcb89a28222c34a4b0)](https://www.codacy.com/gh/aldy505/code/dashboard?utm_source=github.com&utm_medium=referral&utm_content=aldy505/code&utm_campaign=Badge_Grade) [![CodeFactor](https://www.codefactor.io/repository/github/aldy505/code/badge)](https://www.codefactor.io/repository/github/aldy505/code) [![Build](https://github.com/aldy505/code/actions/workflows/ci.yml/badge.svg)](https://github.com/aldy505/code/actions/workflows/ci.yml) [![GitHub license](https://img.shields.io/github/license/aldy505/code)](https://github.com/aldy505/code)
 
-Codebase for [code.reinaldyrafli.com](https://code.reinaldyrafli.com). Written in Nuxt.js, deployed on Cloudflare Pages.
+Codebase for [code.reinaldyrafli.com](https://code.reinaldyrafli.com). Written on [Solid](solidjs.com) and deployed on Cloudflare Pages.
 
 ## Contributing
 

components/LinkList.jsx

@@ -0,0 +1,20 @@
+import {createSignal} from 'solid-js';
+
+function LinkList({link, text, subtext}) {
+  const [hoverState, setHoverState] = createSignal(false);
+  return (
+    <li
+      class="opacity-75 hover:opacity-100 transition duration-500 ease-in-out"
+      onMouseOver={() => setHoverState(true)}
+      onMouseOut={() => setHoverState(false)}
+    >
+      <a
+        href={link}
+        class="hover:underline-light-300 hover:text-blue-100"
+      >{text}</a>
+      <p class={hoverState() ? 'inline px-3' : 'hidden'} class="transition duration-500 ease-in-out hover:opacity-90 opacity-50">— {subtext}</p>
+    </li>
+  );
+}
+
+export default LinkList;

components/Repository.jsx

@@ -37,7 +37,7 @@ function getLanguageColor(language) {
 
 function Repository({url, name, stars, language, description}) {
   return (
-    <div class="flex flex-col py-4 px-2 lg:px-0 hover:opacity-100">
+    <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">
         <a href={url}>
           <div class="flex flex-row items-center">

pages/index.jsx

@@ -5,6 +5,8 @@ import anime from 'animejs';
 import MadeWithLove from '../components/MadeWithLove';
 // eslint-disable-next-line no-unused-vars
 import Repository from '../components/Repository';
+// eslint-disable-next-line no-unused-vars
+import LinkList from '../components/LinkList';
 import getRepositories from '../components/GetRepositories';
 
 const image = {
@@ -15,6 +17,24 @@ function Index() {
   const [repositories, setRepositories] = createSignal({});
   const [repoRequest, setRepoRequest] = createSignal(false);
 
+  const link = [
+    {
+      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',
+      subtext: 'Another way to get in touch!',
+    },
+  ];
+
   onMount(async () => {
     try {
       const repos = await getRepositories();
@@ -37,7 +57,7 @@ function Index() {
   });
 
   return (
-    <div className="bg-cool-gray-900 text-white min-h-screen min-w-full h-full w-full font-body">
+    <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">
@@ -61,24 +81,9 @@ function Index() {
             </p>
 
             <ul class="list-none text-base py-2">
-              <li>
+              <For each={link}>{item =>
-                <a
+                <LinkList link={item.link} text={item.text} subtext={item.subtext}></LinkList>
-                  href="mailto:aldy505@tutanota.com"
+              }</For>
-                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
-                >Email</a>
-              </li>
-              <li>
-                <a
-                  href="https://www.github.com/aldy505"
-                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
-                >Github</a>
-              </li>
-              <li>
-                <a
-                  href="https://t.me/aldy505"
-                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
-                >Telegram</a>
-              </li>
             </ul>
 
             <div class="text-sm py-2 hidden md:block">

vite.config.js

@@ -8,7 +8,7 @@ export default defineConfig({
     solidPlugin(),
     windiCSS({
       scan: {
-        dirs: ['.'],
+        dirs: ['./components', './layouts', './pages'],
       },
     }),
   ],