some design updates in website

amit9838 · Apr 28, 2024 · d5a810f · d5a810f
1 parent 16ef24b
commit d5a810f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/website/src/components/About.jsx b/website/src/components/About.jsx
@@ -59,7 +59,7 @@ export default function About() {
           />
           <div className="detail mx-4 text-white text-['ubuntu']">
             <h3 className="text-xl font-['ubuntu']">Amit Chaudhary</h3>
-            <p className="text-[.8rem] text-neutral-300">Software Developer</p>
+            <p className="text-[.8rem] text-neutral-300">Software Engineer</p>
             <div className="social flex gap-2">
               <a
                 href="https://github.com/amit9838"

diff --git a/website/src/components/Carousal.jsx b/website/src/components/Carousal.jsx
@@ -2,10 +2,28 @@
 import { useState } from "react";
 import ImageSlide from "./ImageSlide";
 
+// const images = [
+//   "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss5-overcast.png?raw=true#gh-dark-mode-only",
+//   "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss1-dark_mode.png?raw=true#gh-dark-mode-only",
+//   "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss4-light_mode.png?raw=true#gh-light-mode-only",
+// ];
+
 const images = [
-  "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss5-overcast.png?raw=true#gh-dark-mode-only",
-  "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss1-dark_mode.png?raw=true#gh-dark-mode-only",
-  "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss4-light_mode.png?raw=true#gh-light-mode-only",
+  {
+    title: "Few Clouds",
+    lightingCondition: "Night",
+    link: "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss5-overcast.png?raw=true#gh-dark-mode-only",
+  },
+  {
+    title: "Overcast",
+    lightingCondition: "Night",
+    link: "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss1-dark_mode.png?raw=true#gh-dark-mode-only",
+  },
+  {
+    title: "Partly Cloud",
+    lightingCondition: "Day",
+    link: "https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss4-light_mode.png?raw=true#gh-light-mode-only",
+  },
 ];
 
 const Carousel = () => {
@@ -28,21 +46,31 @@ const Carousel = () => {
       </h2>
       <div className="overflow-hidden">
         <div className="flex transition-transform duration-300 ease-in-out transform translate-x-[-${currentIndex * 100}%]">
-          <ImageSlide path={images[currentIndex]} />
+          <ImageSlide path={images[currentIndex].link} />
+        </div>
+      </div>
+
+      <div className="py-2 px-10 w-full bg-[#15212b] text-neutral-400 flex items-center justify-center">
+        <div className="controllor w-full max-w-[41rem] flex items-center justify-between font-['ubuntu']">
+          <div className="title"><h1>{images[currentIndex].title}</h1>
+          <p className="text-sm text-neutral-500">{images[currentIndex].lightingCondition}</p>
+          </div>
+          <div className="controls">
+            <button
+              className="bg-slate-600 w-[3rem] h-[3rem] rounded-full mx-2 hover:bg-slate-500"
+              onClick={goToPrevSlide}
+            >
+              <i className="fa-solid fa-angle-left"></i>
+            </button>
+            <button
+              className="bg-slate-600 w-[3rem] h-[3rem] rounded-full ml-2 hover:bg-slate-500"
+              onClick={goToNextSlide}
+            >
+              <i className="fa-solid fa-angle-right"></i>
+            </button>
+          </div>
         </div>
       </div>
-      <button
-        className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-slate-800/60 hover:bg-slate-800/80 px-3 py-1 text-dimWhite hover:text-white rounded-full shadow-lg"
-        onClick={goToPrevSlide}
-      >
-        <i className="fa-solid fa-angle-left"></i>
-      </button>
-      <button
-        className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-slate-800/60 hover:bg-slate-800/80 px-3 py-1 text-dimWhite hover:text-white rounded-full shadow-lg"
-        onClick={goToNextSlide}
-      >
-        <i className="fa-solid fa-angle-right"></i>
-      </button>
     </div>
   );
 };

diff --git a/website/src/components/Contribute.jsx b/website/src/components/Contribute.jsx
@@ -60,7 +60,7 @@ export default function Contribute() {
               </div>
               <a className=" " href={item.link}>
                 {item.text}
-                <i className="fa-solid fa-arrow-up-right-from-square mx-2 text-[.7rem] text-white"></i>
+                <i className="fa-solid fa-square-arrow-up-right mx-2 text-[.9rem] text-neutral-300"></i>
               </a>
             </div>
           ))}