Merge pull request #3 from McRonaah/Development

Development

package.json

@@ -38,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

src/App.css

@@ -1,3 +1,4 @@
+/* 
 .App {
   text-align: center;
 }
@@ -35,4 +36,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+} */

src/App.js

@@ -2,25 +2,29 @@ import React from "react";
 import { Routes, Route } from 'react-router-dom';
 import './App.css';
 import NavBar from './components/NavBar';
-import Home from "./components/Home";
-import About from './components/About';
-import Services from './components/Services';
+
+import Home from "./components/Home/Home";
+import About from './components/About/About';
+import Portfolio from "./components/Portfolio/Portfolio";
+import Services from './components/Services/Services';
+import Contact from "./components/Contact/Contact";
+
 import Footer from "./components/Footer";
 
 
 const App = () => (
   <>
-    <div className="router" style={{ display: 'flex' }}>
-      <div style={{ width: '20%', padding: '20px' }}>
+    <div>
+      <div>
         <NavBar />
       </div>
-      {/* <div style={{ width: '80%', padding: '20px' }}> */}
       <Routes>
         <Route exact path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/portfolio" element={<Portfolio />} />
         <Route path="/services" element={<Services />} />
+        <Route path="/contact" element={<Contact />} />
       </Routes>
-       {/* </div> */}
     </div>
 
     <Footer />

src/components/About.jsx → src/components/About/About.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import '../CSS/About.css'
-import resume from '../Docs/Ronald_Kipchirchir_CV.pdf'
-import avatar1 from '../images/avatar1.webp';
+import resume from '../../Docs/Ronald_Kipchirchir_CV.pdf'
+import avatar1 from '../../images/avatar1.webp';
 import {  FaLinkedin, FaTwitter, FaFacebook, FaInstagram } from "react-icons/fa";
 
+import Education from "./Education.jsx";
+import Experience from './Experience.jsx';
+
 function About() {
   return (
     <div className='hero'>
@@ -57,7 +59,8 @@ function About() {
         </div>
       </div>
     </div>
-
+    <Education />
+    <Experience />
   </div>
 
   )

src/components/About/Education.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Education = () => {
+  return (
+    <div>Education page Coming Soon.....,,,,,</div>
+  )
+}
+
+export default Education;

src/components/About/Experience.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Experience = () => {
+  return (
+    <div>
+        <h1>Experience</h1>
+        <p>page Coming Soon.....,,,,,</p>
+    </div>
+  )
+}
+
+export default Experience;

src/components/Contact/Contact.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Contact = () => {
+  return (
+    <div>
+      <h1>Coming Soon........,</h1>
+    </div>
+  )
+}
+
+export default Contact;

src/components/Footer.jsx

@@ -1,21 +1,16 @@
-import React from 'react'
-import '../CSS/Footer.css'
-import { FaPhone, FaRegEnvelope,  FaGithub, FaWhatsapp, } from "react-icons/fa";
+import React from 'react';
+import { FaGithub } from 'react-icons/fa';
 
-
-function Footer () {
+function Footer() {
   return (
-      <div className="footer">
-          <div className="section1">
-              <h4>Contact me</h4>
-                <p><a href='https://wa.me/+254702233145' target="_blank" rel="noreferrer"><FaWhatsapp/>+254702233145</a></p>
-                <p> <a href="tel:+254111310907" target="_blank" rel="noreferrer"><em class="lnr lnr-phone-handset"></em><FaPhone />+254111310907 </a></p>
-                <p><FaRegEnvelope /><a href="https://mail.google.com/mail/u/0/?fs=1&tf=cm&source=mailto&to=ronaldcheruiyot342@gmail.com" target="_blank" rel="noreferrer">[email protected]</a> &reg;</p>
-                <p><FaGithub/>All rights reserved &trade; inc.</p>
-                <p>CopyRight By Ronald Kipchirchir&#169;</p>
-          </div>
+    <div className="footer bg-gray-300 flex flex-col md:flex-row items-center justify-between p-4">
+      <div className="left-section flex gap-4 items-center text-center mb-4 md:mb-0">
+        <FaGithub className="text-2xl" />
+        <p className="text-sm">CopyRight By Ronald Kipchirchir&copy;</p>
       </div>
-  )
+      <p className="text-sm italic">Last Updated: Feb. 24, 2024</p>
+    </div>
+  );
 }
 
-export default Footer;
+export default Footer;