diff --git a/app/page.jsx b/app/page.jsx index 7a7df25..70575f0 100644 --- a/app/page.jsx +++ b/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() { - ); diff --git a/components/section/project-info.jsx b/components/section/project-info.jsx index 7d8d34c..ce41eac 100644 --- a/components/section/project-info.jsx +++ b/components/section/project-info.jsx @@ -113,7 +113,7 @@ const ProjectInfo = ({ data }) => {
Description: - {data.longDescription} + {data.longDescription}
diff --git a/components/ui/button/githubFloatingButton.jsx b/components/ui/button/githubFloatingButton.jsx index 5b9ddd1..598b871 100644 --- a/components/ui/button/githubFloatingButton.jsx +++ b/components/ui/button/githubFloatingButton.jsx @@ -6,13 +6,13 @@ import manifest from "@/data/manifest"; const GithubFloatingButton = () => { return ( - + - -
View on GitHub
+ + View on GitHub
); diff --git a/components/ui/expandableText.jsx b/components/ui/expandableText.jsx index f0a6136..719e65d 100644 --- a/components/ui/expandableText.jsx +++ b/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 */} -
+
-

{text}

+

{children}

{!isExpanded && (
)} @@ -29,9 +49,18 @@ const ExpandableText = ({ children }) => {
{/* desktop view */} -
{text}
+
{children}
); }; +ExpandableText.propTypes = { + children: props.node.isRequired, + breakpoint: props.string.isRequired, +}; + +ExpandableText.defaultProps = { + breakpoint: "md", +}; + export default ExpandableText; diff --git a/data/manifest.json b/data/manifest.json index fe7f880..e753cdd 100644 --- a/data/manifest.json +++ b/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",