Merge pull request #27 from sean1832/dev

Minor Patch: Expandable Text Component Enhancements and UI Fixes

app/page.jsx

@@ -1,7 +1,6 @@
 import About from "@/components/section/about";
 import Landing from "@/components/section/landing";
 import ProjectsGallery from "@/components/section/projects-gallery";
-import GithubFloatingButton from "@/components/ui/button/githubFloatingButton";
 
 export default function Home() {
   return (
@@ -10,7 +9,6 @@ export default function Home() {
         <Landing />
         <About />
         <ProjectsGallery />
-        <GithubFloatingButton />
       </div>
     </main>
   );

components/section/project-info.jsx

@@ -113,7 +113,7 @@ const ProjectInfo = ({ data }) => {
           <div className="xlg:hidden">
             <div className="text-primary">
               <strong>Description: </strong>
-              <ExpandableText maxLength={500}>{data.longDescription}</ExpandableText>
+              <ExpandableText breakpoint="sm">{data.longDescription}</ExpandableText>
             </div>
           </div>
 

components/ui/button/githubFloatingButton.jsx

@@ -6,13 +6,13 @@ import manifest from "@/data/manifest";
 
 const GithubFloatingButton = () => {
   return (
-    <Link href={manifest.repository.url} target="_blank">
+    <Link href={manifest.repository.url} target="_blank" className="hidden lg:block">
       <FloatingButton
         scrollOffset={300}
-        className="h-8 md:w-[152px] w-8 opacity-80 hover:opacity-100"
+        className="h-8 md:w-[152px] w-8 opacity-80 hover:opacity-100 "
       >
-        <GitHubLogoIcon className="h-6 w-6 md:h-4 md:w-4 md:mr-2" />
-        <div className="hidden md:block"> View on GitHub</div>
+        <GitHubLogoIcon className="h-6 w-6 md:h-4 md:w-4 md:mr-2 " />
+        View on GitHub
       </FloatingButton>
     </Link>
   );

components/ui/expandableText.jsx

@@ -1,22 +1,42 @@
 "use client";
 import { useState } from "react";
 import { Button } from "./button";
+import props from "prop-types";
 
-const ExpandableText = ({ children }) => {
+const ExpandableText = ({ children, breakpoint }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const toggleExpansion = () => {
     setIsExpanded(!isExpanded);
   };
 
-  const text = children;
+  const breakpointVariants = {
+    sm: {
+      mobile: "sm:hidden block",
+      desktop: "hidden sm:block",
+    },
+    md: {
+      mobile: "md:hidden block",
+      desktop: "hidden md:block",
+    },
+    lg: {
+      mobile: "lg:hidden block",
+      desktop: "hidden lg:block",
+    },
+    xlg: {
+      mobile: "xlg:hidden block",
+      desktop: "hidden xlg:block",
+    },
+  };
+
+  const size = breakpointVariants[breakpoint];
 
   return (
     <>
       {/* mobile view */}
-      <div className="lg:hidden block">
+      <div className={size.mobile}>
         <div className={`relative overflow-hidden ${!isExpanded ? "h-48" : "h-auto"}`}>
-          <p>{text}</p>
+          <p>{children}</p>
           {!isExpanded && (
             <div className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-b from-transparent to-background"></div>
           )}
@@ -29,9 +49,18 @@ const ExpandableText = ({ children }) => {
       </div>
 
       {/* desktop view */}
-      <div className="hidden lg:block">{text}</div>
+      <div className={size.desktop}>{children}</div>
     </>
   );
 };
 
+ExpandableText.propTypes = {
+  children: props.node.isRequired,
+  breakpoint: props.string.isRequired,
+};
+
+ExpandableText.defaultProps = {
+  breakpoint: "md",
+};
+
 export default ExpandableText;

data/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Zeke Zhang Portfolio",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "My personal portfolio website built with Next.js and Tailwind CSS. The website showcases my past projects, skills, and experiences.",
   "repository": {
     "type": "git",