automation

rizkikadafi · Apr 7, 2024 · 8c31efa · 8c31efa
1 parent 94225ef
commit 8c31efa
Show file tree

Hide file tree

Showing 17 changed files with 962 additions and 116 deletions.
diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml
@@ -0,0 +1,30 @@
+name: Build and deploy this site to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.1
+          bundler-cache: true
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: npm install
+      - name: Build site
+        uses: limjh16/jekyll-action-ts@v2
+        with:
+          enable_cache: true
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: $
+          publish_dir: ./_site
diff --git a/_config.yml b/_config.yml
@@ -1,4 +1,4 @@
-baseurl: ""
+baseurl: "https://rizkikadafi.github.io/"
 url: ""
 postcss:
   cache: false

diff --git a/_data/frameworks_libraries.yml b/_data/frameworks_libraries.yml
@@ -8,5 +8,5 @@
   src: https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg 
   doc: https://getbootstrap.com/ 
 - name: tailwindcss
-  src: https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg 
+  src: https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg 
   doc: https://tailwindcss.com/ 
diff --git a/_includes/project_card.html b/_includes/project_card.html
@@ -1,4 +1,4 @@
-<div class="swiper-slide bg-slate-700 dark:bg-slate-700 text-white p-2 lg:p-3 rounded-md shadow-custom">
+<div class="swiper-slide bg-slate-600/70 dark:bg-slate-700 text-white p-2 lg:p-3 rounded-md shadow-custom">
   <div class="flex flex-col justify-between h-full">
     <div class="text-center sm:text-left">
       <img src="{{ include.img }}" alt="{{ include.name }}" class="rounded-md">

diff --git a/_includes/tech_card.html b/_includes/tech_card.html
@@ -1,5 +1,5 @@
 <div class="px-3 pb-3">
-  <div class="bg-slate-700 rounded-md shadow-custom-lg dark:shadow-custom p-3">
+  <div class="bg-slate-600/70 dark:bg-slate-700 rounded-md shadow-custom-lg dark:shadow-custom p-3">
     <h3 class="text-sm text-white text-center font-bold mb-3">{{ include.title }}</h3>
     <div class="*:w-7 lg:*:w-10 *:mx-1 flex flex-wrap justify-center">
 

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -4,12 +4,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
     integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="/assets/css/main.css" />
 
   <title>{{page.title}}</title>
 
@@ -20,6 +21,9 @@
   <nav id="blog-nav"
     class="px-10 lg:px-20 bg-slate-300/70 dark:bg-transparent fixed right-0 left-0 top-0 dark:text-gray-200 z-10 py-3 lg:py-5 transition duration-300 border-slate-600 text-gray-900
   after:duration-1000 ease-out after:block after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-500 after:transition-transform after:mt-3 after:absolute after:bottom-0 after:left-0 after:rounded-md after:px-3">
+    <div class="hidden after:origin-bottom-left after:scale-x-100 dark:bg-slate-800/70 backdrop-blur-md">
+
+    </div>
     <div class=" flex justify-between items-center h-full">
       <a href="{{site.baseurl}}/blog" class="font-medium text-md lg:text-xl">Kadafi's Blog</a>
       <div class="flex">
@@ -43,7 +47,6 @@
 
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
-  <script src="/assets/js/tailwind.js"></script>
   <script src="/assets/js/toggle_dark.js"></script>
   <script src="/assets/js/blog-navbar.js"></script>
   <script src="/assets/js/blog-category-swiper.js"></script>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,19 +10,20 @@
     integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+  <link href="/assets/css/main.css" rel="stylesheet" />
 
   <title>{{ page.title }}</title>
 
 </head>
 
