Merge pull request #12 from stifskere/dev

feat: responsiveness
stifskere · May 16, 2024 · 29ce70b · 29ce70b
2 parents 1f61a34 + 62bc1eb
commit 29ce70b
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 79 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,22 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "next": "^14.2.3",
     "querystring": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "react-syntax-highlighter": "^15.5.0",
-    "sharp": "^0.33.2",
-    "ws": "^8.17.0"
+    "sharp": "^0.33.2"
   },
   "devDependencies": {
     "@babel/plugin-transform-class-static-block": "^7.23.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/ws": "^8.5.10",
     "babel-plugin-jsx-control-statements": "^4.1.2",
     "eslint": "^8",

diff --git a/src/app/page.css b/src/app/page.css
@@ -106,11 +106,13 @@ body {
     position: relative;
 
     height: 60vh;
+    min-height: 700px;
 
     margin: 10vh 0;
 
     @media (orientation: portrait) {
         height: 100vh;
+        min-height: 850px;
     }
 }
 
@@ -129,7 +131,7 @@ body {
     gap: 20px;
 }
 
-.presentation-container {
+.presentation-container-text {
     display: flex;
 
     flex-direction: column;
@@ -154,7 +156,7 @@ body {
     }
 }
 
-.presentation-container > p {
+.presentation-container-text > p {
     margin-right: 20px;
 
     font-size: 1.2em;
@@ -170,6 +172,52 @@ body {
     gap: 15px;
 
     flex-wrap: wrap;
+
+    margin-bottom: 15px;
+}
+
+.presentation-interactable {
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0 30px;
+}
+
+.presentation-experience {
+    color: white;
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 8px;
+
+    margin-bottom: 15px;
+}
+
+.presentation-experience > p:nth-child(2) {
+    color: #565656;
+
+    margin-left: 30px;
+}
+
+.presentation-experience > p:nth-child(3) {
+    margin-left: 60px;
+}
+
+.presentation-contact {
+    color: white;
+
+    display: flex;
+
+    flex-direction: column;
+
+    align-items: flex-start;
+    justify-content: center;
+
+    gap: 10px;
 }
 
 .presentation-boxes {
@@ -188,12 +236,14 @@ body {
     width: 50%;
     height: 20vh;
 
+    min-height: 170px;
+
     @media (orientation: portrait) {
         width: 100%;
     }
 }
 
-    /*projects section*/
+/*projects section*/
 .projects {
     position: relative;
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,7 @@ import {ReactElement, useEffect, useState} from "react";
 import Image from "next/image";
 import {formatDistanceToNowStrict} from "date-fns";
 
-import {FaInstagram, FaLinkedin} from "react-icons/fa6";
+import {FaDiscord, FaInstagram, FaLinkedin} from "react-icons/fa6";
 
 import Social from "@/components/social";
 import Box from "@/components/box";
@@ -15,16 +15,33 @@ import FooterContact from "@/components/footer-contact";
 import Gist from "@/components/gist";
 import Loader from "@/components/content-loader";
 import SpotifyStatus from "@/components/spotify-status";
+import GithubRating from "@/components/github-rating";
 
 import logo from "../../public/logo.png";
 
 import "./page.css";
-import GithubRating from "@/components/github-rating";
 
 export default function Home(): ReactElement {
 	const [repos, setRepos]: StateTuple<GithubRepository[] | undefined | null> = useState();
 	const [page, setPage]: StateTuple<number> = useState(0);
 	const [gists, setGists]: StateTuple<GithubCompiledGist[] | undefined | null> = useState();
+	const [phrase, setPhrase]: StateTuple<ReactElement | undefined> = useState();
+
+	const waitingPhrases: ReactElement[] = [
+		<>... It&apos;s not the time <b>YET</b></>,
+		<>... It hasn&apos;t arrived <b>YET</b></>,
+		<>... It&apos;s not here</>,
+		<>... The moment is not <b>NOW</b></>,
+		<>... The answer is not <b>HERE</b></>,
+		<>... We&apos;re still <b>WAITING</b></>,
+		<>... The time hasn&apos;t come</>,
+		<>... It&apos;s still being <b>AWAITED</b></>,
+		<>... The reveal is <b>PENDING</b></>,
+		<>... We are <b>ANTICIPATING</b></>,
+		<>... It remains <b>UNSEEN</b></>,
+		<>... The moment is <b>COMING</b></>,
+		<>... The wait is not <b>OVER</b></>
+	];
 
 	useEffect((): void => {
 		fetch("/github/repos")
@@ -42,6 +59,8 @@ export default function Home(): ReactElement {
 					? (await r.json())
 					: null
 			));
+
+		setPhrase(waitingPhrases[Math.floor(Math.random() * waitingPhrases.length)]);
 	}, []);
 
 	function setCurrentPage(page: number): void {
@@ -51,9 +70,9 @@ export default function Home(): ReactElement {
 	function setPresentationFace(smiling: boolean): (() => void) {
 		return (): void => {
 			const element: HTMLHeadingElement
-				= document.querySelector(".presentation-container > h1 > span") as HTMLHeadingElement;
+				= document.querySelector(".presentation-container-text > h1 > span") as HTMLHeadingElement;
 
-			element.innerText = smiling ? ":D" : ";)";
+			element.innerText = smiling ? "  :D" : "  ;)";
 		};
 	}
 
@@ -67,26 +86,54 @@ export default function Home(): ReactElement {
 		<section className="presentation">
 			<div>
 				<Box className="presentation-container">
-					<>
-						<h1>Hello <span onMouseEnter={setPresentationFace(true)} onMouseLeave={setPresentationFace(false)}>;)</span></h1>
+					<div className="presentation-container-text">
+						<h1>Hello
+							<span onMouseEnter={setPresentationFace(true)} onMouseLeave={setPresentationFace(false)}>
+								&nbsp;&nbsp;;)
+							</span>
+						</h1>
 						<p>
 							{`
 							I'm Esteve, a ${formatDistanceToNowStrict(new Date("2005-11-06"))} old developer on a mission to 
 							bring ideas to life and craft innovative solutions. Embarking on this journey 
-							${formatDistanceToNowStrict(new Date("2021-12-26"))} ago, I've delved into realms of C#, C++, JavaScript, React, Vue, Laravel, 
+							${formatDistanceToNowStrict(new Date("2021-12-26"))} ago, I've delved into realms of C#, C++, 
+							JavaScript, React, Vue, Laravel, 
 							and beyond. Eager to embrace fresh challenges and perpetually pursuing knowledge, I stand ready to 
 							collaborate and create wonders together. Let's build something extraordinary!
-						`}
+							`}
 						</p>
-						<div className="presentation-socials">
-							<Social href="https://www.instagram.com/_memw1/" icon={<FaInstagram/>} name="Instagram"/>
-							<Social href="https://www.linkedin.com/in/esteve-autet-75b796298/" icon={<FaLinkedin/>} name="LinkedIn"/>
+					</div>
+					<div className="presentation-interactable">
+						<div className="presentation-experience">
+							<p>Take a look at</p>
+							<p>... Forget it ...</p>
+							<p>{phrase ?? "..."}</p>
 						</div>
-					</>
+						<div className="presentation-contact">
+							<p>Get in touch:</p>
+							<div className="presentation-socials">
+								<Social
+									href="https://discord.gg/pKMhTkRqjQ"
+									icon={<FaDiscord/>}
+									name="Discord"
+								/>
+								<Social
+									href="https://www.instagram.com/_memw1/"
+									icon={<FaInstagram/>}
+									name="Instagram"
+								/>
+								<Social
+									href="https://www.linkedin.com/in/esteve-autet-75b796298/"
+									icon={<FaLinkedin/>}
+									name="LinkedIn"
+								/>
+							</div>
+						</div>
+					</div>
 				</Box>
 				<div className="presentation-boxes">
-					<SpotifyStatus />
-					<GithubRating />
+					<SpotifyStatus/>
+					<GithubRating/>
 				</div>
 			</div>
 		</section>

diff --git a/src/app/types.d.ts b/src/app/types.d.ts
@@ -7,4 +7,10 @@ type BaseProps<TChildren> = React.DetailedHTMLProps<React.HTMLAttributes<TChildr
 
 type StateTuple<S> = [S, React.Dispatch<React.SetStateAction<S>>];
 
-declare module "*.pdf";
+declare module "*.pdf";
+
+interface LocalRefObject<T> {
+	current: T;
+}
+
+type WaitingStates<T> = T | undefined | null;