Refactor component structure and update styling

giovamuge · Feb 15, 2024 · bb2bfdd · bb2bfdd
1 parent 128c435
commit bb2bfdd
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 43 deletions.
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
@@ -6,20 +6,20 @@ type Props = {
 
 export default function Contact({ id }: Props): JSX.Element {
 	return (
-		<div id={id} className="flex flex-col gap-5">
+		<section id={id} className="flex flex-col gap-5">
 			<div className="flex flex-col gap-3 text-center">
 				<h1 className="font-bold text-3xl">Contatti</h1>
 				<p className="text-2xl font-space-mono">
-					Ciao se sei arrivato fin qui probabilmente stai
-					anche cercando una via per metterti in contatto
-					con me. Ti ringrazio fin da subito puoi scrivermi
+					iao! Se sei arrivato fin qui probabilmente stai
+					cercando una via per metterti in contatto con me.
+					Ti ringrazio fin da subito, puoi scrivermi
 					su&nbsp;
 				</p>
 				<a
 					href="https://www.linkedin.com/giovamuge/"
 					target="_blank"
 					rel="noreferrer"
-					className="text-primary text-center font-bold w-full underline"
+					className="text-primary text-center md:text-2xl font-bold w-full underline"
 				>
 					LinkedIn
 				</a>
@@ -30,6 +30,6 @@ export default function Contact({ id }: Props): JSX.Element {
 					[email protected]
 				</a>
 			</div>
-		</div>
+		</section>
 	)
 }
diff --git a/app/components/Intro.tsx b/app/components/Intro.tsx
@@ -17,8 +17,8 @@ export default function Intro({
 	image,
 }: Props): JSX.Element {
 	return (
-		<div className="flex flex-row gap-5 max-md:flex-col" id={id}>
-			<div className="border-t-primary border-t-8">
+		<section className="flex flex-row gap-5 max-md:flex-col" id={id}>
+			<div className="border-t-primary border-t-8 max-h-screen">
 				<Image
 					src={image}
 					className="object-cover h-full w-auto grayscale"
@@ -38,6 +38,6 @@ export default function Intro({
 					{description}
 				</div>
 			</div>
-		</div>
+		</section>
 	)
 }
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -7,7 +7,7 @@ const Navbar = () => {
 	const [isOpen, setIsOpen] = useState(false)
 
 	return (
-		<nav className="w-full">
+		<nav className="w-full max-md:px-3 max-w-2xl mb-10">
 			<div className="max-w-7xl mx-auto">
 				<div className="flex items-center justify-between h-16">
 					<div className="flex-shrink-0">

diff --git a/app/components/Project.tsx b/app/components/Project.tsx
@@ -10,33 +10,30 @@ type Props = {
 
 export default function Project({ items, id }: Props): JSX.Element {
 	return (
-		<>
-			<div className="flex flex-col gap-5" id={id}>
-				<h1 className="text-3xl font-bold">Progetti</h1>
+		<section className="flex flex-col gap-5" id={id}>
+			<h1 className="text-3xl font-bold">Progetti</h1>
 
-				<p className="text-secondary font-space-mono">
-					Per poter esprimere la mia creatività e nel
-					contempo studiare e aggiornarmi continuamente,
-					realizzo vari progetti personali sviluppando tutta
-					una serie di idee che in momenti di noia nascono e
-					crescono.
-				</p>
+			<p className="text-secondary font-space-mono">
+				Per poter esprimere la mia creatività e nel contempo
+				studiare e aggiornarmi continuamente, realizzo vari
+				progetti personali sviluppando tutta una serie di idee
+				che in momenti di noia nascono e crescono.
+			</p>
 
-				<p className="text-secondary font-space-mono">
-					Qui riporto alcuni progetti realizzati negli anni,
-					alcuni sarnno obsoleti, altri fin troppo semplici,
-					ma la cosa che desidero riportare in questo
-					portfolio è come applico architettura software, ux
-					e design, e vari stack tecnologici.
-				</p>
+			<p className="text-secondary font-space-mono">
+				Qui riporto alcuni progetti realizzati negli anni,
+				alcuni sarnno obsoleti, altri fin troppo semplici, ma
+				la cosa che desidero riportare in questo portfolio è
+				come applico architettura software, ux e design, e
+				vari stack tecnologici.
+			</p>
 
-				<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-flow-row gap-5">
-					{(items &&
-						items.map((project, index) => (
-							<ProjectCard key={index} {...project} />
-						))) ?? <p>Nessun progetto da mostrare</p>}
-				</div>
+			<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-flow-row gap-5">
+				{(items &&
+					items.map((project, index) => (
+						<ProjectCard key={index} {...project} />
+					))) ?? <p>Nessun progetto da mostrare</p>}
 			</div>
-		</>
+		</section>
 	)
 }
diff --git a/app/components/Repositories.tsx b/app/components/Repositories.tsx
@@ -10,6 +10,7 @@ type RepoResponse = {
 	name: string
 	description: string
 	url: string
+	html_url: string
 	language: string
 	updated_at: Date
 	fork: boolean
@@ -31,15 +32,15 @@ export default function Repositories({ id }: Props): JSX.Element {
 	}, [])
 
 	return (
-		<div className="flex flex-col gap-5" id={id}>
+		<section className="flex flex-col gap-5" id={id}>
 			<h1 className="text-3xl font-bold">Repositories</h1>
 			<ul className="space-y-5">
 				{repos.map((repo, index) => (
 					<li
 						className="hover:scale-105 transition-all hover:border-primary border-2 border-secondary px-5 py-3 text-secondary hover:text-primary flex flex-col gap-3 text-lg"
 						key={index}
 					>
-						<a className="w-full h-full" href={repo.url}>
+						<a className="w-full h-full" href={repo.html_url}>
 							<div className="flex flex-col gap-2">
 								<label className="font-bold">
 									{repo.name}
@@ -63,6 +64,6 @@ export default function Repositories({ id }: Props): JSX.Element {
 					</li>
 				))}
 			</ul>
-		</div>
+		</section>
 	)
 }
diff --git a/app/components/Tecnologies.tsx b/app/components/Tecnologies.tsx
@@ -24,7 +24,7 @@ export default function Tecnologies({ id }: Props): JSX.Element {
 	}, [])
 
 	return (
-		<div className="flex flex-col gap-5" id={id}>
+		<section className="flex flex-col gap-5" id={id}>
 			{/* <label className="text-3xl font-bold text-center">
 				Tecnologie
 			</label> */}
@@ -44,6 +44,6 @@ export default function Tecnologies({ id }: Props): JSX.Element {
 					/>
 				))}
 			</div>
-		</div>
+		</section>
 	)
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -47,10 +47,10 @@ export default function Home() {
 		<>
 			<main>
 				<div className="flex flex-col min-w-full max-w-full items-center justify-center">
-					{/* <!-- container -->  */}
-					<div className="flex flex-col max-w-2xl max-md:px-3 gap-10">
-						<Navbar />
-
+					<Navbar />
+
+					{/* <!-- Sections -->  */}
+					<div className="flex flex-col max-w-2xl max-md:px-3 gap-36 mb-36">
 						<Intro
 							id="intro"
 							title="Giovanni Mugelli"