only one wernong

zobkazi · Jun 20, 2024 · 02e10d4 · 02e10d4
1 parent aed1887
commit 02e10d4
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 97 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -3,7 +3,7 @@ const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     images: {
-        domains: ["skillicons.dev", "github.com"],
+        domains: ["skillicons.dev", "github.com", "readme-typing-svg.demolab.com", "img.shields.io", "komarev.com", "avatars.githubusercontent.com", "api.codetime.dev", "images.unsplash.com", "img.shields.io"],
     },
 };
 

diff --git a/src/components/about/AboutMe.tsx b/src/components/about/AboutMe.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
-import Thanks from './Thanks';
+import Image from 'next/image';
 
 const AboutMe = () => {
   return (
     <div className="  bg-gray-100 dark:bg-gray-800 flex justify-center items-center">
       <div className="lg:w-[80%] sm:w-[80%] xs:w-[90%] mx-auto flex flex-col lg:flex-row gap-8 items-center">
         {/* Image Section */}
         <div className="w-full lg:w-1/3 flex justify-center lg:justify-end">
-          <img
+          <Image
+            width={300}
+            height={300}
             src="https://avatars.githubusercontent.com/u/105772384?v=4"
             alt="About Me"
             className="w-32 h-32 lg:w-48 lg:h-48 object-cover rounded-full shadow-xl border-green-400 border-4"
@@ -19,7 +21,7 @@ const AboutMe = () => {
           <h2 className="text-3xl font-semibold uppercase font-serif">Samuel Abera</h2>
           <hr className="w-[50%] h-1 rounded-full border-t-green-500 bg-green-500" />
           <p className="text-sm">
-            Hello! I'm Samuel Abera, a versatile developer specializing in bridging the gap between front-end design and back-end functionality. My expertise lies in creating seamless user experiences by transforming lines of code into interactive and intuitive digital solutions. I excel in solving complex problems and collaborating effectively with diverse teams to deliver innovative solutions.
+            Hello! I am Samuel Abera, a versatile developer specializing in bridging the gap between front-end design and back-end functionality. My expertise lies in creating seamless user experiences by transforming lines of code into interactive and intuitive digital solutions. I excel in solving complex problems and collaborating effectively with diverse teams to deliver innovative solutions.
           </p>
           <p className="text-sm">
             I thrive on embracing the latest technologies to build efficient and scalable applications. Passionate about coding and committed to excellence, I am dedicated to crafting the future of digital experiences. With a strong foundation in Node.js, JavaScript, and TypeScript, I consistently push the boundaries of what’s possible in web development, ensuring that each project not only meets but exceeds user expectations.

diff --git a/src/components/blogs/Blogs.tsx b/src/components/blogs/Blogs.tsx
@@ -2,6 +2,8 @@
 import React, { useState } from "react";
 import BlogPostData from "@/context/BlogPostData";
 import ShareBlockPost from "./ShareBlockPost";
+import Image from "next/image";
+import Link from "next/link";
 
 interface Post {
   title: string;
@@ -40,8 +42,10 @@ const BlogsComponent: React.FC = () => {
               key={index}
               className="w-full mx-auto group sm:max-w-sm rounded-lg border border-green-300 shadow-xl shadow-green-400/30"
             >
-              <a href={post.href} className="block overflow-hidden rounded-lg">
-                <img
+              <Link href={post.href} className="block overflow-hidden rounded-lg">
+                <Image
+                  width={500}
+                  height={300}
                   src={post.img}
                   loading="lazy"
                   alt={post.title}
@@ -59,7 +63,7 @@ const BlogsComponent: React.FC = () => {
                   </p>
 
                 </div>
-              </a>
+              </Link>
             </li>
           ))}
         </ul>

diff --git a/src/components/blogs/ShareBlockPost.tsx b/src/components/blogs/ShareBlockPost.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 
 const ShareBlockPost: React.FC = () => {
@@ -7,36 +8,36 @@ const ShareBlockPost: React.FC = () => {
         <p className="text-green-900 dark:text-green-300 text-xl md:text-2xl font-bold border-b-4 border-b-green-300">Share this post</p>
         <ul className="flex flex-row items-center justify-center text-center mt-5">
           <li className="mx-2">
-            <a href="" target="_blank" aria-label="Share on Twitter">
+            <Link href="" target="_blank" aria-label="Share on Twitter">
               <svg className="h-8 text-green-700 dark:text-green-300 hover:text-green-300 dark:hover:text-green-500" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <title>Twitter</title>
                 <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
               </svg>
-            </a>
+            </Link>
           </li>
           <li className="mx-2">
-            <a href="" target="_blank" aria-label="Share on LinkedIn">
+            <Link href="" target="_blank" aria-label="Share on LinkedIn">
               <svg className="h-8 text-green-700 dark:text-green-300 hover:text-green-300 dark:hover:text-green-500" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <title>LinkedIn</title>
                 <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
               </svg>
-            </a>
+            </Link>
           </li>
           <li className="mx-2">
-            <a href="" target="_blank" aria-label="Share on Mastodon">
+            <Link href="" target="_blank" aria-label="Share on Mastodon">
               <svg className="h-8 text-green-700 dark:text-green-300 hover:text-green-300 dark:hover:text-green-500" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <title>Mastodon</title>
                 <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path>
               </svg>
-            </a>
+            </Link>
           </li>
           <li className="mx-2">
-            <a href="" target="_blank" aria-label="Share on Facebook">
+            <Link href="" target="_blank" aria-label="Share on Facebook">
               <svg className="h-8 text-green-700 dark:text-green-300 hover:text-green-300 dark:hover:text-green-500" fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <title>Facebook</title>
                 <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
               </svg>
-            </a>
+            </Link>
           </li>
         </ul>
       </div>

diff --git a/src/components/github-stats/GithubStats.tsx b/src/components/github-stats/GithubStats.tsx
@@ -1,63 +1,99 @@
 import Link from "next/link";
 import React from "react";
+import Footer from "../footer/Footer";
 
 const GithubStats = () => {
   return (
     <div className="flex flex-col gap-8 bg-gray-100 dark:bg-gray-800 p-8">
       {/* Profile Views */}
       <Link href="https://github.com/zobkazi" target="_blank">
+        <picture>
         <img
           className="w-full"
-        src="https://komarev.com/ghpvc/?username=zobkazi&label=Profile%20views&color=0e75b6&style=flat"
-        alt="GitHub profile views"
-      />
+          src="https://komarev.com/ghpvc/?username=zobkazi&label=Profile%20views&color=0e75b6&style=flat"
+          alt="GitHub profile views"
+        />
+        </picture>
+
       </Link>
 
       <Link href="https://github.com/zobkazi" target="_blank">
+        <picture>
         <img
           className="w-full"
-        alt="CodeTime Badge"
-        src="https://img.shields.io/endpoint?style=social&color=222&url=https%3A%2F%2Fapi.codetime.dev%2Fshield%3Fid%3D25584%26project%3D%26in=0"
-      ></img>
+          alt="CodeTime Badge"
+          src="https://img.shields.io/endpoint?style=social&color=222&url=https%3A%2F%2Fapi.codetime.dev%2Fshield%3Fid%3D25584%26project%3D%26in=0"
+        ></img>
+        </picture>
+
       </Link>
 
       {/* WakaTime */}
 
-
-      <Link  href="https://wakatime.com/@f22f5f67-c272-4052-bc4f-b9ee26dfabff" target="_blank">
-        <img className="w-full" src="https://wakatime.com/badge/user/f22f5f67-c272-4052-bc4f-b9ee26dfabff.svg" alt="Total time coded since May 31 2024" />
+      <Link
+        href="https://wakatime.com/@f22f5f67-c272-4052-bc4f-b9ee26dfabff"
+        target="_blank"
+      >
+        <picture>
+        <img
+          className="w-full"
+          src="https://wakatime.com/badge/user/f22f5f67-c272-4052-bc4f-b9ee26dfabff.svg"
+          alt="Total time coded since May 31 2024"
+        />
+        </picture>
+
       </Link>
 
-
       {/* GitHub Top Languages Badge Cards */}
-      <img src="http://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username=zobkazi&theme=2077" />
+      <picture>
+      <img src="http://github-profile-summary-cards.vercel.app/api/cards/repos-per-language?username=zobkazi&theme=2077" alt="zobkazi" width="100%" />
+      </picture>
+
       {/* Commits Card */}
-      <img src="http://github-profile-summary-cards.vercel.app/api/cards/productive-time?username=zobkazi&theme=2077" />
+      <picture>
+      <img width="100%" height="180em" src="http://github-profile-summary-cards.vercel.app/api/cards/productive-time?username=zobkazi&theme=2077" alt="zobkazi" />
+      </picture>
+
       {/* Contributions in last 30 days */}
-      <img src="http://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=zobkazi&theme=2077" />
+      <picture>
+      <img
+        width="100%"
+        height="180em"
+        src="http://github-profile-summary-cards.vercel.app/api/cards/profile-details?username=zobkazi&theme=2077"
+        alt="zobkazi"
+        />
+      </picture>
+
       {/* Code Time */}
 
       {/* Most Use Languages in GitHub */}
-      <img
-        height="180em"
-        src="https://github-readme-stats.vercel.app/api/top-langs/?username=zobkazi&layout=compact&theme=dark"
-      />
+     <picture>
+        <img
+          width="100%"
+          height="180em"
+          src="https://github-readme-stats.vercel.app/api/top-langs/?username=zobkazi&layout=compact&theme=dark"
+          alt="zobkazi"
+        />
+     </picture>
 
-      <img
-        height="180em"
-        src="https://github-readme-streak-stats.herokuapp.com/?user=zobkazi&theme=dark"
-        alt="zobkazi"
-      />
+      <picture>
+        <img
+          width="100%"
+          height="180em"
+          src="https://github-readme-streak-stats.herokuapp.com/?user=zobkazi&theme=dark"
+          alt="zobkazi"
+        />
+      </picture>
 
-      <Link href="https://www.linkedin.com/in/zobaidulkazi" target="_blank">
+      <picture>
         <img
-          src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white"
-          alt="LinkedIn"
+          width={"100%"}
+          height={"100%"}
+          src="https://github-readme-stats.vercel.app/api?username=zobkazi&show_icons=true&locale=en&theme=dark"
+          alt="zobkazi"
         />
-      </Link>
-      <Link href="https://github.com/zobkazi" target="_blank">
-        <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=dark" />
-      </Link>
+      </picture>
+      <Footer />
     </div>
   );
 };

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -40,7 +40,9 @@ const HomePage: React.FC = () => {
       <Footer />
 
       <Link className=" bg-gray-100 dark:bg-gray-800" href="https://wakatime.com/@f22f5f67-c272-4052-bc4f-b9ee26dfabff" target="_blank">
+        <picture>
         <img src="https://wakatime.com/badge/user/f22f5f67-c272-4052-bc4f-b9ee26dfabff.svg" alt="Total time coded since May 31 2024" />
+        </picture>
       </Link>
     </div>
   );