-<body class="overflow-x-hidden bg-slate-50 dark:bg-slate-800 transition duration-300">
+<body class="overflow-x-hidden bg-slate-200 dark:bg-slate-800 transition duration-300">
   {{ content }}
 
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
 
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="/assets/js/tailwind.js"></script>
+  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+  <!-- <script src="/assets/js/tailwind.js"></script> -->
 
   <script src="/assets/js/toggle_dark.js"></script>
   <script src="/assets/js/swiper.js"></script>

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,6 +1,8 @@
-/* @import "tailwindcss/base"; */
-/* @import "tailwindcss/components"; */
-/* @import "tailwindcss/utilities"; */
+---
+---
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @layer utilities {
   .bg-radial-gradient-center {

diff --git a/assets/js/navbar.js b/assets/js/navbar.js
@@ -9,12 +9,12 @@ function handleScroll() {
     window.requestAnimationFrame(function() {
       if (lastKnownScrollPosition !== 0) {
         nav.classList.add(
-          'shadow-custom-xl', 'bg-slate-800/70', 'backdrop-blur-md',
+          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
       } else {
         nav.classList.remove(
-          'shadow-custom-xl', 'bg-slate-800/70', 'backdrop-blur-md',
+          'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
       }

diff --git a/assets/js/swiper.js b/assets/js/swiper.js
@@ -19,7 +19,7 @@ const swiper = new Swiper('.swiper', {
   },
 });
 
-const activeStyles = ['bg-slate-700', 'rounded-md']
+const activeStyles = ['bg-slate-600/70', 'dark:bg-slate-700', 'rounded-md']
 const items = document.querySelectorAll('.project-item')
 const arrayItems = Array.from(items)
 let currentIndex = 0

diff --git a/assets/js/tailwind.js b/assets/js/tailwind.js
diff --git a/blog/blog.html b/blog/blog.html
@@ -15,7 +15,7 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</
         </p>
       </div>
       <a href="{{site.baseurl}}/"
-        class="text-center bg-slate-400 hover:bg-slate-500 dark:bg-slate-500 dark:hover:bg-slate-700 active:bg-slate-700 w-32 rounded-3xl py-2 text-xs lg:text-base">
+        class="text-center bg-slate-400/70 border-slate-200 hover:bg-slate-700 hover:text-white dark:bg-slate-700/70 dark:hover:bg-slate-700 dark:border-slate-500 border-[1px] active:bg-slate-700 w-32 rounded-3xl py-2 text-xs lg:text-base">
         About Me
       </a>
     </div>

diff --git a/index.html b/index.html
@@ -1,9 +1,12 @@
 ---
 layout: default
 title: Kadafi's Portfolio
-permalink: /
 ---
 <nav id="nav" class="fixed right-3 left-3 top-3 text-gray-200 z-10 px-5 py-3 lg:py-5 rounded-md transition">
+  <div
+    class="hidden dark:shadow-custom-xl dark:bg-slate-800/70 bg-slate-700/70 backdrop-blur-md text-slate-700 dark:text-white">
+    hello
+  </div>
   <div class="flex justify-between items-center h-full">
     <a href="{{site.baseurl}}/" class="font-medium text-md lg:text-xl">Rizki Kadafi</a>
     <div class="flex">
@@ -43,12 +46,12 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">{{site.data.content.hero.t
     </div>
   </section>
 
-  <section id="about" class="px-5 dark:bg-radial-gradient-diagonal text-gray-800 dark:text-gray-200 pt-20 ">
+  <section id="about" class="px-5 dark:bg-radial-gradient-diagonal text-gray-800 dark:text-gray-200 pt-20 lg:pt-5">
     {% include header-title.html title='About Me' subtitle='A short description about me' %}
 
     <div class="flex flex-col px-5 md:px-10 sm:flex-row sm:mx-auto sm:items-center lg:w-4/5">
       <div
-        class="flex-grow bg-slate-700 mb-5 sm:mb-0 rounded-md mx-auto shadow-custom-lg dark:shadow-custom w-3/5 sm:w-4/5">
+        class="flex-grow bg-slate-600/70 dark:bg-slate-700 mb-5 sm:mb-0 rounded-md mx-auto shadow-custom-lg dark:shadow-custom w-3/5 sm:w-4/5">
         <img src="/assets/image/profile.png" class="mx-auto" alt="">
       </div>
       <div class="">
@@ -59,23 +62,25 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">{{site.data.content.hero.t
     </div>
   </section>
 
-  <section id="technology" class="dark:bg-radial-gradient-diagonal-reverse pt-20">
+  <section id="technology" class="dark:bg-radial-gradient-diagonal-reverse pt-20 lg:pt-5">
     {% include header-title.html title='Technology' subtitle='The technology I use or that I am learning about' %}
     <div class="lg:grid lg:grid-cols-2 lg:px-8">
       {% include tech_card.html title='Programming Languages' data=site.data.programming_languages %}
       {% include tech_card.html title='Frameworks & Libraries' data=site.data.frameworks_libraries %}
     </div>
   </section>
 
-  <section id="project" class="dark:bg-radial-gradient-diagonal pt-20">
+  <section id="project" class="dark:bg-radial-gradient-diagonal pt-20 lg:pt-5">
     {% include header-title.html title='Projects' subtitle="Projects that I have worked on" %}
     <div class="dark:text-white flex justify-between sm:px-10 relative">
 
       <div class="hidden sm:block sm:w-3/5">
         <ul class="text-lg mr-8 lg:mr-10">
           {% for item in site.data.projects %}
-          <li class="project-item cursor-pointer px-5 py-3 lg:py-5 border-b-slate-600 border-b-2">
-            {{item.name}}</li>
+          <li
+            class="project-item cursor-pointer px-5 py-3 lg:py-5 border-b-slate-500 dark:border-b-slate-600 border-b-2">
+            {{item.name}}
+          </li>
           {% endfor %}
         </ul>
       </div>
@@ -92,11 +97,11 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">{{site.data.content.hero.t
     </div>
   </section>
 
-  <section id="contact" class="dark:bg-radial-gradient-top-right pt-20">
+  <section id="contact" class="dark:bg-radial-gradient-top-right pt-20 lg:pt-5">
     {% include header-title.html title='Contact Me' subtitle="Let's connect with me" %}
 
     <div class="px-3 mb-5 box-border text-white">
-      <div class="bg-slate-700 rounded-md shadow-custom-lg dark:shadow-custom p-3">
+      <div class="bg-slate-600/70 dark:bg-slate-700 rounded-md shadow-custom-lg dark:shadow-custom p-3">
         <div class="flex *:mx-2 justify-center text-center mb-3 py-3 border-b-slate-600 border-b-2">
           {% for item in site.data.contact %}