Merge pull request #29 from basvandriel/feature/githublink

Add GitHub link to the Hero component

Author: basvandriel

src/components/Hero.tsx

@@ -107,7 +107,26 @@ export default function Hero() {
               <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></div>
               {t("homepage.hero_available_status")}
             </div>
-            <LanguageToggle />
+            <div className="flex items-center gap-6">
+              <a
+                href="https://github.com/basvandriel/portfolio-website"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-slate-500 hover:text-slate-300 transition-colors"
+                aria-label="View source on GitHub"
+                onClick={() => trackEvent("External", "github_link_clicked")}
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+              </a>
+              <LanguageToggle />
+            </div>
           </div>
 
           <div className="grid lg:grid-cols-[1.75fr_1fr] gap-12 lg:gap-20 lg:items-start">

src/components/LanguageToggle.tsx

@@ -19,9 +19,23 @@ export default function LanguageToggle() {
   return (
     <button
       onClick={toggleLanguage}
-      className="text-slate-500 hover:text-slate-300 text-sm transition-colors duration-200 font-medium"
+      className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md border border-slate-600/30 text-slate-500 hover:text-slate-300 hover:border-slate-500/50 text-sm transition-all duration-200 font-medium"
       aria-label="Switch language"
     >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="2" y1="12" x2="22" y2="12"></line>
+        <path d="m12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+      </svg>
       {i18n.language === "nl" ? "EN" : "NL"}
     </button>
   );