Merge pull request #47 from binhtran432k/feature/gh-stats

feat: enhance gh-stats

Author: binhtddev

src/components/gh-stats/gh-stats.tsx

@@ -0,0 +1,52 @@
+import { component$ } from "@builder.io/qwik";
+import { Link } from "@builder.io/qwik-city";
+
+const AVATAR_SIZE = 150;
+
+export default component$(() => {
+  return (
+    <section class="container m-auto flex flex-wrap items-start justify-center p-4">
+      <Link
+        href="https://github.com/binhtran432k"
+        class="relative mx-4 my-8 inline-block transition-opacity hover:opacity-80"
+        target="_blank"
+      >
+        <img
+          src="https://binhtran432k.com/binhtran432k/assets/avatar-lite.webp"
+          height={AVATAR_SIZE}
+          width={AVATAR_SIZE}
+          style={{ width: `${AVATAR_SIZE}px`, height: `${AVATAR_SIZE}px` }}
+          class="rounded-[50%] border-r-2 border-danger object-cover"
+          alt="My Avatar"
+        />
+        <div class="absolute -top-2 left-5 h-[120%] w-3/4 -rotate-[20deg] rounded-[50%] border-l-2 border-danger shadow-xl shadow-info/30" />
+      </Link>
+      <div class="flex flex-col shadow-lg shadow-info/30">
+        <Link
+          href="https://github-readme-stats.vercel.app/api?username=binhtran432k&show_icons=true"
+          class="inline-block transition-opacity hover:opacity-80"
+          target="_blank"
+        >
+          <img
+            src="https://github-readme-stats.vercel.app/api?username=binhtran432k&show_icons=true&disable_animations=true&hide_border=true&bg_color=00000000&text_color=f9fafb&title_color=a855f7&icon_color=a855f7"
+            height={220}
+            width={500}
+            alt="My Github Stats"
+          />
+        </Link>
+        <Link
+          href="https://github-readme-stats.vercel.app/api/top-langs/?username=binhtran432k&hide=html,css,nushell&langs_count=10&layout=compact"
+          class="inline-block transition-opacity hover:opacity-80"
+          target="_blank"
+        >
+          <img
+            src="https://github-readme-stats.vercel.app/api/top-langs/?username=binhtran432k&hide=html,css,nushell&langs_count=10&layout=compact&disable_animations=true&hide_border=true&bg_color=00000000&text_color=f9fafb&title_color=a855f7&icon_color=a855f7"
+            height={240}
+            width={320}
+            alt="My Github Stats"
+          />
+        </Link>
+      </div>
+    </section>
+  );
+});

src/components/landing/landing.tsx

@@ -1,18 +1,17 @@
 import { component$ } from "@builder.io/qwik";
-import bgImg from "~/assets/background.jpg";
+import BackgroundImage from "~/assets/background.jpg?jsx";
 import Header from "../header/header";
 import Intro from "../intro/intro";
 import Social from "../social/social";
 import ScrollDown from "../scroll-down/scroll-down";
 
 export default component$(() => {
   return (
-    <div
-      class="relative flex min-h-screen flex-col bg-cover bg-center [--bg-filter:theme(colors.dark/50%)]"
-      style={{
-        backgroundImage: `linear-gradient(var(--bg-filter), var(--bg-filter)), url('${bgImg}')`,
-      }}
-    >
+    <div class="relative flex min-h-screen flex-col">
+      <BackgroundImage
+        class="absolute left-0 top-0 z-[-1] h-full w-full object-cover brightness-50"
+        alt="Background"
+      />
       <Header />
       <div class="flex grow flex-col flex-wrap justify-between">
         <div class="flex grow flex-col justify-between">

src/routes/404.tsx

@@ -1,17 +1,16 @@
 import { component$ } from "@builder.io/qwik";
 import { type DocumentHead } from "@builder.io/qwik-city";
-import bgImg from "~/assets/background.jpg";
+import BackgroundImage from "~/assets/background.jpg?jsx";
 import Header from "~/components/header/header";
 import Social from "~/components/social/social";
 
 export default component$(() => {
   return (
-    <div
-      class="relative flex min-h-screen flex-col bg-cover bg-center [--bg-filter:theme(colors.dark/50%)]"
-      style={{
-        backgroundImage: `linear-gradient(var(--bg-filter), var(--bg-filter)), url('${bgImg}')`,
-      }}
-    >
+    <div class="relative flex min-h-screen flex-col">
+      <BackgroundImage
+        class="absolute left-0 top-0 z-[-1] h-full w-full object-cover brightness-50"
+        alt="Background"
+      />
       <Header />
       <div class="flex grow flex-col flex-wrap justify-between px-4">
         <div class="container m-auto text-center">

src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
+import GhStats from "~/components/gh-stats/gh-stats";
 import Landing from "~/components/landing/landing";
 import Skill from "~/components/skill/skill";
 
@@ -8,6 +9,7 @@ export default component$(() => {
     <>
       <Landing />
       <Skill />
+      <GhStats />
     </>
   );
 });