Implemented main page, working on catto feature and testing few other…

… nextjs features
IMXNOOBX · Mar 25, 2024 · 3fceb4f · 3fceb4f
1 parent e5b8ea4
commit 3fceb4f
Show file tree

Hide file tree

Showing 22 changed files with 1,222 additions and 160 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+NEXT_PUBLIC_GITHUB_USERNAME=IMXNOOBX # Your GitHub username
+
+# General settings
+CACHE_TIME=86400 # 1 day
diff --git a/.env.template b/.env.template
diff --git a/app/components/intro/index.tsx b/app/components/intro/index.tsx
diff --git a/app/components/intro/layout.tsx b/app/components/intro/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Universe",
+  description: "With great power comes great responsibility.",
+};
+
+export default function IntroLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="bg-red overflow-x-hidden">
+      {children}
+    </div>
+  );
+}
diff --git a/app/components/intro/page.tsx b/app/components/intro/page.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+
+import UserCard from "@/app/components/userinfo/page";
+import { MotionDiv } from "../utils/animation";
+
+export default async function Intro() {
+    return (
+        <div className={`static w-full flex flex-col mt-10 sm:mt-16 lg:mt-20 text-white/50 opacity-100 translate-x-0`}>
+            <MotionDiv initial="hidden" animate="visible" variants={{
+                hidden: {
+                    opacity: 0,
+                    x: '-20%',
+                    width: 0,
+                },
+                visible: {
+                    opacity: 1,
+                    x: 0,
+                    width: 'auto',
+                    transition: {
+                        duration: 5,
+                    }
+                }
+            }}>
+                <h1 className="font-bold text-4xl sm:text-6xl lg:text-8xl opacity-100 text-border-2 lg:ml-20 truncate">IMXNOOBX</h1>
+                <h2 className="font-bold text-1xl sm:text-2xl lg:text-3xl lg:ml-40 truncate">Welcome to my portfolio</h2>
+            </MotionDiv>
+
+            <UserCard />
+        </div>
+    );
+};
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 
-const Layout = () => {
+export default function Layout() {
     const [loaded, setLoaded] = useState(false);
 
     useEffect(() => {
@@ -19,4 +19,3 @@ const Layout = () => {
     );
 };
 
-export default Layout;
diff --git a/app/components/navbar/index.tsx b/app/components/navbar/index.tsx
diff --git a/app/components/navbar/navlink/index.tsx b/app/components/navbar/navlink/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Link from "next/link";
 import Image from "next/image";
 
-const Button = ({ image, to, className, children }: { image: any, to: any, className: string, children: React.ReactNode }) => {
+export default function Button({ image, to, className, children }: { image: any, to: any, className: string, children: React.ReactNode }) {
     return (
         <div className={`group select-none cursor-pointer ${className}`}>
             <div className="flex transition-all duration-300 bg-transparent group-hover:py-2">
@@ -13,6 +13,4 @@ const Button = ({ image, to, className, children }: { image: any, to: any, class
             </div>
         </div>
     );
-};
-
-export default Button;
+};
diff --git a/app/components/navbar/profiles/index.tsx b/app/components/navbar/profiles/index.tsx
@@ -1,16 +1,12 @@
 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
-// import Icon from "@/public/assets/vercel.svg";
-// import Github from "@/public/assets/github.svg";
-// import Discord from "@/public/assets/discord.svg";
-// import Openlayout from "@/public/assets/openlayout.svg";
 
 const Profile = ({ pfp, applicationp, className, full }: { pfp: any, applicationp: any, className: string, full: boolean }) => {
     return (
         <div className={`group transition ease-in-out select-none relative p-1 ${className}`}>
             <Image src={pfp} className={`w-full fill-current select-none hover:drop-shadow-2xl rounded-xl transition-all ease-in duration-300 group-hover:scale-105 aspect-square ${full && 'border-2 border-gray-700'}`} alt="icon" />
-            <Image src={applicationp} className="w-6 absolute -bottom-1 select-none right-0 group-hover:-translate-x-10 group-hover:-translate-y-10 ease-out group-hover:rotate-full transition-all duration-300" alt="icon" />
+            <Image src={applicationp} className="h-6 w-6 absolute -bottom-1 select-none right-0 group-hover:-translate-x-10 group-hover:-translate-y-10 ease-out group-hover:rotate-full transition-all duration-300" alt="icon" />
         </div>
     );
 };

diff --git a/app/components/userinfo/error.tsx b/app/components/userinfo/error.tsx
@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+
+export default function Error({
+    error,
+    reset,
+  }: {
+    error: Error & { digest?: string }
+    reset: () => void
+  }) {
+
+    return (           
+        <aside className="mt-10 mx-auto bg-black/20 backdrop-blur-lg border-2 border-gray-500/50 text-white p-6 rounded-xl w-full max-w-lg font-mono">
+            <div className="flex justify-between items-center">
+                <div className="flex space-x-2 text-red-500">
+                <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <p className="text-sm w-5 h-2 bg-gray-600/50"></p>
+            </div>
+            <div className="mt-4">
+                <p className="text-green-400">$ curl https://github.com/{process.env.NEXT_PUBLIC_GITHUB_USERNAME}.json</p>
+                <p className="text-red-500">Error fetching data.</p>
+            </div>
+        </aside>
+    );
+};
diff --git a/app/components/userinfo/loading.tsx b/app/components/userinfo/loading.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import next from "next";
+
+export default async function Loading() {
+    return (           
+        <aside className="mt-10 mx-auto bg-black/20 backdrop-blur-lg border-2 border-gray-500/50 text-white p-6 rounded-xl w-full max-w-lg font-mono">
+            <div className="flex justify-between items-center">
+                <div className="flex space-x-2 text-red-500">
+                <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                </div>
+                <p className="text-sm w-5 h-2 bg-gray-600/50"></p>
+            </div>
+            <div className="mt-4">
+                <p className="text-green-400">$ curl https://github.com/{process.env.NEXT_PUBLIC_GITHUB_USERNAME}.json</p>
+                <p className="text-white">Fetching...</p>
+            </div>
+        </aside>
+    );
+};
diff --git a/app/components/userinfo/page.tsx b/app/components/userinfo/page.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import Image from "next/image";
+import { MotionDiv } from "../utils/animation";
+
+
+async function getUserInfo(username: string = "") {
+    if (!username)
+        username = process.env.NEXT_PUBLIC_GITHUB_USERNAME as string;
+
+    if (!username)
+        throw new Error("NEXT_PUBLIC_GITHUB_USERNAME is not set in .env or .env.local");
+
+    // const res = await fetch(
+    //     `https://api.github.com/users/${username}`,  
+    //     { next: { revalidate: parseInt(process.env.CACHE_TIME || "3600") }})
+    // return await res.json();
+    return {
+        login: 'IMXNOOBX',
+        id: 69653071,
+        node_id: 'MDQ6VXNlcjY5NjUzMDcx',
+        avatar_url: 'https://avatars.githubusercontent.com/u/69653071?v=4',
+        gravatar_id: '',
+        url: 'https://api.github.com/users/IMXNOOBX',
+        html_url: 'https://github.com/IMXNOOBX',
+        followers_url: 'https://api.github.com/users/IMXNOOBX/followers',
+        following_url: 'https://api.github.com/users/IMXNOOBX/following{/other_user}',
+        gists_url: 'https://api.github.com/users/IMXNOOBX/gists{/gist_id}',
+        starred_url: 'https://api.github.com/users/IMXNOOBX/starred{/owner}{/repo}',
+        subscriptions_url: 'https://api.github.com/users/IMXNOOBX/subscriptions',
+        organizations_url: 'https://api.github.com/users/IMXNOOBX/orgs',
+        repos_url: 'https://api.github.com/users/IMXNOOBX/repos',
+        events_url: 'https://api.github.com/users/IMXNOOBX/events{/privacy}',
+        received_events_url: 'https://api.github.com/users/IMXNOOBX/received_events',
+        type: 'User',
+        site_admin: false,
+        name: 'IMXNOOBX',
+        company: 'Academy Of Life',
+        blog: 'https://imxnoobx.com',
+        location: 'Earth',
+        email: null,
+        hireable: null,
+        bio: '• hey hi! hope you have a great day! •ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ  \r\n' +
+            '•> Hiii im noob!ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ•> If you need help dm me <3',
+        twitter_username: null,
+        public_repos: 25,
+        public_gists: 0,
+        followers: 64,
+        following: 25,
+        created_at: '2020-08-13T21:26:43Z',
+        updated_at: '2024-03-11T06:46:08Z'
+    }
+}
+
+export default async function UserCard() {
+    const userInfo = await getUserInfo();
+
+    if (!userInfo)
+        throw new Error("Error fetching data.");
+
+    const clean_since = (userInfo?.created_at) ? 
+        userInfo.created_at.split('T')[0].replace(/-/g, "/") : 
+            "very long ago";
+
+    return (
+        <MotionDiv initial="hidden" animate="visible" variants={{
+            hidden: {
+                opacity: 0,
+                y: 10,
+            },
+            visible: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                    duration: 2,
+                }
+            }
+        }}
+        >
+            {/* Credits to https://uiverse.io/Yaya12085/soft-jellyfish-99 */}
+            <aside className="mt-20 mx-auto bg-black/20 backdrop-blur-lg border-2 border-gray-500/50 text-white p-6 rounded-xl w-full font-mono">
+                <div className="flex justify-between items-center">
+                    <div className="flex space-x-2 text-red-500">
+                        <div className="w-3 h-3 rounded-full bg-red-500 hover:animate-pulse"></div>
+                        <div className="w-3 h-3 rounded-full bg-yellow-500 hover:animate-pulse"></div>
+                        <div className="w-3 h-3 rounded-full bg-green-500 hover:animate-pulse"></div>
+                    </div>
+                    <p className="text-sm">github</p>
+                </div>
+                <div className="mt-4 truncate">
+                    <p className="text-green-400">$ curl https://github.com/{userInfo.name}.json</p>
+                    <p className="text-white flex">{"{"}</p>
+                    <p className="text-gray-500 flex ml-6">username: <span className="text-white ml-1">{userInfo.name}</span></p>
+                    <p className="text-gray-500 flex ml-6">avatar: <Image className="rounded-lg ml-2" width={24} height={24} src={userInfo?.avatar_url} alt="user avatar" /></p>
+                    <p className="text-gray-500 flex ml-6">blog: <span className="text-white ml-1 hover:underline"><a href={userInfo.blog} target="_blank" rel="noopener noreferrer">{userInfo?.blog}</a></span></p>
+                    <p className="text-gray-500 flex ml-6">company: <span className="text-white ml-1">{userInfo?.company}</span></p>
+                    <p className="text-gray-500 flex ml-6">bio: <span className="text-white ml-1">{userInfo?.bio}</span></p>
+                    <p className="text-gray-500 flex ml-6">public repositories: <span className="text-white ml-1">{userInfo.public_repos}</span></p>
+                    <p className="text-gray-500 flex ml-6">developer since: <span className="text-white ml-1">{clean_since}</span></p>
+                    <p className="text-white flex">{"}"}</p>
+                    <br />
+                    <p className="text-white">found 1 user, following {userInfo.following} developers and followed by {userInfo.followers} enthusiast.</p>
+                </div>
+            </aside>
+        </MotionDiv>
+    );
+};