Break into components

src/App.css

@@ -28,46 +28,7 @@ nav ul li a:hover {
   text-decoration: underline;
 }
 
-.home {
-  position: relative;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: white;
-  overflow: hidden;
-}
 
-.home-content {
-  position: relative;
-  z-index: 2;
-}
-
-.home-content h1 {
-  font-size: 4vw;
-  font-weight: bold;
-  margin: 0;
-}
-
-.home-content p {
-  font-size: 1vw;
-  font-weight: bold;
-  margin: 0;
-}
-
-.background-video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 100%;
-  min-height: 100%;
-  width: auto;
-  height: auto;
-  z-index: 1;
-  opacity: 0.8;
-}
 
 .page {
   padding: 20px;

src/App.js

@@ -1,46 +1,11 @@
-// Import necessary libraries
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import './App.css';
 
-// Home page component
+import Home from './components/Home'
-function Home() {
+import About from './components/About'
-  return (
+import Projects from './components/Projects'
-    <div className="home">
-      <div className="home-content">
-        <h1>Jake&apos;s West Coast</h1>
-        <p>My Mountaineering Diary</p>
-      </div>
-      <img 
-        src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXpzcjE2bzh4bGd1MDBmNjVvajk2aHc5eXJocmoyb3hydHA5ZXoydyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/F86jaFeIpE55nvF8M5/giphy.gif" 
-        alt="Jakeswestcoast"
-        className="background-video"
-      />
-    </div>
-  );
-}
 
-// About page component
-function About() {
-  return (
-    <div className="page">
-      <h1>About</h1>
-      <p>Welcome to my mountaineering diary. Follow my adventures across the West Coast mountains!</p>
-    </div>
-  );
-}
-
-// Projects page component
-function Projects() {
-  return (
-    <div className="page">
-      <h1>Projects</h1>
-      <p>Here you can find my climbing routes, expeditions, and other mountaineering projects.</p>
-    </div>
-  );
-}
-
-// Main App component
 function App() {
   return (
     <Router>

src/components/About.css

@@ -0,0 +1,3 @@
+.page {
+    padding: 20px;
+  }

src/components/About.js

@@ -0,0 +1,12 @@
+import './About.css';
+
+function About() {
+    return (
+        <div className="page">
+        <h1>About</h1>
+        <p>Welcome to my mountaineering diary! I'm Jake, a rider from the Bay Area. I love road, mountain, and gravel cycling around my home mountains and anywhere that has cool trails & views.</p>
+        </div>
+    );
+}
+
+export default About;

src/components/Home.css

@@ -0,0 +1,40 @@
+.background-video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: 1;
+    opacity: 0.8;
+}
+
+.home {
+  position: relative;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: white;
+  overflow: hidden;
+}
+
+.home-content {
+  position: relative;
+  z-index: 2;
+}
+
+.home-content h1 {
+  font-size: 4vw;
+  font-weight: bold;
+  margin: 0;
+}
+
+.home-content p {
+  font-size: 1vw;
+  font-weight: bold;
+  margin: 0;
+}

src/components/Home.js

@@ -0,0 +1,19 @@
+import './Home.css';
+
+function Home() {
+    return (
+      <div className="home">
+        <div className="home-content">
+          <h1>Jake&apos;s West Coast</h1>
+          <p>My Mountaineering Diary</p>
+        </div>
+        <img 
+          src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdXpzcjE2bzh4bGd1MDBmNjVvajk2aHc5eXJocmoyb3hydHA5ZXoydyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/F86jaFeIpE55nvF8M5/giphy.gif" 
+          alt="Jakeswestcoast"
+          className="background-video"
+        />
+      </div>
+    );
+  }
+
+  export default Home;

src/components/Projects.css

@@ -0,0 +1,3 @@
+.page {
+    padding: 20px;
+  }

src/components/Projects.js

@@ -0,0 +1,12 @@
+import './Projects.css';
+
+function Projects() {
+    return (
+      <div className="page">
+        <h1>Projects</h1>
+        <p>Here you can find my climbing routes, expeditions, and other mountaineering projects.</p>
+      </div>
+    );
+  }
+
+  export default Projects;