Merge pull request #11 from nicole-m-martin/refactor_branch

change cover picture, start on adding blog section

src/App.js

@@ -6,6 +6,7 @@ import Home from './containers/home';
 import ProjectContainer from './containers/projectContainer';
 import AboutContainer from './containers/aboutContainer';
 import ContactContainer from './containers/contactContainer';
+// import BlogContainer from './containers/blogContainer';
 import Footer from './Components/UI/Footer';
 import { useTheme } from './darkMode/hooks/useTheme';
 import useThemeStore from './darkMode/stores/useThemeStore';
@@ -46,6 +47,7 @@ function App() {
           <Route exact path="/projects" element={<ProjectContainer />} />
           <Route exact path="/about" element={<AboutContainer />} />
           <Route exact path="/contact" element={<ContactContainer />} />
+          {/* <Route exact path="/blog" element={<BlogContainer />} /> */}
         </Routes>
         <Footer />
       </BrowserRouter>

src/Components/About.js

@@ -10,7 +10,7 @@ const About = () => {
         {/* <img className="hidden" src={social} alt="social" /> */}
         <img className={styles.image_nicole} alt="nicole blonde" src={nic} />
         <div className={styles.text_center}>
-          <h1 className={styles.job_title}>Software Engineer</h1>
+          <h1 className={styles.job_title}>Software Developer</h1>
           <p className={styles.bio}>
             My name is{' '}
             <span className={styles.nicole_title}>Nicole Martin</span>, and I

src/Components/Blogs/BlogItem.js

@@ -0,0 +1,35 @@
+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 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;

src/Components/Blogs/Blogs.js

@@ -0,0 +1,40 @@
+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>
+
+          <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',
+};
+
+export default Blogs;

src/Components/Blogs/blogData.js

@@ -0,0 +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',
+  },
+];

src/Components/UI/Dropdown.js

@@ -23,6 +23,9 @@ const Dropdown = ({ isOpen, toggle }) => {
       <Link className={styles.contactTab} to="/contact">
         Contact
       </Link>
+      {/* <Link className={styles.blogTab} to="/blog">
+        Blog
+      </Link> */}
     </div>
   );
 };
@@ -36,6 +39,8 @@ const styles = {
     'p-4 hover:bg-blue-300 dark:hover:bg-blue-300 dark:hover:text-black bg-white dark:bg-gray-500 dark:text-white font-Pt',
   contactTab:
     'p-4 hover:bg-green-300 dark:hover:bg-green-300 dark:hover:text-black bg-white dark:bg-gray-500 dark:text-white font-Pt',
+  blogTab:
+    'p-4 hover:bg-green-300 dark:hover:bg-green-300 dark:hover:text-black bg-white dark:bg-gray-500 dark:text-white font-Pt',
 };
 
 export default Dropdown;

src/Components/UI/Nav.js

@@ -41,6 +41,9 @@ function Nav({ toggle, toggleTheme }) {
         <Link className={styles.connect} to="/contact">
           Connect
         </Link>
+        {/* <Link className={styles.blog} to="/blogs">
+          Blog
+        </Link> */}
       </div>
     </nav>
   );
@@ -55,6 +58,7 @@ const styles = {
   about: 'p-4 hover:bg-yellow-300',
   resume: 'p-4 hover:bg-blue-300 dark:hover:bg-blue-400',
   connect: 'p-4 hover:bg-green-300',
+  blog: 'p-4 hover:bg-green-300',
 };
 
 export default Nav;

src/containers/blogContainer.js

@@ -0,0 +1,12 @@
+// import React from 'react';
+// import Blogs from '../Components/Blogs/Blogs';
+
+// const blogContainer = () => {
+//   return (
+//     <div>
+//       <Blogs />
+//     </div>
+//   );
+// };
+
+// export default blogContainer;

src/containers/home.js

@@ -23,9 +23,12 @@ const Home = () => {
           <h1 className={styles.title}>Hello World🌎</h1>
 
           <p className={styles.subtitle}>
-            I'm <span className={styles.nicoleColor}>Nicole</span> and I love
-            coffee and coding.
+            I'm <span className={styles.nicoleColor}>Nicole</span>. It's so nice
+            to meet you!
           </p>
+
+          {/* <p className={styles.subtitle}>Check Out My Blog:</p>
+          <a href="https://nicsquicktips.hashnode.dev/">Hashnode</a> */}
           <img src={Computer} alt="comp" />
           <h3 className={styles.techNames}>💙 Tech I love 💙</h3>
           <section className={styles.techBox}>