Skip to content

Commit

Permalink
Merge pull request #12 from nicole-m-martin/updates
Browse files Browse the repository at this point in the history 
Updates
  • Loading branch information
@nicole-m-martin
nicole-m-martin authored Jun 10, 2024
2 parents a9f32ac + 4290787 commit 43cbf01
Show file tree
Hide file tree
Showing 15 changed files with 171 additions and 155 deletions.
8 changes: 8 additions & 0 deletions .hintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": [
"development"
],
"hints": {
"apple-touch-icons": "off"
}
}
7 changes: 2 additions & 5 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en" className="dark">
<head>
<!-- Meta -->
<meta charset="utf-8" />
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />} />
Expand Down
64 changes: 32 additions & 32 deletions src/Components/Blogs/BlogItem.js
View file
Original file line number Diff line number Diff line change
@@ -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;
72 changes: 36 additions & 36 deletions src/Components/Blogs/Blogs.js
View file
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 14 additions & 14 deletions src/Components/Blogs/blogData.js
View file
Original file line number Diff line number Diff line change
@@ -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',
// },
// ];
73 changes: 39 additions & 34 deletions src/Components/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,63 @@
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { init, sendForm } from 'emailjs-com';
init('user_FkoSWYEQ8F2cqar2OKJ2V');
import x from '../assets/square-x-twitter.svg'
// import { init, sendForm } from 'emailjs-com';
// 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">
<h1 className={styles.chat}>Let's Chat! 💬 </h1>
<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>
<div className={styles.iconBox}> <a href="https://twitter.com/nmartinpdx">
<img src={x} alt='twitter-x' className='fa-3x m-4 hover:bg-yellow-300' />
</a>
<a href="https://github.com/nicole-m-martin">
<i className="fab fa-github-square fa-3x m-4 hover:bg-green-300"></i>
</a>
<a href="https://www.linkedin.com/in/nicolemartinpdx/">
<i className="fab fa-linkedin fa-3x m-4 hover:bg-blue-400"></i>
</a>
</div>
</div>
</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" />
Expand Down Expand Up @@ -109,7 +112,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" />
Expand All @@ -127,13 +130,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>
);
Expand All @@ -143,10 +147,11 @@ const styles = {
main_div: 'bg-white dark:bg-gray-600 h-screen grid place-content-center',
flex_div: 'flex flex-row justify-center',
social: 'font-Pt dark:text-white text-2xl font-semibold mt-.5 text-center',
chat: 'font-Poppins dark:text-white text-4xl font-semibold mt-.5 tracking-wide text-center',
iconBox: 'flex flex-row justify-center m-4',
chat: 'font-Poppins dark:text-white text-5xl font-semibold mt-.5 tracking-wide text-center m-10',
main_form_container: 'flex justify-center items-center p-5',
labels:
'block text-grey-darker text-lg text-left font-bold font-Pt dark:text-white mb-2 pt-4',
'block text-grey-darker text-lg text-left hover:bg-pink-300 dark:hover:bg-pink-400 font-bold font-Pt dark:text-white margin-2 p-2',
name_input:
'border-2 border-black ring ring-yellow-300 dark:ring-pink-400 rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline dark:bg-white',
email_input:
Expand Down
5 changes: 3 additions & 2 deletions src/Components/Tech.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React from 'react';

const Tech = ({ one, two, three, four }) => {
const Tech = ({ one, two, three, four, five }) => {
return (
<div>
<ul>
<li>{one}</li>
<li className="text-blue-500">{one}</li>
<li>{two}</li>
<li>{three}</li>
<li>{four}</li>
<li>{five}</li>
</ul>
</div>
);
Expand Down
10 changes: 8 additions & 2 deletions src/Components/UI/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from 'react';
import x from '../../assets/square-x-twitter.svg';

function Footer() {
return (
<section className="fixed bottom-0 w-screen">
<div className="flex justify-evenly items-center bg-green-200 dark:bg-blue-300 h-10 text-black ">
<div>
<div className={styles.iconBox}>
<a href="https://twitter.com/nmartinpdx">
<i className="fab fa-twitter-square fa-2x m-4 hover:bg-yellow-300"></i>
<img src={x} alt='twitter-x' className='fa-3x m-4 hover:bg-yellow-300' width="28" height="32" />
</a>
<a href="https://github.com/nicole-m-martin">
<i className="fab fa-github-square fa-2x m-4 hover:bg-green-300"></i>
Expand All @@ -20,4 +21,9 @@ function Footer() {
);
}

const styles = {
iconBox: 'flex justify-center items-center',
};


export default Footer;
Loading

0 comments on commit 43cbf01

Please sign in to comment.