clean up and split into components

README.md

@@ -1,3 +1,3 @@
 ### Rummerlab
 
-currently two versions. html file and the next Js project 
+Currently two versions. Html file and the next js project 

app/components/Contact.tsx

@@ -0,0 +1,11 @@
+export default function Home() {
+  return (
+    <>
+        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Contact Us</h2>
+        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
+          If you want to reach out, please feel free
+          to reach out at <a href="mailto:[email protected]">[email protected]</a>.
+        </p>
+    </>
+  );
+};

app/components/Footer.tsx

@@ -12,9 +12,10 @@ export default function Footer() {
             <Link href="/">Rummerlab</Link>
         </h1>
         <p className="mb-4">
-            Connect with us on 
+            Connect with us on&nbsp;
             <a href="https://www.instagram.com/rummerlab/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
-                <FaInstagram /> Instagram
+              <FaInstagram />
+              Instagram
             </a>
             !
         </p>

app/components/GoogleAnalytics.tsx

@@ -0,0 +1,28 @@
+import Script from 'next/script'
+
+export default function GoogleAnalytics() {
+  const GA_ID = process.env.NEXT_PUBLIC_GA_ID; 
+
+  // Check if GA_ID is not undefined, null, or empty
+  if (!GA_ID) {
+    console.warn("Google Analytics ID is not set.");
+    return null; // Return null to render nothing
+  }
+
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
+      />
+      <Script id="gtag-init" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_ID}');
+        `}
+      </Script>
+    </>
+  );
+};

app/components/Header.tsx

@@ -0,0 +1,13 @@
+export default function Header() {
+    return (
+      <>
+          <h1 className="text-center text-4xl font-bold text-gray-800 my-4">RummerLab</h1>
+          <p className="mt-12 mb-12 text-xl text-center dark:text-white">
+              Rummerlab, led by Dr Jodie Rummer, focuses on researching the physiological
+              processes and adaptations of aquatic animals in response to environmental
+              stressors. Our research aims to understand how these organisms cope with
+              changing conditions and contribute to the conservation of aquatic ecosystems.
+          </p>
+      </>
+    );
+  };

app/components/Publications.tsx

@@ -0,0 +1,15 @@
+export default function Publications() {
+  return (
+    <>
+      <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Publications</h2>
+      <p className="mt-12 mb-12 text-xl text-center dark:text-white">
+        To view a list of our publications, please visit the&nbsp;
+        <a href="https://scholar.google.com/citations?user=ynWS968AAAAJ&hl=en&oi=ao" target="_blank" rel="noopener noreferrer">publications page</a>.
+      </p>
+      <p className="mt-12 mb-12 text-xl text-center dark:text-white">
+        Jodie L. Rummer&apos;s Papers&nbsp;
+        <a href="https://scholar.google.com/citations?user=ynWS968AAAAJ&hl=en&oi=ao" target="_blank" rel="noopener noreferrer">Google Scholar profile</a>.
+      </p>
+    </>
+  );
+};

app/components/Research.tsx

@@ -0,0 +1,15 @@
+export default function Research() {
+  return (
+    <>
+        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Research Areas</h2>
+        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
+          Our main research areas include:
+        </p>
+        <ul className="mt-12 mb-12 text-xl text-center dark:text-white">
+          <li>Physiological responses to environmental stressors</li>
+          <li>Adaptations to climate change and ocean acidification</li>
+          <li>Conservation of aquatic species and ecosystems</li>
+        </ul>
+    </>
+  );
+};

app/page.tsx

@@ -1,52 +1,19 @@
-import Script from 'next/script'
+import GoogleAnalytics from './components/GoogleAnalytics';
+import Header from './components/Header';
+import Research from './components/Research';
+import Publications from './components/Publications';
+import Contact from './components/Contact';
 
 export default function Home() {
   const GA_ID = process.env.NEXT_PUBLIC_GA_ID; 
   return (
     <>
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
-      />
-      <Script id="gtag-init" strategy="afterInteractive">
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${GA_ID}');
-        `}
-      </Script>
+      <GoogleAnalytics />
       <main className="px-6 mx-auto">
-        <h1 className="text-center text-4xl font-bold text-gray-800 my-4">RummerLab</h1>
-        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
-          Rummerlab, led by Dr Jodie Rummer, focuses on researching the physiological
-          processes and adaptations of aquatic animals in response to environmental
-          stressors. Our research aims to understand how these organisms cope with
-          changing conditions and contribute to the conservation of aquatic ecosystems.
-        </p>
-        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Research Areas</h2>
-        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
-          Our main research areas include:
-        </p>
-        <ul className="mt-12 mb-12 text-xl text-center dark:text-white">
-          <li>Physiological responses to environmental stressors</li>
-          <li>Adaptations to climate change and ocean acidification</li>
-          <li>Conservation of aquatic species and ecosystems</li>
-        </ul>
-        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Publications</h2>
-        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
-          To view a list of our publications, please visit the&nbsp;
-          <a href="https://scholar.google.com/citations?user=ynWS968AAAAJ&hl=en&oi=ao" target="_blank" rel="noopener noreferrer">publications page</a>.
-        </p>
-        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Contact Us</h2>
-        <p className="mt-12 mb-12 text-xl text-center dark:text-white">
-          If you want to reach out, please feel free
-          to reach out at <a href="mailto:[email protected]">[email protected]</a>.
-        </p>
-        <h2 className="mt-12 mb-12 text-3xl text-center dark:text-white">Jodie L. Rummer&apos;s Papers</h2>
-        <div className="mt-12 mb-12 text-xl text-center dark:text-white">
-          <a href="https://scholar.google.com/citations?user=ynWS968AAAAJ&hl=en&oi=ao" target="_blank" rel="noopener noreferrer">Google Scholar profile</a>
-        </div>
+        <Header />
+        <Research />
+        <Publications />
+        <Contact />
       </main>
     </>
   );

next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
+  //experimental: {
+    //appDir: true,
+  //},
 }
 
 module.exports = nextConfig

public/styles/instafeed.css

@@ -7,7 +7,8 @@
 #instafeed img {
     height: 150px;
     width: 150px;
-    object-fit: cover
+    object-fit: cover;
+    display: inline-block;
 }
 
 #instafeed img:hover {
@@ -34,4 +35,8 @@
         height: 100px;
         width: 100px
     }
+}
+
+svg {
+    display: inline-block;
 }