added the about page

akib1689 · Apr 3, 2024 · 95bf3f9 · 95bf3f9
1 parent d99a67a
commit 95bf3f9
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 96 deletions.
diff --git a/public/Akibur_Rahman_Resume.pdf b/public/Akibur_Rahman_Resume.pdf
diff --git a/public/logo.tsx b/public/logo.tsx
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Contact = () => {
+  return (
+    <div>
+      Contact
+    </div>
+  )
+}
+
+export default Contact
diff --git a/src/app/education/page.tsx b/src/app/education/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Education = () => {
+  return (
+    <div>
+      Education
+    </div>
+  )
+}
+
+export default Education
diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Experience = () => {
+  return (
+    <div>
+      Experience
+    </div>
+  )
+}
+
+export default Experience
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import "../styles/globals.css";
 
 import { ThemeProvider } from "@/components/theme-provider";
 import { MenubarComponent } from "@/components/navigation";
+import { ProfileLeft } from "@/components/left-profile-component";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,7 +19,6 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <>
     <html lang="en" suppressHydrationWarning>
       <head />
       <body>
@@ -31,12 +31,16 @@ export default function RootLayout({
           <section className="pt-8 px-4">
             <MenubarComponent />
           </section>
-          <main >
+          <div className="flex flex-col md:flex-row py-6 px-3">
+          <div>
+            <ProfileLeft />
+          </div>
+          <main className="p-6">
             {children}
           </main>
+          </div>
         </ThemeProvider>
       </body>
     </html>
-  </>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,30 +1,11 @@
 "use client";
 import * as React from "react";
-import { ProfileLeft } from "@/components/left-profile-component";
-import { MenubarComponent } from "@/components/navigation";
-import { useMediaQuery } from "@/hooks/use-media-query";
 import { About } from "@/components/about";
 
 export default function Home() {
-  const isDesktop = useMediaQuery("(min-width: 1208px)");
   return (
-    <>
-      <main className={isDesktop ? "flex justify-center p-8 h-fit" : "flex flex-col justify-center p-8 h-fit"}>
-        {isDesktop ? (
-          <>
-            <ProfileLeft />
-            <div className="flex flex-col w-full">
-              <div className="flex-grow">
-                <About />
-              </div>
-            </div>
-          </>
-        ) : (
-          <>
-            <ProfileLeft />
-          </>
-        )}
-      </main>
-    </>
+    <div className="flex flex-col md:flex-row">
+      <About />
+    </div>
   );
 }
diff --git a/src/components/about.tsx b/src/components/about.tsx
@@ -1,16 +1,24 @@
 import React from 'react'
-
+
+import Socials from '@/components/social'
+
+import DownloadCv from './download-cv'
 
 export function About() {
     return (
         <div className='flex flex-col gap-8 p-3 mt-5'>
-            <h1 className='sm:text-2xl md:text-4xl'>Ambitious Computer Science grad driven by innovation.</h1>
-            <p>
-                Hi, I am Akibur Rahman, a computer science graduate from Bangladesh University of Engineering and Technology. Has a proven track record in Android application development and a passion for solving real world challenges. Over the past two years I have honed my skills by developing and launching two successful application on the Google Play Store.  
-            </p>
-            <p>
-                Additionally, I have demonstrated my versatility by effectively managing a home lab environment, overseeing the implementation and upkeep of various services such as Pi-hole, Unbound, Nextcloud, and a media stack comprising Sonarr, Radarr, Jackett, and Jellyfin.
+            <div className='flex flex-col gap-2 text-3xl md:text-4xl font-semibold'>
+                <p>Hello, This is <span className=" inline-block bg-gradient-to-r from-cyan-600 to-purple-200 text-transparent bg-clip-text">Akibur Rahman</span>, </p>
+                <p className='text-2xl md:text-3xl'>and I&apos;m professional <span className="bg-gradient-to-r from-red-500 to-purple-400 text-transparent bg-clip-text">Software Engineer</span></p>
+            </div>
+            <Socials />
+            <p className='text-lg md:text-xl font-semibold'>&gt; Who am I?</p>
+            <p className='text-md md:text-lg'>
+                I&apos;m a software engineer with strong interest in finding <span className="font-medium text-red-500">elegant solutions</span> to challenging issues. I like producing excellent software that goes above and beyond expectations. I have a solid background in <span className="font-medium text-red-500">Computer Science</span> and am dedicated to innovation. I&apos;m always learning and keeping up with the newest technological advancements, so I&apos;m prepared to lend my experience to initiatives that have a real-world impact. 
             </p>
+            <div>
+                <DownloadCv />
+            </div>
         </div>
     )
 }

diff --git a/src/components/desktop-nav.tsx b/src/components/desktop-nav.tsx
@@ -22,7 +22,7 @@ import { Button } from "./ui/button";
 import { DownloadIcon } from "@radix-ui/react-icons";
 import { ModeToggle } from "./mode-toggle";
 
-import SvgComponent from "../../public/logo";
+import Logo from "../../public/logo";
 
 
 export function DesktopMenubar() {
@@ -32,7 +32,7 @@ export function DesktopMenubar() {
         <div className="w-full flex flex-grow">
             <div className="w-full pl-10">
 
-                <SvgComponent fill="#fff" className=" h-8 w-auto"/>
+                <Logo fill="#fff" className=" h-8 w-auto"/>
 
             </div>
             <NavigationMenu className=" justify-end pr-12">
@@ -51,10 +51,6 @@ export function DesktopMenubar() {
                     </NavigationMenuItem>
                 ))}
                 </NavigationMenuList>
-                <Button className="flex mx-4 space-x-2">
-                    <DownloadIcon className="h-5 w-5" />
-                    <span className="ml-2">Resume</span>
-                </Button>
                 <ModeToggle />
             </NavigationMenu>
         </div>

diff --git a/src/components/download-cv.tsx b/src/components/download-cv.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { Button } from '@/components/ui/button'
+import { DownloadIcon } from '@radix-ui/react-icons'
+import { cn } from '@/lib/utils'
+
+type DownloadCvProps =  {
+    className?: string;
+}
+
+const DownloadCv = (props: DownloadCvProps) => {
+  return (
+    <Button variant='secondary' className={cn('flex w-fit h-fit px-5 py-3 gap-4 items-center justify-center', props.className)}>
+        <DownloadIcon className='w-6 h-6' />
+        <a href='/Akibur_Rahman_Resume.pdf' download>
+            Download CV
+        </a>
+    </Button>
+  )
+}
+
+export default DownloadCv
diff --git a/src/components/left-profile-component.tsx b/src/components/left-profile-component.tsx
@@ -33,21 +33,13 @@ import { useTheme } from 'next-themes';
 
 import { skills } from '@/lib/skills-list';
 
+import Socials from '@/components/social';
+
 
 // import { cn } from '@/lib/utils';
 
 // type CardProps = React.ComponentProps<typeof Card>;
 
-
-// env variables
-const { 
-    NEXT_PUBLIC_FACEBOOK, 
-    NEXT_PUBLIC_LINKEDIN,
-    NEXT_PUBLIC_GITHUB,
-    NEXT_PUBLIC_YOUTUBE,
-    NEXT_PUBLIC_TWITTER,
-} = process.env;
-
 export function ProfileLeft() {
     // get the current theme
     const { theme } = useTheme();
@@ -110,38 +102,7 @@ export function ProfileLeft() {
             <p className='font-medium text-md lg:text-lg'>
                 Socials
             </p>
-            <div className='flex flex-row space-x-3 w-fill'>
-                <a href={NEXT_PUBLIC_GITHUB}>
-                    <Avatar className='w-6 h-6'>
-                        <AvatarImage src={theme != 'light' ? '/images/github-light.png' : '/images/github.png'} />
-                        <AvatarFallback>.git</AvatarFallback>
-                    </Avatar>
-                </a>
-                <a href={NEXT_PUBLIC_LINKEDIN}>
-                    <Avatar className='w-6 h-6'>
-                        <AvatarImage src='/images/linkedin.png' />
-                        <AvatarFallback>ln</AvatarFallback>
-                    </Avatar>
-                </a>
-                <a href={NEXT_PUBLIC_YOUTUBE}>
-                    <Avatar className='w-9 h-6 rounded-none'>
-                        <AvatarImage src='/images/youtube.png' />
-                        <AvatarFallback>yt</AvatarFallback>
-                    </Avatar>
-                </a>
-                <a href={NEXT_PUBLIC_TWITTER}>
-                    <Avatar className='w-6 h-6 rounded-none'>
-                        <AvatarImage src='/images/twitter.png' />
-                        <AvatarFallback>tw</AvatarFallback>
-                    </Avatar>
-                </a>
-                <a type='_blank' href={NEXT_PUBLIC_FACEBOOK}>
-                    <Avatar className='w-6 h-6'>
-                        <AvatarImage src="/images/facebook.png" />
-                        <AvatarFallback>FB</AvatarFallback>
-                    </Avatar>
-                </a>
-            </div>        
+            <Socials />   
         </CardFooter>
     </Card>
     );

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
@@ -11,11 +11,10 @@ import {
 } from "@/components/ui/sheet"
 
 import { HamburgerMenuIcon } from "@radix-ui/react-icons";
-import { Button } from "./ui/button";
 import { menuList } from "@/lib/menu-list";
-import { DownloadIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
-
+import Logo from "../../public/logo";
+import DownloadCv from "./download-cv";
 
 export function MobileMenubar() {
     const [selectedItem, setSelectedItem] = useState(menuList[0].name);
@@ -32,9 +31,11 @@ export function MobileMenubar() {
     return (
       <>
         <Sheet>
-          <SheetTrigger className="flex justify-between items-center p-3">
-            <div className="w-6"></div>
-            <h2 className="text-center">{currentItem.name}</h2>
+          <SheetTrigger className="w-full flex justify-between items-center p-3">
+            <div>
+              <Logo fill="white" className=" h-6 w-auto"/>
+            </div>
+            <h2 className=" text-left">{currentItem.name}</h2>
             <HamburgerMenuIcon 
               className="my-1" 
               width={32} 
@@ -48,11 +49,8 @@ export function MobileMenubar() {
                 </Link>
               ))}
             </SheetHeader>
-            <SheetDescription className="p-5">
-              <Button className="flex justify-center w-full">
-                <DownloadIcon className="h-5 w-5" />
-                <span className="ml-2">Resume</span>
-              </Button>
+            <SheetDescription className="flex justify-center py-5">
+              <DownloadCv />
             </SheetDescription>
           </SheetContent>
       </Sheet>

diff --git a/src/components/social.tsx b/src/components/social.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+
+
+// env variables
+const { 
+    NEXT_PUBLIC_FACEBOOK, 
+    NEXT_PUBLIC_LINKEDIN,
+    NEXT_PUBLIC_GITHUB,
+    NEXT_PUBLIC_YOUTUBE,
+    NEXT_PUBLIC_TWITTER,
+} = process.env;
+
+import { 
+    Avatar, 
+    AvatarFallback, 
+    AvatarImage 
+} from "@/components/ui/avatar"
+
+
+import { useTheme } from 'next-themes';
+
+const Socials = () => {
+    const { theme } = useTheme();
+  return (
+    <div className='flex flex-row space-x-3 w-fill'>
+                <a href={NEXT_PUBLIC_GITHUB}>
+                    <Avatar className='w-6 h-6'>
+                        <AvatarImage src={theme != 'light' ? '/images/github-light.png' : '/images/github.png'} />
+                        <AvatarFallback>.git</AvatarFallback>
+                    </Avatar>
+                </a>
+                <a href={NEXT_PUBLIC_LINKEDIN}>
+                    <Avatar className='w-6 h-6'>
+                        <AvatarImage src='/images/linkedin.png' />
+                        <AvatarFallback>ln</AvatarFallback>
+                    </Avatar>
+                </a>
+                <a href={NEXT_PUBLIC_YOUTUBE}>
+                    <Avatar className='w-9 h-6 rounded-none'>
+                        <AvatarImage src='/images/youtube.png' />
+                        <AvatarFallback>yt</AvatarFallback>
+                    </Avatar>
+                </a>
+                <a href={NEXT_PUBLIC_TWITTER}>
+                    <Avatar className='w-6 h-6 rounded-none'>
+                        <AvatarImage src='/images/twitter.png' />
+                        <AvatarFallback>tw</AvatarFallback>
+                    </Avatar>
+                </a>
+                <a type='_blank' href={NEXT_PUBLIC_FACEBOOK}>
+                    <Avatar className='w-6 h-6'>
+                        <AvatarImage src="/images/facebook.png" />
+                        <AvatarFallback>FB</AvatarFallback>
+                    </Avatar>
+                </a>
+            </div> 
+  )
+}
+
+export default Socials