updates Light and Dark modeicons and copy

nicole-m-martin · Jun 10, 2024 · 5398c26 · 5398c26
1 parent 26bccf6
commit 5398c26
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 134 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "apple-touch-icons": "off"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -52,10 +52,7 @@
       name="Nicole Martin | Software Developer"
       content="Website for Software Developer Nicole Martin"
     />
-    <script
-      src="https://kit.fontawesome.com/5284888aa0.js"
-      crossorigin="anonymous"
-    ></script>
+    <script src="https://kit.fontawesome.com/5284888aa0.js" crossorigin="anonymous"></script>
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Nicole Martin | Software Developer</title>

diff --git a/src/App.js b/src/App.js
@@ -34,13 +34,16 @@ function App() {
   });
 
   // Dark Mode!
+
   const toggleTheme = useThemeStore((state) => state.toggleTheme);
   useTheme();
+  const theme = useThemeStore((state) => state.theme);
+
 
   return (
     <div className="App">
       <BrowserRouter>
-        <Nav toggle={toggle} toggleTheme={toggleTheme} />
+        <Nav toggle={toggle} toggleTheme={toggleTheme} theme={theme}/>
         <Dropdown isOpen={isOpen} toggle={toggle} />
         <Routes>
           <Route exact path="/" element={<Home />} />

diff --git a/src/Components/Blogs/BlogItem.js b/src/Components/Blogs/BlogItem.js
@@ -1,35 +1,35 @@
-import React from 'react';
+// import React from 'react';
 
-const BlogItem = ({ src, title, description }) => {
-  return (
-    <>
-      <div className={styles.mainContainer}>
-        <div className={styles.flexBox}>
-          <div className={styles.cardBox}>
-            <div className={styles.cardInner}>
-              <div className={styles.centerDiv}>
-                <img className={styles.blogImage} src={src} alt="pic" />
-                <h1 className={styles.blogName}>{title}</h1>
-                <p className={styles.blogDescription}>{description}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
+// const BlogItem = ({ src, title, description }) => {
+//   return (
+//     <>
+//       <div className={styles.mainContainer}>
+//         <div className={styles.flexBox}>
+//           <div className={styles.cardBox}>
+//             <div className={styles.cardInner}>
+//               <div className={styles.centerDiv}>
+//                 <img className={styles.blogImage} src={src} alt="pic" />
+//                 <h1 className={styles.blogName}>{title}</h1>
+//                 <p className={styles.blogDescription}>{description}</p>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
 
-const styles = {
-  mainContainer: 'container px-5 py-10 mx-auto',
-  cardBox:
-    'flex flex-wrap text-black text-center bg-gradient-to-r from-yellow-300 to-pink-300  px-5 py-5 m-2 rounded border-2 border-black ring-2 ring-yellow-300 dark:ring-pink-400',
-  flexBox: 'flex flex-wrap -m-2',
-  cardInner: 'lg:flex lg:items-center',
-  centerDiv: 'flex flex-wrap justify-center',
-  blogImage: 'h-90 rounded w-full object-cover object-center mb-6',
-  blogName:
-    'font-extrabold text-black font-Pt text-3xl m-2 lg:grid-row-2 text-gray-900 dark:text-white',
-};
+// const styles = {
+//   mainContainer: 'container px-5 py-10 mx-auto',
+//   cardBox:
+//     'flex flex-wrap text-black text-center bg-gradient-to-r from-yellow-300 to-pink-300  px-5 py-5 m-2 rounded border-2 border-black ring-2 ring-yellow-300 dark:ring-pink-400',
+//   flexBox: 'flex flex-wrap -m-2',
+//   cardInner: 'lg:flex lg:items-center',
+//   centerDiv: 'flex flex-wrap justify-center',
+//   blogImage: 'h-90 rounded w-full object-cover object-center mb-6',
+//   blogName:
+//     'font-extrabold text-black font-Pt text-3xl m-2 lg:grid-row-2 text-gray-900 dark:text-white',
+// };
 
-export default BlogItem;
+// export default BlogItem;
diff --git a/src/Components/Blogs/Blogs.js b/src/Components/Blogs/Blogs.js
@@ -1,40 +1,40 @@
-import React from 'react';
-import { blogArray } from './blogData';
-import BlogItem from './BlogItem';
+// import React from 'react';
+// import { blogArray } from './blogData';
+// import BlogItem from './BlogItem';
 
-const Blogs = () => {
-  return (
-    <div className={styles.backgroundDiv}>
-      <section className={styles.centerDiv}>
-        <div className={styles.textDiv}>
-          <h1 className={styles.blogTitle}>Here are some of my blogs:</h1>
-          <div className={styles.imageCenter}></div>
+// const Blogs = () => {
+//   return (
+//     <div className={styles.backgroundDiv}>
+//       <section className={styles.centerDiv}>
+//         <div className={styles.textDiv}>
+//           <h1 className={styles.blogTitle}>Here are some of my blogs:</h1>
+//           <div className={styles.imageCenter}></div>
 
-          <div class="m-3">
-            {blogArray.map(({ id, src, title, description }) => (
-              <BlogItem
-                key={id}
-                src={src}
-                title={title}
-                description={description}
-              />
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};
+//           <div class="m-3">
+//             {blogArray.map(({ id, src, title, description }) => (
+//               <BlogItem
+//                 key={id}
+//                 src={src}
+//                 title={title}
+//                 description={description}
+//               />
+//             ))}
+//           </div>
+//         </div>
+//       </section>
+//     </div>
+//   );
+// };
 
-const styles = {
-  backgroundDiv: 'bg-white dark:bg-gray-600',
-  centerDiv:
-    'max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12 bg-white dark:bg-gray-600',
-  textDiv: 'text-center pb-12',
-  blogTitle:
-    'font-bold text-3xl md:text-4xl lg:text-5xl font-heading text-gray-900 dark:text-white font-Poppins',
-  imageCenter: 'flex justify-center',
-  blogImage: 'object-center h-60',
-};
+// const styles = {
+//   backgroundDiv: 'bg-white dark:bg-gray-600',
+//   centerDiv:
+//     'max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12 bg-white dark:bg-gray-600',
+//   textDiv: 'text-center pb-12',
+//   blogTitle:
+//     'font-bold text-3xl md:text-4xl lg:text-5xl font-heading text-gray-900 dark:text-white font-Poppins',
+//   imageCenter: 'flex justify-center',
+//   blogImage: 'object-center h-60',
+// };
 
-export default Blogs;
+// export default Blogs;
diff --git a/src/Components/Blogs/blogData.js b/src/Components/Blogs/blogData.js
@@ -1,14 +1,14 @@
-export const blogArray = [
-  {
-    id: '1',
-    title: 'How To Stay Current with New Tech Trends ',
-    src: require('../../assets/blog/blog1.png').default,
-    description: 'A list of ways to keep up with the ever-changing tech world',
-  },
-  {
-    id: '1',
-    title: 'How To Stay Current with New Tech Trends ',
-    src: require('../../assets/blog/blog1.png').default,
-    description: 'A list of ways to keep up with the ever-changing tech world',
-  },
-];
+// export const blogArray = [
+//   {
+//     id: '1',
+//     title: 'How To Stay Current with New Tech Trends ',
+//     src: require('../../assets/blog/blog1.png').default,
+//     description: 'A list of ways to keep up with the ever-changing tech world',
+//   },
+//   {
+//     id: '1',
+//     title: 'How To Stay Current with New Tech Trends ',
+//     src: require('../../assets/blog/blog1.png').default,
+//     description: 'A list of ways to keep up with the ever-changing tech world',
+//   },
+// ];
diff --git a/src/Components/Contact.js b/src/Components/Contact.js
@@ -5,44 +5,44 @@ init('user_FkoSWYEQ8F2cqar2OKJ2V');
 
 function Contact() {
   const {
-    register,
-    handleSubmit,
-    watch,
-    reset,
+    // register,
+    // handleSubmit,
+    // watch,
+    // reset,
     formState: { errors },
   } = useForm();
 
   // Message Sent alert
-  const [successfulEmail, setSuccessfulEmail] = useState(false);
+  // const [successfulEmail, setSuccessfulEmail] = useState(false);
 
-  const onSubmit = () => {
-    sendForm(
-      'default_service',
-      'template_28v9nkp',
-      '#contact-form',
-      'user_FkoSWYEQ8F2cqar2OKJ2V'
-    ).then(
-      function (res) {
-        console.log('SUCCESS!', res.status, res.text);
-      },
-      function (error) {
-        console.log('FAILED...', error);
-      }
-    );
-    setSuccessfulEmail(true);
-  };
+  // const onSubmit = () => {
+  //   sendForm(
+  //     'default_service',
+  //     'template_28v9nkp',
+  //     '#contact-form',
+  //     'user_FkoSWYEQ8F2cqar2OKJ2V'
+  //   ).then(
+  //     function (res) {
+  //       console.log('SUCCESS!', res.status, res.text);
+  //     },
+  //     function (error) {
+  //       console.log('FAILED...', error);
+  //     }
+  //   );
+  //   setSuccessfulEmail(true);
+  // };
 
   // Message countdown
-  const message = watch('message') || '';
-  const messageCharsLeft = 2500 - message.length;
+  // const message = watch('message') || '';
+  // const messageCharsLeft = 2500 - message.length;
 
   return (
     <div className={styles.main_div}>
       <div className={styles.flex_div}>
         <div className="p-5">
           <p className={styles.social}>Social Links:</p>
           <a href="https://twitter.com/nmartinpdx">
-            <i className="fab fa-twitter-square fa-3x m-4 hover:bg-yellow-300"></i>
+          <i className="fab fa-twitter-square fa-3x m-4 hover:bg-yellow-300"></i>
           </a>
           <a href="https://github.com/nicole-m-martin">
             <i className="fab fa-github-square fa-3x m-4 hover:bg-green-300"></i>
@@ -54,7 +54,7 @@ function Contact() {
       </div>
       <h1 className={styles.chat}>Let's Chat! </h1>
       <div className={styles.main_form_container}>
-        <section className="flex justify-center">
+        {/* <section className="flex justify-center">
           <div className="w-full max-w-xs">
             <form id="contact-form" onSubmit={handleSubmit(onSubmit)}>
               <input type="hidden" name="contact_number" />
@@ -109,7 +109,7 @@ function Contact() {
                 aria-invalid={errors.message ? 'true' : 'false'}
               />
 
-              {/* Message countdown */}
+            
               <p className={styles.countdown}>{messageCharsLeft}</p>
               <div className="flex flex-row justify-center">
                 <input className={styles.send_btn} type="submit" value="Send" />
@@ -127,13 +127,14 @@ function Contact() {
                   value="Clear"
                 />
               </div>
-              {/* Form Submit Success Message */}
+              
             </form>
             {successfulEmail && (
               <span className="italic text-green-500">Email Sent</span>
             )}
           </div>
-        </section>
+        </section> */}
+        <a className={styles.labels} href="mailto:[email protected]">Email: [email protected]</a>
       </div>
     </div>
   );

diff --git a/src/Components/UI/Nav.js b/src/Components/UI/Nav.js
@@ -2,16 +2,21 @@ import React from 'react';
 import nm from '../../assets/nm-logo.png';
 import { Link } from 'react-router-dom';
 
-function Nav({ toggle, toggleTheme }) {
+function Nav({ toggle, toggleTheme, theme }) {
+  console.log(theme);
   return (
     <nav className={styles.main_nav}>
       <Link to="/" className="pl-8">
         <img src={nm} alt="nicole" className={styles.logo} />
       </Link>
       <button className="font-Pt" onClick={toggleTheme}>
-        <i className="fas fa-moon"></i>
-        <p className="font-Pt">Dark Mode!</p>
+      {theme === 'light' ? 
+      <i className="fas fa-sun"></i> : 
+      <i className="fas fa-moon"></i>
+    }
+        <p className="font-Pt">{theme === 'light' ? 'Light Mode!' : 'Dark Mode!'}</p>
       </button>
+      {/* Hamburger */}
       <div className="px-4 cursor-pointer md:hidden" onClick={toggle}>
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/darkMode/services/themeUtils.js b/src/darkMode/services/themeUtils.js
@@ -8,20 +8,4 @@ export const applyDarkTheme = (theme) => {
   root.classList.add(theme);
 };
 
-// import { useEffect, useState } from 'react';
 
-// export const applyDarkTheme = () => {
-//   const [theme, setTheme] = useState('light');
-//   const colorTheme = theme === 'light' ? 'dark' : 'light';
-
-//   useEffect(
-//     () => {
-//       const root = window.document.documentElement;
-//       root.classList.remove(colorTheme);
-//       root.classList.add(theme);
-//     },
-//     [theme],
-//     colorTheme
-//   );
-//   return [colorTheme, setTheme];
-// };