Merge pull request #24 from BregornOriginal/fix-warnings

fix warnings and move profile links to index component

Author: BregornOriginal

components/ExperienceCard.tsx

@@ -45,17 +45,19 @@ const ExperienceCard = ({ experience }: Props) => {
 						)
 					)}
 				</div>
-				<p className="uppercase py-5 text-gray-300">
-					{new Date(experience.dateStarted).toLocaleDateString('en-us', {
+				<p className="uppercase py-5 text-gray-300" suppressHydrationWarning>
+					{new Date(experience.dateStarted).toLocaleDateString('en-US', {
 						year: 'numeric',
 						month: 'short',
+						timeZone: 'UTC',
 					})}{' '}
 					-{' '}
 					{experience.isCurrentlyWorkingHere
 						? 'Present'
-						: new Date(experience.dateEnded).toLocaleDateString('en-us', {
+						: new Date(experience.dateEnded).toLocaleDateString('en-US', {
 								year: 'numeric',
 								month: 'short',
+								timeZone: 'UTC',
 						  })}
 				</p>
 				<ul className="list-disc space-y-4 ml-5 text-md max-h-32 overflow-y-scroll pr-5 scrollbar-thin scrollbar-track-black scrollbar-thumb-[#f7ab0a]/80">

components/Footer.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import Link from 'next/link';
 
 type Props = {};
 
 const Footer = (props: Props) => {
 	return (
 		<footer className="sticky bottom-5 w-full cursor-pointer">
-			<div className="flex flex-end items-center pr-6 justify-end">
+			<Link href="#profile" className="flex flex-end items-center pr-6 justify-end">
 				<img
 					className="h-10 w-10 rounded-full filter grayscale hover:grayscale-0 cursor-pointer object-cover"
 					src="https://e00-elmundo.uecdn.es/assets/multimedia/imagenes/2022/04/19/16503736092836.jpg"
 					alt="An image to homepage"
 					width={40}
 					height={40}
 				/>
-			</div>
+			</Link>
 		</footer>
 	);
 };

components/Profile.tsx

@@ -66,18 +66,18 @@ export default function Profile({ pageInfo }: Props) {
 					<Cursor cursorColor="orange" />
 				</h1>
 
-				<div className="pt-5">
-					<Link href="#about">
-						<button type="button" className="profileButton">About</button>
+				<div className="pt-5 flex flex-wrap justify-center gap-4">
+					<Link href="#about" className="profileButton">
+						About
 					</Link>
-					<Link href="#experience">
-						<button type="button" className="profileButton">Experience</button>
+					<Link href="#experience" className="profileButton">
+						Experience
 					</Link>
-					<Link href="#skills">
-						<button type="button" className="profileButton">Skills</button>
+					<Link href="#skills" className="profileButton">
+						Skills
 					</Link>
-					<Link href="#projects">
-						<button type="button" className="profileButton">Projects</button>
+					<Link href="#projects" className="profileButton">
+						Projects
 					</Link>
 				</div>
 			</div>

pages/index.tsx

@@ -15,7 +15,6 @@ import { fetchExperiences } from '../utils/fetchExperience';
 import { fetchProjects } from '../utils/fetchProjects';
 import { fetchSocial } from '../utils/fetchSocials';
 import { fetchSkills } from '../utils/fetchSkills';
-import Link from 'next/link';
 
 type Props = {
 	pageInfo: PageInfo;
@@ -61,9 +60,7 @@ const Home = ({ pageInfo, experiences, projects, skills, socials }: Props) => {
 				<Contact name={''} email={''} subject={''} message={''} />
 			</section>
 
-			<Link href="#profile">
-				<Footer />
-			</Link>
+			<Footer />
 
 			<AIChatWidget
 				pageInfo={pageInfo}

styles/globals.css

@@ -4,7 +4,7 @@
 
 @layer components {
   .profileButton {
-    @apply px-6 py-2 border border-[#242424] rounded-full uppercase text-xs
+    @apply inline-block px-6 py-2 border border-[#242424] rounded-full uppercase text-xs
       tracking-widest text-gray-500 transition-all hover:border-[#f7ab0a]/40 hover:text-[#f7ab0a]/40;
   }