Changes to Home Section and About Section

.github/workflows/nextjs.yml

@@ -0,0 +1,97 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+<<<<<<< HEAD
+    branches: ["dev"]
+=======
+    branches: ["Production"]
+>>>>>>> 271be355bfcbeb8067b9a8e96f8abdb49e20e733
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,36 +1,3 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+A Portfolio page made in Next.JS using tailwind css and framer motion.
 
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+You can find the page living over at https://atiksh.dev/

app/layout.tsx

@@ -1,12 +1,6 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "@/components/theme-providor";
-import {
-  Geist,
-  Geist_Mono,
-  Jersey_10,
-  VT323,
-  Space_Grotesk,
-} from "next/font/google";
+import { Jersey_10, VT323, Space_Grotesk } from "next/font/google";
 import "./globals.css";
 
 const jersey10 = Jersey_10({
@@ -24,19 +18,11 @@ const vtFont = VT323({
   subsets: ["latin"],
   weight: ["400"],
 });
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Atiksh Khirbat",
+  description:
+    "Explore Atiksh Khirbat's Portfolio, showcasing projects and his expertise in full-stack development in working with frameworks like React, Next.js, Node.js, tailwind CSS and more. Tune in to see a new insight into design and its implementation",
 };
 
 export default function RootLayout({
@@ -45,9 +31,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${jersey10.variable} ${vtFont.variable} ${Spacegrotesk} antialiased`}
+        className={`${jersey10.variable} ${vtFont.variable} ${Spacegrotesk} antialiased`}
       >
         <ThemeProvider
           attribute="class"

app/page.tsx

@@ -9,19 +9,17 @@ export default function Home() {
     <div className="flex flex-col md:gap-y-48 min-h-screen bg-background font-jersey">
       <NavBar />
 
-      {/* Hero Section - centered on screen */}
       <div className="flex-1 flex items-center justify-center xl:px-20 min-h-screen mt-10 md:mt-32 xl:mt-0">
         <HeroSection />
       </div>
 
-      {/* About Section */}
       <div className="xl:px-20 h-fit justify-center flex flex-1 items-center overflow-clip">
         <AboutMe />
       </div>
       <div className="xl:px-20 min-fit justify-center flex flex-1 items-center">
         <ProjectSection />
       </div>
-      <div className="xl:px-20 min-fit justify-center flex flex-1 items-center">
+      <div className="xl:px-20 min-fit justify-center flex flex-1 items-center mb-20 md:mb-0">
         <ContactMe />
       </div>
     </div>

components/sections/aboutsection.tsx

@@ -1,9 +1,11 @@
 "use client";
 import { FaBugSlash, FaListCheck } from "react-icons/fa6";
 import { useInView } from "motion/react";
-import { motion } from "motion/react";
+
 import { useRef } from "react";
+import InvSection from "../ui/inventory";
 import { FaCoffee } from "react-icons/fa";
+import InventoryComp from "../ui/inventory";
 export default function AboutMe() {
   const ref = useRef(null);
   const isInView = useInView(ref);
@@ -40,14 +42,14 @@ export function AboutRight() {
         <div className="p-2.5 gap-2.5 w-full h-fit flex flex-col">
           {/* Character Top */}
           <div className="gap-2.5 p-2.5 flex w-full h-fit">
-            <div className="size-30 shrink-0 border-2 border-border relative bg-[url(/png_1.jpg)] bg-cover">
+            <div className="size-30 shrink-0 border-2 border-border relative bg-[url(https://github.com/AtikshKhirbat/portfolio/blob/e1b85b5b1f4f6b275c44cf49f27f2f514ff2f3f9/public/png_1.jpg?raw=true)] bg-cover">
               <p className="absolute bottom-0 right-0 bg-primary outline-2 px-0.5 outline-border text-text">
                 LVL 21
               </p>
             </div>
             <div className="w-full h-full justify-between flex flex-col">
               <div className="w-fit h-fit flex flex-col">
-                <p className="font-jersey text-2xl leading-3 h-fit">Rigbyte</p>
+                <p className="font-jersey text-2xl leading-3 h-fit">Atiksh</p>
                 <p className="text-xl text-secondarytext">
                   (Fullstack Developer)
                 </p>
@@ -79,7 +81,12 @@ export function Inventory() {
       <p className="text-2xl text-secondarytext">Inventory</p>
 
       <div className="lg:grid-cols-2 xl:grid-cols-5 grid gap-2 w-full h-fit text-2xl leading-none">
-        <p className="p-5 flex items-center text-center justify-center bg-mutedcard border-2 border-border">
+        <InventoryComp tip="Javascript: 6 months">JS</InventoryComp>
+        <InventoryComp tip="React: 6 months">React</InventoryComp>
+        <InventoryComp tip="Tailwind CSS: 6 months">Tailwind CSS</InventoryComp>
+        <InventoryComp tip="Next.JS: 6 months">Next.JS</InventoryComp>
+        <InventoryComp tip="Python: 2 years">Python</InventoryComp>
+        {/* <p className="p-5 flex items-center text-center justify-center bg-mutedcard border-2 border-border">
           JS
         </p>
         <p className="p-5 flex items-center text-center justify-center bg-mutedcard  border-2 border-border">
@@ -93,7 +100,7 @@ export function Inventory() {
         </p>
         <p className="p-5 flex items-center text-center justify-center bg-mutedcard  border-2 border-border">
           Python
-        </p>
+        </p> */}
       </div>
     </div>
   );
@@ -103,8 +110,8 @@ export function AchievmentCards() {
     <div className="p-2.5 gap-2.5 flex flex-col md:flex-row w-full h-fit">
       <div className="flex flex-col justify-between w-full py-4 px-2.5 border-2 border-border text-center items-center">
         <FaListCheck className="text-primary size-5" />
-        <p className="text-2xl leading-none">2</p>
-        <p className="text-secondarytext text-xl leading-none">Projects</p>
+        <p className="text-2xl leading-none">1</p>
+        <p className="text-secondarytext text-xl leading-none">Project(s)</p>
       </div>
       <div className="flex flex-col justify-between w-full py-4 px-2.5 border-2 border-border text-center items-center">
         <FaCoffee className="text-primary size-5" />
@@ -124,8 +131,10 @@ export function AboutLeft() {
     <div className="px-5 py-2.5 w-full min-h-full gap-5 flex flex-col justify-start">
       <div className="px-2.5 py-3 md:px-10 md:py-10 h-fit gap-4 flex flex-col relative border-2 bg-card border-border shadow-box w-full wrap-normal font-vt text-3xl">
         <p>
-          Hey! My name is Test, i am a fullstack developer with a
-          bachelor&apos;s degree in Computer Science.
+          Hey! My name is Atiksh, i am a fullstack developer with a
+          bachelor&apos;s degree in Computer Science with half a year of
+          experience with front end projects using React, NextJS, ExpressJS and
+          MongoDB.
         </p>
         <p>
           I work on making interactive and responsive webapps that can push your

components/sections/contactme.tsx

@@ -38,31 +38,34 @@ function MailSection() {
       <div className="gap-2.5 w-full h-fit flex flex-col">
         <p className="text-5xl">Let&apos; Connect!!!</p>
         <p className="font-vt text-2xl">
-          Drop me an email at xyz@gmail.com or say hi on my social media!!! I am
+          Drop me an email at hi@atiksh.dev or say hi on my social media!!! I am
           always open to discussing your creative ideas and bring your visions
           to life!!!
         </p>
       </div>
       <div className="gap-3.5 flex flex-col w-full h-fit">
-        <div className="gap-2.5 p-2.5 w-full h-fit flex border-2 border-border shadow-box items-center">
+        <div className="gap-2.5 p-2.5 w-full h-fit flex flex-col md:flex-row border-2 border-border shadow-box items-center">
           <div className="border-2 border-border bg-primary p-2.5">
             <GrMail className="size-6 text-text" />
           </div>
-          <p className="text-2xl">xyz@gmail.com</p>
+          <p className="text-2xl">hi@atiksh.dev</p>
         </div>
         <div className="w-full h-fit flex flex-col md:flex-row py-2.5 gap-3.5">
-          <SocialButton href="">
+          <SocialButton href="https://github.com/AtikshKhirbat" target="_blank">
             <FaGithub className="size-7" />
             <p className="text-2xl">Github</p>
           </SocialButton>
-          <SocialButton href="">
+          <SocialButton
+            href="https://www.linkedin.com/in/atikshkhirbat/"
+            target="_blank"
+          >
             <FaLinkedin className="size-7" />
             <p className="text-2xl">Linkedin</p>
           </SocialButton>
-          <SocialButton href="">
+          {/* <SocialButton href="">
             <FaXTwitter className="size-7" />
             <p className="text-2xl">X (Twitter)</p>
-          </SocialButton>
+          </SocialButton> */}
         </div>
       </div>
     </div>
@@ -71,7 +74,7 @@ function MailSection() {
 
 export function ContactCard() {
   return (
-    <div className="w-full h-fit px-5 py-2.5 grid grid-cols-2 md:grid-cols-4 justify-between border-t-2 border-dashed border-[#D1D5DB]">
+    <div className="w-full h-fit px-5 py-2.5 grid grid-cols-2 md:grid-cols-4 justify-between border-t-2 border-dashed border-secondrytext">
       <div className="flex flex-col p-5">
         <div className="flex flex-col items-center justify-center text-center">
           <BiSolidSend className="size-5" />