Added basic text

ujaandas · Aug 19, 2024 · 816959f · 816959f
1 parent 9951222
commit 816959f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,8 @@
 import Sidebar from "@/components/Sidebar";
 import SectionScroller from "@/components/SectionScroller";
 import { fetchAllPostContent } from "./lib/posts";
-import AboutMe from "@/components/chunks/AboutMe";
+import QuickInfo from "@/components/chunks/QuickInfo";
+import AboutMeContent from "@/components/chunks/AboutMeContent";
 
 export default async function Home() {
   const postData = await fetchAllPostContent();
@@ -13,8 +14,11 @@ export default async function Home() {
     //     <SectionScroller data={postData} />
     //   </div>
     // </main>
-    <main className="flex flex-col md:flex-row p-10 align-middle items-center justify-center text-cat-latte-subtext-0">
-      <AboutMe />
+    <main className="flex flex-col md:flex-row p-10 items-center justify-center text-cat-latte-subtext-0">
+      <section className="flex flex-col md:flex-row items-center max-w-3xl justify-center align-bottom">
+        <QuickInfo />
+        <AboutMeContent />
+      </section>
     </main>
   );
 }
diff --git a/src/components/BarItem.tsx b/src/components/BarItem.tsx
@@ -12,13 +12,8 @@ export default function SidebarItem({
   children,
 }: SidebarItemProps) {
   return (
-    <div className={`flex ${children != undefined ? "mt-1" : ""} items-center`}>
-      <a
-        href={link}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={`flex ${children != undefined ? "mt-1" : ""} items-center`}
-      >
+    <div className={`flex ${children != undefined ? "mt-2" : ""} items-center`}>
+      <a href={link} target="_blank" rel="noopener noreferrer">
         {children}
         <p className={`${textStyle != undefined ? textStyle : ""}`}>{text}</p>
       </a>

diff --git a/src/components/chunks/AboutMeContent.tsx b/src/components/chunks/AboutMeContent.tsx
@@ -0,0 +1,21 @@
+async function AboutMeContent() {
+  return (
+    <div>
+      <div className="md:ml-10 mt-10 max-w-xl">
+        {
+          "Hey! I'm Ujaan, a Computer Engineering student at the Hong Kong University of Science and Technology, and an aspiring software engineer."
+        }
+      </div>
+      <div className="md:ml-10 mt-5 max-w-xl">
+        {
+          "Frankly, a lot of my time is split between coursework, research projects and Leetcode, but I also enjoy cooking, reading, and badminton. I'm currently working on a few projects, (including this website!), and I'm always looking for new opportunities to learn and grow."
+        }
+      </div>
+      <div className="md:ml-10 mt-5 max-w-xl">
+        {"Feel free to reach out to me on any of my socials!"}
+      </div>
+    </div>
+  );
+}
+
+export default AboutMeContent;
diff --git a/src/components/chunks/AboutMe.tsx → src/components/chunks/QuickInfo.tsx b/src/components/chunks/AboutMe.tsx → src/components/chunks/QuickInfo.tsx
@@ -6,7 +6,7 @@ import { FaInstagram } from "react-icons/fa";
 
 async function AboutMe() {
   return (
-    <div className="flex flex-col justify-center align-middle">
+    <div className="flex flex-col justify-center align-middle min-w-fit *:mt-1">
       <ProfilePic />
       <BarItem text={`${aboutMe.name}`} textStyle="text-5xl font-extrabold" />
       <BarItem