From 39b344fc24918eb142209087f1341f84561d7042 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Fri, 14 Feb 2025 20:30:16 +0100 Subject: [PATCH 01/30] updated Landing.tsx component to mobile friendly --- src/lib/components/Landing.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/lib/components/Landing.tsx b/src/lib/components/Landing.tsx index 4ddcd5f..3ea4457 100644 --- a/src/lib/components/Landing.tsx +++ b/src/lib/components/Landing.tsx @@ -7,12 +7,12 @@ export const Landing: React.FC<{ setScreen: (screen: "landing" | "projects") => void; }> = ({ setScreen }) => { return ( - - - + + + Hi, I{"'"}m Dylan - + I’m a software engineer with hands-on experience building digital products since I was a teenager. My early work led me to tech roles at an e-commerce company that later sold and then into a YC-backed @@ -27,27 +27,28 @@ export const Landing: React.FC<{ allowing teams to focus on delivering real value efficiently and adapt to evolving challenges. - {/* me-irl */} - + - + - + From 28608fa907a9d944a36c7818b273979cfbcd19d6 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Fri, 14 Feb 2025 21:30:11 +0100 Subject: [PATCH 02/30] components/Projects.tsx: updating css classes - 01 --- src/lib/components/Projects.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index f3b0f8e..77a81d3 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -24,7 +24,7 @@ export const Projects: React.FC<{ const ProjectDescription = projects[selectedProject]; return ( <> - + + {Object.keys(projects) .reverse() From 7a186362becaaa01731e25e3eccc34f2a9b5ec38 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 09:06:08 +0100 Subject: [PATCH 16/30] hide all the project lists --- src/lib/components/Projects.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 048da3b..08c7c47 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -45,14 +45,17 @@ export const Projects: React.FC<{ {menuOpen ? "Close Menu" : "Open Menu"} - + {Object.keys(projects) .reverse() .map((project, idx) => ( From 669d3a166efb5bbcf0da99bb43123b0482f2e5fa Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 09:08:44 +0100 Subject: [PATCH 17/30] close menu on mobile after selection --- src/lib/components/Projects.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 08c7c47..c646a7c 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -56,6 +56,10 @@ export const Projects: React.FC<{ From bab954aa831223b836d0932bfa55a59ef902d532 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 09:20:01 +0100 Subject: [PATCH 18/30] installed react-icons to dependencies --- package.json | 1 + yarn.lock | 26 +++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index a4ce51a..504b0a4 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "15.0.2", "react": "19.0.0-rc-02c0e824-20241028", "react-dom": "19.0.0-rc-02c0e824-20241028", + "react-icons": "^5.5.0", "styled-components": "^6.1.13" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 4fb446f..ab7b8af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2939,6 +2939,11 @@ react-dom@19.0.0-rc-02c0e824-20241028: dependencies: scheduler "0.25.0-rc-02c0e824-20241028" +react-icons@^5.5.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2" + integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -3194,8 +3199,16 @@ string-convert@^0.2.0: resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A== -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: - name string-width-cjs +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -3276,7 +3289,14 @@ string.prototype.trimstart@^1.0.8: define-properties "^1.2.1" es-object-atoms "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== From 8c5beffcd1419fe292f5781a6d1081a555defabb Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 09:22:10 +0100 Subject: [PATCH 19/30] replaced menu text description with icons --- src/lib/components/Projects.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index c646a7c..9f154c0 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -7,6 +7,7 @@ import { SouffleClub, TrustedFor, } from "./ProjectDescriptions"; +import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai"; // import Image from "next/image"; const projects: Record = { @@ -42,7 +43,11 @@ export const Projects: React.FC<{ className="bg-black/60 border-2 border-black/10 text-white p-2 rounded-md w-full" onClick={() => setMenuOpen(!menuOpen)} > - {menuOpen ? "Close Menu" : "Open Menu"} + {menuOpen ? ( + + ) : ( + + )} Date: Sat, 1 Mar 2025 09:24:17 +0100 Subject: [PATCH 20/30] updated button classes to center icons nicely --- src/lib/components/Projects.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 9f154c0..cad5e51 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -40,7 +40,7 @@ export const Projects: React.FC<{ >
{Object.keys(projects) .reverse() From d1e3b00ec52289589855e19b17be65686490470e Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 09:51:04 +0100 Subject: [PATCH 24/30] removed w-full from button to capture the size of the icon --- src/lib/components/Projects.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index a28ea23..3eb21a9 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -53,7 +53,7 @@ export const Projects: React.FC<{ >
- - -
+ +
+ + + + ))} +

{selectedProject} From 548e3b8a7db44498a445edf3ac4789115bb6c382 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 10:54:10 +0100 Subject: [PATCH 26/30] created isDesktop variable --- src/lib/components/Projects.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 168e127..b029385 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -36,6 +36,7 @@ export const Projects: React.FC<{ }> = ({ setScreen }) => { const [selectedProject, setSelectedProject] = useState("Politech.ai"); const [menuOpen, setMenuOpen] = useState(false); + const [isDesktop, setIsDesktop] = useState(false); const ProjectDescription = projects[selectedProject]; return ( From 0d47245f604f5a3e6d96e632d5fbf6e92d5d111e Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 10:55:23 +0100 Subject: [PATCH 27/30] initialized useEffect --- src/lib/components/Projects.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index b029385..1b8aae4 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -1,5 +1,5 @@ import { motion } from "framer-motion"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { ATVsNetWeb, DigiBuild, @@ -39,6 +39,8 @@ export const Projects: React.FC<{ const [isDesktop, setIsDesktop] = useState(false); const ProjectDescription = projects[selectedProject]; + useEffect(() => {}, []); + return ( <> From a6b541ef09cf4c7e43f76597003b7263ec2a6680 Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 10:57:00 +0100 Subject: [PATCH 28/30] set isDesktop based on window width: sm breakpoint: 640px --- src/lib/components/Projects.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 1b8aae4..5e6eddb 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -39,7 +39,11 @@ export const Projects: React.FC<{ const [isDesktop, setIsDesktop] = useState(false); const ProjectDescription = projects[selectedProject]; - useEffect(() => {}, []); + useEffect(() => { + const handleResize = () => { + setIsDesktop(window.innerWidth >= 640); + }; + }, []); return ( <> From 80124be92e964310cd3199d5b030c7e1c70576ad Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 10:58:58 +0100 Subject: [PATCH 29/30] implement hndleResize function --- src/lib/components/Projects.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 5e6eddb..1269638 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -43,6 +43,10 @@ export const Projects: React.FC<{ const handleResize = () => { setIsDesktop(window.innerWidth >= 640); }; + + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); }, []); return ( From fb99fe104a6cf22d4b83704613b840103cea16df Mon Sep 17 00:00:00 2001 From: Chigozie Ezeh Date: Sat, 1 Mar 2025 11:01:20 +0100 Subject: [PATCH 30/30] add the isDesktop check on animate of project list --- src/lib/components/Projects.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Projects.tsx b/src/lib/components/Projects.tsx index 1269638..89cf59d 100644 --- a/src/lib/components/Projects.tsx +++ b/src/lib/components/Projects.tsx @@ -79,8 +79,8 @@ export const Projects: React.FC<{ {Object.keys(projects) .reverse()