mobile design

rizkikadafi · Jan 17, 2024 · 141e14e · 141e14e
1 parent fe9cdea
commit 141e14e
Show file tree

Hide file tree

Showing 16 changed files with 625 additions and 129 deletions.
diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -4,7 +4,7 @@ GEM
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)

diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -0,0 +1,9 @@
+- name: Home
+  link: "#hero"
+- name: About
+  link: "#about"
+- name: Technology
+  link: "#technology"
+- name: Blog
+  link: /blog.html
+
diff --git a/_data/projects.yml b/_data/projects.yml
@@ -1,3 +1,9 @@
 - name: Project 1
   desc: Lorem ipsum dolor sit amet
   img: /assets/image/hero1.jpg
+- name: Project 2
+  desc: Lorem ipsum dolor sit amet
+  img: /assets/image/hero2.jpg
+- name: Project 3
+  desc: Lorem ipsum dolor sit amet
+  img: /assets/image/hero2.jpg
diff --git a/_includes/header-title.html b/_includes/header-title.html
@@ -1,4 +1,4 @@
-<div class="mb-5 text-center dark:*:text-white">
+<div class="mb-5 text-center text-gray-800 dark:text-gray-200">
   <h2
     class="text-xl font-bold mb-3 after:content-[''] after:h-[2px] after:w-10 after:block after:mx-auto after:bg-black after:dark:bg-white">
     {{ include.title }}

diff --git a/_includes/modal-navigation.html b/_includes/modal-navigation.html
@@ -0,0 +1,16 @@
+<div id="top-right-modal" data-modal-placement="top-right" tabindex="-1"
+  class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
+  <div class="relative w-full max-w-2xl max-h-full">
+    <div class="relative bg-slate-700 rounded-lg shadow dark:bg-gray-700">
+      <div class="p-2 md:p-5 space-y-4 text-center">
+        <ul>
+          {% for item in site.data.navigation %}
+          <li>
+            <a data-modal-hide="top-right-modal" href="{{item.link}}" class="block py-3 rounded-md">{{item.name}}</a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/_includes/project_card.html b/_includes/project_card.html
@@ -0,0 +1,14 @@
+<div class="swiper-slide bg-slate-700 dark:bg-slate-700 text-white p-2 rounded-md shadow-custom">
+  <div class="flex flex-col justify-between h-full">
+    <div class="text-center">
+      <img src="{{ include.img }}" alt="{{ include.name }}" class="rounded-md mb-3">
+      <h4 class="font-bold">{{ include.name }}</h4>
+      <p class="text-xs">
+        {{ include.desc }}
+      </p>
+    </div>
+
+    <a href=""
+      class="text-center bg-slate-600 hover:bg-slate-800 dark:hover:bg-slate-800 active:bg-slate-700 rounded-lg py-2 px-4 text-xs lg:text-base mt-5 block w-full">Details</a>
+  </div>
+</div>
diff --git a/_includes/sticky-navbar.html b/_includes/sticky-navbar.html
@@ -0,0 +1,18 @@
+<nav id="sticky-nav"
+  class="invisible flex justify-between flex-grow-1 bg-slate-600 right-3 left-3 top-3 text-gray-200 z-10 items-center fixed px-5 py-3 rounded-md shadow-custom-lg dark:shadow-custom transition-transform duration-500 -translate-y-5">
+  <a href="{{site.baseurl}}/" class="relative font-medium text-md sm:text-xl">Rizki Kadafi</a>
+  <div class="flex">
+    <ul class="hidden sm:flex *:mx-5">
+      <li><a href="#hero">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#technology">Technolgy</a></li>
+      <li><a href="#blog">Blog</a></li>
+    </ul>
+    <div class="*:cursor-pointer">
+      <i id="dark-mode" class="bi bi-moon-stars-fill mr-2 text-lg dark:hidden"></i>
+      <i id="light-mode" class="bi bi-brightness-high-fill mr-2 text-xl hidden dark:inline-block"></i>
+      <i data-modal-target="top-right-modal" data-modal-toggle="top-right-modal"
+        class="bi bi-list sm:hidden text-xl"></i>
+    </div>
+  </div>
+</nav>
diff --git a/_includes/tech_card.html b/_includes/tech_card.html
@@ -1,5 +1,5 @@
 <div class="px-3 mb-5 box-border">
-  <div class="bg-slate-800 dark:bg-slate-700 rounded-md shadow-custom p-3">
+  <div class="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">Frameworks and Libraries</h3>
     <div class="*:w-7 *:h-7 *:mx-1 flex flex-wrap justify-center">
       {% for item in include.data %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,17 +4,25 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/assets/css/main.css">
-  <!-- <link rel="stylesheet" href="/assets/css/style.css"> -->
+  <!-- <link rel="stylesheet" href="/assets/css/main.css"> -->
+  <link rel="stylesheet" href="/assets/css/style.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
   <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" />
   <title>{{ page.title }}</title>
+
 </head>
 
 <body class="overflow-x-hidden dark:bg-slate-800">
   {{ 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="/assets/js/toggle_dark.js"></script>
+  <script src="/assets/js/swiper.js"></script>
+  <script src="/assets/js/navbar.js"></script>
 </body>
 
 </html>
diff --git a/assets/css/input.css b/assets/css/input.css
@@ -1,39 +1,94 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @layer utilities {
   .bg-radial-gradient-top-right {
-    background: radial-gradient(at top right, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at top right, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-center-right {
-    background: radial-gradient(at center right, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at center right, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-bottom-right {
-    background: radial-gradient(at bottom right, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at bottom right, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-top-left {
-    background: radial-gradient(at top left, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at top left, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-center-left {
-    background: radial-gradient(at center left, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at center left, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-bottom-left {
-    background: radial-gradient(at bottom left, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at bottom left, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-center {
-    background: radial-gradient(at center, #334155 0%, #1E2A3B 60%);
+    background: radial-gradient(at center, #334155 0%, transparent 60%);
   }
 
   .bg-radial-gradient-diagonal {
     background: 
-      radial-gradient(at bottom right, #334155 0%, #1E2A3B 60%), 
-      radial-gradient(at top left, #334155 0%, #1E2A3B 60%);
+    radial-gradient(
+      at top left,
+      #334155 0%, 
+      transparent 60%
+    ),
+    radial-gradient(
+      at bottom right,
+      #334155 0%, 
+      transparent 60%
+    );
+  }
+
+  .bg-radial-gradient-diagonal-reverse {
+    background: 
+    radial-gradient(
+      at top right,
+      #334155 0%, 
+      transparent 60%
+    ),
+    radial-gradient(
+      at bottom left,
+      #334155 0%, 
+      transparent 60%
+    );
+  }
+
+  .bg-radial-gradient-right {
+    background: 
+    radial-gradient(
+      at top right,
+      #334155 0%, 
+      transparent 60%
+    ),
+    radial-gradient(
+      at bottom right,
+      #334155 0%, 
+      transparent 60%
+    );
+  }
+
+  .bg-radial-gradient-left {
+    background: 
+    radial-gradient(
+      at top left,
+      #334155 0%, 
+      transparent 60%
+    ),
+    radial-gradient(
+      at bottom left,
+      #334155 0%, 
+      transparent 60%
+    );
   }
 }
+
+