feat: add i18, fix mobile view as intro, add aesthetics bento

Author: btkcodedev

components/GridItems/Languages.tsx

@@ -77,7 +77,7 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
             </motion.div>
           </div>
         )}
-        <div className="flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl p-1">
+        <div className="relative flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl p-1">
           {/* Overlay */}
           <div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/30 to-neutral-950/30" />
           {/* Image */}
@@ -86,11 +86,12 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
             src={image ?? ""}
             alt="languages"
             fill
+            priority={image === "/background.jpg"}
           />
 
           {/* Content */}
-          <div className="relative z-20 w-full p-4 space-y-3 md:p-8">
-            <div className="text-sm font-medium text-white mb-72">
+          <div className="relative z-20 flex h-full w-full flex-col justify-between p-4 md:p-8">
+            <div className="text-sm font-medium text-white drop-shadow">
               {item.title}
             </div>
             <div className="flex flex-wrap items-center gap-3">

components/I18n/index.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { siteConfig as baseSiteConfig } from "@/config/site-config";
+import { createContext, ReactNode, useContext, useMemo, useState } from "react";
+
+type Language = "en" | "ml" | "zh" | "ja" | "hi";
+type SiteConfig = typeof baseSiteConfig;
+
+const translations: Record<Language, Record<string, string>> = {
+  en: {},
+  ml: {
+    "Hi!": "ഹായ്!",
+    "I am Bala": "ഞാൻ ബാലയാണ്",
+    "Senior SWE - ELT, Web, OSS Dev": "സീനിയർ SWE - ELT, വെബ്, OSS ഡെവ്",
+    "Remote, India": "റിമോട്ട്, ഇന്ത്യ",
+    "Contact Me": "ബന്ധപ്പെടുക",
+    "Before you go... Please reach out if you have any Research Software Engineer Positions available. Very much interested :)":
+      "പോകുന്നതിന് മുൻപ്... Research Software Engineer ഒഴിവുകൾ ഉണ്ടെങ്കിൽ പറയണം. വളരെ താൽപ്പര്യം :)",
+    "Portfolio website powered by Next.js, Tailwind CSS":
+      "Next.js, Tailwind CSS ഉപയോഗിച്ച് നിർമ്മിച്ച പോർട്ട്ഫോളിയോ വെബ്‌സൈറ്റ്",
+    Follow: "ഫോളോ",
+    Subscribe: "സബ്സ്ക്രൈബ്",
+    Join: "ചേരുക",
+    "View profile": "പ്രൊഫൈൽ കാണുക",
+    "See badges 🏅": "ബാഡ്ജുകൾ കാണുക 🏅",
+    "Support me ☕": "സപ്പോർട്ട് ചെയ്യുക ☕",
+    "See my profile": "പ്രൊഫൈൽ കാണുക",
+    "See my posts": "പോസ്റ്റുകൾ കാണുക",
+    "Open source contributions": "ഓപ്പൺ സോഴ്‌സ് സംഭാവനകൾ",
+    "Things I Love": "എനിക്ക് ഇഷ്ടമുള്ള കാര്യങ്ങൾ",
+    "Technical certificates": "ടെക്നിക്കൽ സർട്ടിഫിക്കറ്റുകൾ",
+    "Community Workshops": "കമ്മ്യൂണിറ്റി വർക്ക്‌ഷോപ്പുകൾ",
+    "Best Outgoing Student": "മികച്ച ഔട്ട്‌ഗോയിങ് വിദ്യാർത്ഥി",
+    "Department Topper": "ഡിപ്പാർട്ട്മെന്റ് ടോപ്പർ",
+    "Mathematics Topper": "മാത്തമാറ്റിക്സ് ടോപ്പർ",
+    "Best Final Year Project": "മികച്ച ഫൈനൽ ഇയർ പ്രോജക്റ്റ്",
+    "Nice to meet you": "കണ്ടതിൽ സന്തോഷം",
+    About: "കുറിച്ച്",
+    Experience: "പരിചയം",
+    Achievements: "നേട്ടങ്ങൾ",
+    Projects: "പ്രോജക്റ്റുകൾ",
+  },
+  zh: {
+    "Hi!": "你好！",
+    "I am Bala": "我是 Bala",
+    "Senior SWE - ELT, Web, OSS Dev": "高级软件工程师 - ELT、Web、开源开发",
+    "Remote, India": "远程，印度",
+    "Contact Me": "联系我",
+    "Before you go... Please reach out if you have any Research Software Engineer Positions available. Very much interested :)":
+      "在你离开前... 如果有研究软件工程师职位，请联系我。我非常感兴趣 :)",
+    "Portfolio website powered by Next.js, Tailwind CSS":
+      "由 Next.js 和 Tailwind CSS 驱动的作品集网站",
+    Follow: "关注",
+    Subscribe: "订阅",
+    Join: "加入",
+    "View profile": "查看资料",
+    "See badges 🏅": "查看徽章 🏅",
+    "Support me ☕": "支持我 ☕",
+    "See my profile": "查看我的资料",
+    "See my posts": "查看我的文章",
+    "Open source contributions": "开源贡献",
+    "Things I Love": "我喜欢的事物",
+    "Technical certificates": "技术证书",
+    "Community Workshops": "社区工作坊",
+    "Best Outgoing Student": "最佳毕业生",
+    "Department Topper": "系级第一名",
+    "Mathematics Topper": "数学第一名",
+    "Best Final Year Project": "最佳毕业项目",
+    "Nice to meet you": "很高兴认识你",
+    About: "关于",
+    Experience: "经历",
+    Achievements: "成就",
+    Projects: "项目",
+  },
+  ja: {
+    "Hi!": "こんにちは！",
+    "I am Bala": "Bala です",
+    "Senior SWE - ELT, Web, OSS Dev": "シニアソフトウェアエンジニア - ELT、Web、OSS 開発",
+    "Remote, India": "リモート、インド",
+    "Contact Me": "連絡する",
+    "Before you go... Please reach out if you have any Research Software Engineer Positions available. Very much interested :)":
+      "行く前に... 研究ソフトウェアエンジニアの募集があればぜひ連絡してください。とても興味があります :)",
+    "Portfolio website powered by Next.js, Tailwind CSS":
+      "Next.js と Tailwind CSS で作られたポートフォリオサイト",
+    Follow: "フォロー",
+    Subscribe: "登録",
+    Join: "参加",
+    "View profile": "プロフィールを見る",
+    "See badges 🏅": "バッジを見る 🏅",
+    "Support me ☕": "支援する ☕",
+    "See my profile": "プロフィールを見る",
+    "See my posts": "投稿を見る",
+    "Open source contributions": "オープンソース貢献",
+    "Things I Love": "好きなもの",
+    "Technical certificates": "技術証明書",
+    "Community Workshops": "コミュニティワークショップ",
+    "Best Outgoing Student": "最優秀卒業生",
+    "Department Topper": "学科首席",
+    "Mathematics Topper": "数学首席",
+    "Best Final Year Project": "最優秀卒業制作",
+    "Nice to meet you": "よろしくお願いします",
+    About: "概要",
+    Experience: "経験",
+    Achievements: "実績",
+    Projects: "プロジェクト",
+  },
+  hi: {
+    "Hi!": "नमस्ते!",
+    "I am Bala": "मैं बाला हूं",
+    "Senior SWE - ELT, Web, OSS Dev": "सीनियर SWE - ELT, वेब, OSS डेवलपमेंट",
+    "Remote, India": "रिमोट, भारत",
+    "Contact Me": "संपर्क करें",
+    "Before you go... Please reach out if you have any Research Software Engineer Positions available. Very much interested :)":
+      "जाने से पहले... अगर कोई Research Software Engineer पद उपलब्ध हो तो कृपया संपर्क करें। बहुत रुचि है :)",
+    "Portfolio website powered by Next.js, Tailwind CSS":
+      "Next.js और Tailwind CSS से बना पोर्टफोलियो वेबसाइट",
+    Follow: "फॉलो करें",
+    Subscribe: "सब्सक्राइब",
+    Join: "जुड़ें",
+    "View profile": "प्रोफाइल देखें",
+    "See badges 🏅": "बैज देखें 🏅",
+    "Support me ☕": "सपोर्ट करें ☕",
+    "See my profile": "मेरी प्रोफाइल देखें",
+    "See my posts": "मेरी पोस्ट देखें",
+    "Open source contributions": "ओपन सोर्स योगदान",
+    "Things I Love": "मेरी पसंदीदा चीजें",
+    "Technical certificates": "तकनीकी प्रमाणपत्र",
+    "Community Workshops": "कम्युनिटी वर्कशॉप",
+    "Best Outgoing Student": "सर्वश्रेष्ठ आउटगोइंग छात्र",
+    "Department Topper": "विभाग टॉपर",
+    "Mathematics Topper": "गणित टॉपर",
+    "Best Final Year Project": "सर्वश्रेष्ठ अंतिम वर्ष प्रोजेक्ट",
+    "Nice to meet you": "आपसे मिलकर खुशी हुई",
+    About: "परिचय",
+    Experience: "अनुभव",
+    Achievements: "उपलब्धियां",
+    Projects: "प्रोजेक्ट्स",
+  },
+};
+
+const translateText = (value: string, language: Language) =>
+  translations[language][value] ?? value;
+
+const translateValue = (value: unknown, language: Language): unknown => {
+  if (typeof value === "string") {
+    return translations[language][value] ?? value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => translateValue(item, language));
+  }
+
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, entry]) => [key, translateValue(entry, language)])
+    );
+  }
+
+  return value;
+};
+
+const I18nContext = createContext<{
+  language: Language;
+  setLanguage: (language: Language) => void;
+  t: (value: string) => string;
+  siteConfig: SiteConfig;
+} | null>(null);
+
+export const I18nProvider = ({ children }: { children: ReactNode }) => {
+  const [language, setLanguage] = useState<Language>("en");
+
+  const siteConfig = useMemo(
+    () => translateValue(baseSiteConfig, language) as SiteConfig,
+    [language]
+  );
+  const t = (value: string) => translateText(value, language);
+
+  return (
+    <I18nContext.Provider value={{ language, setLanguage, t, siteConfig }}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export const useI18n = () => {
+  const context = useContext(I18nContext);
+  if (!context) {
+    return {
+      language: "en" as Language,
+      setLanguage: () => {},
+      t: (value: string) => value,
+      siteConfig: baseSiteConfig,
+    };
+  }
+
+  return context;
+};
+
+export const LanguageToggle = () => {
+  const { language, setLanguage } = useI18n();
+  const languages: Language[] = ["en", "zh", "ja", "hi", "ml"];
+  const nextLanguage = languages[(languages.indexOf(language) + 1) % languages.length];
+
+  return (
+    <button
+      type="button"
+      onClick={() => setLanguage(nextLanguage)}
+      className="mt-1 flex cursor-pointer rounded-lg bg-white px-2 py-2 text-sm font-semibold shadow-md transition-colors hover:bg-neutral-100 dark:bg-neutral-800 dark:hover:bg-neutral-700"
+      aria-label="Change language"
+      title={`Change language to ${nextLanguage.toUpperCase()}`}
+    >
+      {language.toUpperCase()}
+    </button>
+  );
+};

components/LeftPanel/Bio.tsx

@@ -1,11 +1,96 @@
 "use client";
-import { siteConfig } from "@/config/site-config";
 import { Mail, MapPin } from "lucide-react";
 import Image from "next/image";
 import { ThemeToggle } from "@/components/Theme";
 import RippleButton from "@/components/common/StyledLinkButton";
+import { motion } from "framer-motion";
+import { LanguageToggle, useI18n } from "@/components/I18n";
+
+const Bio = ({ compact = false }: { compact?: boolean }) => {
+  const { siteConfig, t } = useI18n();
+
+  if (compact) {
+    return (
+      <div className="shadow-md rounded-xl border border-neutral-200/70 dark:border-neutral-800 bg-white/70 dark:bg-neutral-950/40 p-5">
+        <div className="grid grid-cols-2 gap-3">
+          <div className="flex flex-col items-center">
+            <Image
+              priority
+              loading="eager"
+              alt="Avatar"
+              placeholder="blur"
+              src="/profile.jpg"
+              width={132}
+              height={132}
+              blurDataURL="/profile.jpg"
+              className="aspect-square h-auto w-full rounded-xl object-cover object-center shadow-lg"
+            />
+          </div>
+
+          <div className="flex min-w-0 flex-col justify-center">
+            <p className="text-lg font-semibold leading-none bg-gradient-to-r from-orange-400 to-blue-500 bg-clip-text text-transparent">
+              {siteConfig.title}
+            </p>
+            <h1 className="mt-3 text-3xl font-bold leading-tight">
+              {siteConfig.creator}!
+            </h1>
+            <p className="mt-2 text-base font-light leading-snug text-neutral-500">
+              {siteConfig.bio}
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-4 grid grid-cols-2 gap-3">
+          <div className="flex items-center justify-center gap-2">
+            <ThemeToggle />
+            <LanguageToggle />
+          </div>
+
+          <motion.div
+            className="mt-1 min-w-0 rounded-[15%] border border-blue-500/25 bg-blue-500/10 px-3 py-2 text-center text-sm font-medium shadow-[0_0_18px_rgba(59,130,246,0.12)]"
+            animate={{
+              opacity: [0.78, 1, 0.78],
+              y: [0, -3, 0],
+              scale: [1, 1.03, 1],
+              boxShadow: [
+                "0 0 12px rgba(59, 130, 246, 0.12)",
+                "0 0 26px rgba(168, 85, 247, 0.32)",
+                "0 0 12px rgba(59, 130, 246, 0.12)",
+              ],
+            }}
+            whileHover={{ rotate: -1, scale: 1.05 }}
+            transition={{ duration: 2.1, repeat: Infinity, ease: "easeInOut" }}
+          >
+            <span className="block min-w-0 animate-pulse truncate bg-gradient-to-r from-blue-500 via-purple-500 to-orange-400 bg-clip-text text-transparent">
+              {t("Nice to meet you")}
+            </span>
+          </motion.div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3 mt-5">
+          <RippleButton
+            element={<MapPin size="14" />}
+            buttonText={siteConfig.location}
+            style={{
+              backgroundImage: "linear-gradient(to right, #FFA07A, #FF4500)",
+              transition: "background 0.5s ease",
+            }}
+            href={siteConfig.locationLink}
+          />
+          <RippleButton
+            element={<Mail size="14" />}
+            buttonText={siteConfig.contactLabel}
+            style={{
+              backgroundImage: "linear-gradient(to right, #87CEEB, #4682B4)",
+              transition: "background 0.5s ease",
+            }}
+            href={`mailto:${siteConfig.email}`}
+          />
+        </div>
+      </div>
+    );
+  }
 
-const Bio = () => {
   return (
     <div className="shadow-md rounded-xl backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-neutral-900 bg-opacity-10/80 border-opacity-50 p-6">
       <div>
@@ -19,9 +104,10 @@ const Bio = () => {
           height={120}
           blurDataURL="/profile.jpg"
           style={{
-            borderRadius: "50%",
+            borderRadius: "15%",
             border: "0.1px solid transparent",
           }}
+          className="h-32 w-32 rounded-xl object-cover object-center shadow-lg"
         />
       </div>
 
@@ -56,7 +142,7 @@ const Bio = () => {
         />
         <RippleButton
           element={<Mail size="14" />}
-          buttonText={`Contact Me`}
+          buttonText={siteConfig.contactLabel}
           style={{
             backgroundImage: "linear-gradient(to right, #87CEEB, #4682B4)",
             transition: "background 0.5s ease",