pages structure completed need to style projects page properly now

src/components/Details.jsx

@@ -1,7 +1,9 @@
+/* ----- Third Party Imports ----- */
+import { Link } from "react-router-dom";
+
 /* ----- Project Imports ----- */
 import "@/styles/details.css";
 
-
 function Details() {
   return (
     <article className="detailsContainer">
@@ -13,8 +15,8 @@ function Details() {
         <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
         <div className="detailsTextInnerContainer"><p className="detailsComment">Full Stack Developer</p></div>
         <div className="detailsInfoLinksContainer">
-          <a className="detailsInfoLinks" href="#tech">Expertise</a>
-          <a className="detailsInfoLinks" href="#projects">Projects</a>
+          <Link to="/expertise" className="detailsInfoLinks" >Expertise</Link>
+          <Link to="/projects" className="detailsInfoLinks" >Projects</Link>
         </div>
       </section>
       <section className="detailsSocialLinksContainer">

src/components/Header.jsx

@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 /* ----- Project Imports ----- */
 import "@/styles/header.css";
 
-
 function Header() {
   return (
     <header className="portfolioHeader">

src/pages/Expertise.jsx

@@ -2,16 +2,13 @@
 
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
-import Header from "@/components/Header.jsx";
-import Footer from "@/components/Footer.jsx";
-import Content from "@/components/Content.jsx";
+import Technologies from "@/components/Technologies";
 
 export function ExpertisePage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Technologies />
+    </main>
   );
 };
 

src/pages/Home.jsx

@@ -3,14 +3,12 @@
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
 import Details from "@/components/Details.jsx";
-import "@/styles/content.css";
 
 export function HomePage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Details />
+    </main>
   );
 };
 

src/pages/Projects.jsx

@@ -2,16 +2,13 @@
 
 /* ----- Project Imports ----- */
 import "@/styles/App.css";
-import Header from "@/components/Header.jsx";
-import Footer from "@/components/Footer.jsx";
-import Content from "@/components/Content.jsx";
+import Projects from "@/components/Projects"
 
 export function ProjectsPage() {
   return (
-    <>
-    <h2>You are at the most amazing home page on the planet</h2>
-    <p>Home sweet Home!</p>
-    </>
+    <main className="contentContainer">
+      <Projects />
+    </main>
   );
 };
 

src/styles/App.css

@@ -27,3 +27,12 @@ a:-webkit-any-link {
   height: 100%;
   width: 100%;
 }
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
+  width: 100%;
+  min-height: 100%;
+}
+

src/styles/content.css

@@ -1,7 +0,0 @@
-.contentContainer {
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
-  width: 100%;
-  min-height: 100%;
-}

src/styles/details.css

@@ -37,7 +37,7 @@
 
 .detailsInfoLinks {
   color: white;
-  padding: 0.25rem;
+  padding: 0.25rem 0.5rem;
   font-size: 1.5rem;
   text-decoration: none;
 }

src/styles/header.css

@@ -39,6 +39,12 @@ h1 {
   left: 0;
 }
 
+@media screen and (max-width: 750px) {
+  .portfolioSiteLink {
+    display: none;
+  }
+}
+
 .portfolioHeader h1 {
   font-size: 2rem;
 }