update

Author: generalentropy

data/cardsData.js

@@ -71,4 +71,29 @@ export const cardsData = [
       },
     ],
   },
+  {
+    project: "lowfuel",
+    imageCover: "lowfuel.jpg",
+    title: "Low-Fuel",
+    author: "Paul",
+    github: "https://github.com/Bit-Scripts/Low-Fuel",
+    demo: "",
+    translations: [
+      {
+        lang: "en",
+        description:
+          "Knowing the places where fuel prices are the cheapest (using government data) and sending SMS alerts if fuel prices drop",
+      },
+      {
+        lang: "fr",
+        description:
+          "Connaître les lieux où les prix des carburants sont les moins chers (utilisation des données gouvernementales) et envoi de SMS si le prix du carburant baisse",
+      },
+      {
+        lang: "es",
+        description:
+          "Conocer los lugares donde los precios de los combustibles son los más baratos (utilizando datos del gobierno) y enviar alertas por SMS si los precios de los combustibles bajan",
+      },
+    ],
+  },
 ];

public/images/bitscripts.png

@@ -11,8 +11,10 @@ function App() {
     // fetchReposData(ORGNAME);
   }, []);
 
+  console.log('"render app');
+
   return (
-    <div className="min-h-screen bg-neutral-800">
+    <div className="min-h-screen overflow-x-hidden bg-neutral-800">
       <Header />
       <LangageSwitcher />
       <Info />

public/images/lowfuel.jpg

@@ -9,6 +9,7 @@ function Card({
   translationKey,
   demoUrl,
   author,
+  githubProjectUrl,
 }) {
   const { t } = useTranslation();
 
@@ -35,14 +36,18 @@ function Card({
         </div>
 
         <div className="flex justify-center gap-x-4 py-2">
-          <a className={`${buttonStyle}`}>
-            <FaGithub size={"20"} className="mr-2" />
-            Github
-          </a>
-
-          <a className={`${buttonStyle}`} href={demoUrl}>
-            <MdOutlineRemoveRedEye size={"24"} className="mr-2" /> Demo
-          </a>
+          {githubProjectUrl && (
+            <a className={`${buttonStyle}`} href={githubProjectUrl}>
+              <FaGithub size={"20"} className="mr-2" />
+              Github
+            </a>
+          )}
+
+          {demoUrl && (
+            <a className={`${buttonStyle}`} href={demoUrl}>
+              <MdOutlineRemoveRedEye size={"24"} className="mr-2" /> Demo
+            </a>
+          )}
         </div>
       </div>
     </div>

src/App.jsx

@@ -15,6 +15,7 @@ function CardsWrapper() {
               translationKey={card.project}
               demoUrl={card.demo}
               author={card.author}
+              githubProjectUrl={card.github}
             />
           );
         })}

src/components/Card.jsx

@@ -4,8 +4,8 @@ function Info() {
   const { t } = useTranslation();
   return (
     <div className="flex justify-center">
-      <div className="flex max-w-[1280px] flex-wrap items-end justify-center py-10">
-        <span className="to-accent bg-gradient-to-r from-cyan-400 bg-clip-text py-2 text-5xl font-bold text-transparent">
+      <div className="flex max-w-[1280px] flex-wrap items-end justify-center py-2 sm:py-10">
+        <span className="bg-gradient-to-r from-cyan-400 to-accent bg-clip-text text-3xl font-bold text-transparent sm:py-2 sm:text-5xl">
           {t("info")}
         </span>
       </div>

src/components/CardsWrapper.jsx

@@ -8,12 +8,12 @@ function LangageSwitcher() {
   const [activeLang, setActiveLang] = useState(normalizeLang(currentLanguage));
 
   const btnStyleBase =
-    "py-2 px-6 pointer mr-2 rounded-full my-2 text-xs hover:bg-accentDarker transition-colors";
+    "py-2 px-6 pointer rounded-full my-2 text-xs hover:bg-accentDarker transition-colors ";
 
   return (
-    <div className="mr-2 flex justify-end">
-      <div className="flex text-white">
-        <div>
+    <div className="flex justify-center sm:justify-end">
+      <div className="flex justify-center text-white">
+        <div className="flex gap-2 sm:gap-4">
           <button
             className={`${btnStyleBase} ${activeLang === "en" ? "bg-accentDarker" : "bg-neutral-700"}`}
             onClick={() => {

src/components/Info.jsx

@@ -42,7 +42,7 @@ i18n
   });
 
 function fillTranslations(cardsData) {
-  console.log("loading translations...");
+  console.log("Populate translations object...");
   cardsData.forEach((card) => {
     card.translations.forEach((translation) => {
       const { lang, description } = translation;
@@ -62,7 +62,8 @@ function fillTranslations(cardsData) {
 }
 
 fillTranslations(cardsData);
+console.log("Translations injected👍");
 
-console.log(i18n.getResourceBundle("en", "app.card"));
+// console.log(i18n.getResourceBundle("en", "app.card"));
 
 export default i18n;