Add Modrinth link and do overflow stuff

Author: foxeddev

app/page.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import Logo from "@/components/Logo";
-import { SiGithub, SiDiscord, SiGmail } from "react-icons/si";
+import { SiGithub, SiDiscord, SiGmail, SiModrinth } from "react-icons/si";
 import { FaClock } from "react-icons/fa";
 import FoxFaceplant from "@/public/img/fox_faceplant.gif";
 import Clock from "@/components/Clock";
@@ -38,6 +38,16 @@ export default function Home() {
       </header>
       <main>
         <section className="grid">
+          <Link
+            className={cardStyles.card}
+            href={"https://modrinth.com/user/foxeddev"}
+            target="_blank"
+          >
+            <SiModrinth />
+            <h3>
+              Modrinth: <mark>FoxedDev</mark>
+            </h3>
+          </Link>
           <Link
             className={cardStyles.card}
             href={"https://github.com/foxeddev"}
@@ -72,7 +82,7 @@ export default function Home() {
           >
             <SiGmail />
             <h3>
-              Mail: <mark>[email protected]</mark>
+              <mark>E-Mail</mark>
             </h3>
           </Link>
           <div className={`${cardStyles.card} ${cardStyles.left}`}>
@@ -83,10 +93,7 @@ export default function Home() {
               TailwindCSS <br />
             </p>
           </div>
-          <div
-            className={`${cardStyles.card} ${cardStyles.left}`}
-            style={{ gridColumnEnd: `span 2` }}
-          >
+          <div className={`${cardStyles.card} ${cardStyles.left}`}>
             <h3>💻 Tech Stack</h3>
             <p>
               OS:{" "}
@@ -97,8 +104,8 @@ export default function Home() {
               WM:{" "}
               <Link href="https://hydeproject.pages.dev/" target="_blank">
                 HyDE
-              </Link>
-              {" "}(
+              </Link>{" "}
+              (
               <Link href="https://hypr.land/" target="_blank">
                 Hyprland
               </Link>

styles/card.module.css

@@ -5,6 +5,7 @@
   background-color: var(--bg);
   text-align: center;
   align-items: center;
+  overflow-x: scroll;
   box-shadow: 0 0 0 0 var(--primary);
   transition: 0.15s;
 }
@@ -24,6 +25,10 @@
   padding: 32px;
 }
 
+.card p {
+  width: max-content
+}
+
 @media screen and (max-width: 900px) {
   .card {
     gap: 16px;

styles/sections.css

@@ -22,7 +22,7 @@ section {
 section.grid {
   display: grid;
   gap: 16px;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: repeat(2, auto);
 }
 
 @media screen and (max-width: 900px) {