Merge pull request #2 from Mansoor-P/feat/contactui

Feat/contactui
Mansoor-P · Jun 29, 2024 · 0a81975 · 0a81975
2 parents 72e6a10 + dc7164b
commit 0a81975
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 186 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,6 @@
 import './App.css';
 import Contact from './sections/Contact/Contact';
-import Footer from './sections/Footer/Footer';
 import Hero from './sections/Hero/Hero';
-// import Projects from './Projects/Projects';
 import Projects from './sections/Projects/Projects';
 import Skills from './sections/Skills/Skills';
 
@@ -13,7 +11,6 @@ function App() {
       <Skills />
       <Projects />
       <Contact />
-      <Footer />
     </>
   );
 }

diff --git a/src/sections/Contact/Contact.jsx b/src/sections/Contact/Contact.jsx
@@ -1,48 +1,36 @@
 import styles from './ContactStyles.module.css';
 
-function Contact() {
+const Contact = () => {
   return (
-    <section id="contact" className={styles.container}>
-      <h1 className="sectionTitle">Contact</h1>
-      <form action="">
-        <div className="formGroup">
-          <label htmlFor="name" hidden>
-            Name
-          </label>
-          <input
-            type="text"
-            name="name"
-            id="name"
-            placeholder="Name"
-            required
-          />
+    <div className={styles.footer}>
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <h3>Let's Connect</h3>
+          <a href="mailto:munaf6007@gmail.com" className={styles.email}>munaf6007@gmail.com</a>
+          <div className={styles.socialIcons}>
+            <a href="https://www.linkedin.com/in/mansoor0731/" className={styles.icon}>Li</a>
+            <a href="https://github.com/Mansoor-P" className={styles.icon}>Git</a>
+
+          </div>
         </div>
-        <div className="formGroup">
-          <label htmlFor="email" hidden>
-            Email
-          </label>
-          <input
-            type="text"
-            name="email"
-            id="email"
-            placeholder="Email"
-            required
-          />
+
+        <div className={styles.section}>
+          <h3>Contact Me</h3>
+          <form>
+            <input type="email"  placeholder="Enter Email address" className={styles.emailInput} />
+            <button type="submit"  className={styles.subscribeButton}>Mail Me</button>
+          </form>
         </div>
-        <div className="formGroup">
-          <label htmlFor="message" hidden>
-            Message
-          </label>
-          <textarea
-            name="message"
-            id="message"
-            placeholder="Message"
-            required></textarea>
-        </div>
-        <input className="hover btn" type="submit" value="Submit" />
-      </form>
-    </section>
+      </div>
+    <hr className={styles.hr}/>
+      <div className={styles.footerBottom}>
+      <p>
+        &copy; Copyright &copy; 2024 All Rights reserved | This portfolio made
+        by <span style={{color: "#0987f2"}} >Mansoor Pathikonda</span>. <br />
+      </p>
+      </div>
+    </div>
   );
-}
+};
 
 export default Contact;
diff --git a/src/sections/Contact/ContactStyles.module.css b/src/sections/Contact/ContactStyles.module.css
@@ -1,79 +1,102 @@
-.container {
-  display: flex;
-  flex-direction: column;
+
+.footer {
+  margin-left: 50px;
+  margin-right: 50px;
+  padding: 20px 20px;
   text-align: center;
+  color: #333;
+
+
 }
 
-form {
+.container {
   display: flex;
-  flex-direction: column;
-  gap: 30px;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.section {
+  flex: 1;
+  margin: 10px;
+  max-width: 300px;
+  text-align: left;
 }
 
-textarea,
-input:not([type='submit']) {
-  height: 50px;
-  padding-left: 16px;
-  width: 250px;
+
+.email {
+  display: block;
+  color: #0987f2;
+  margin-bottom: 20px;
+  text-decoration: none;
 }
 
-textarea {
-  padding-top: 16px;
-  resize: none;
-  height: 250px;
+.socialIcons {
+  display: flex;
+  justify-content: flex-start;
 }
 
-input,
-textarea {
-  border-radius: 20px;
-  border: #888 1px solid;
-  box-sizing: border-box;
-  justify-self: center;
-  background-color: var(--background-color);
-  color: var(--form-text-color);
+.icon {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #0987f2;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  text-decoration: none;
+  color: #0987f2;
 }
 
-::placeholder {
-  color: var(--form-text-color);
+.emailInput {
+  padding: 10px;
+  width: 92.5%;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: 10px;
 }
 
-input[type='submit'] {
-  background-color: var(--btn-color);
-  color: var(--btn-text-color);
+.subscribeButton {
+  padding: 10px 10px;
+  width: 100%;
+
+  background: #0987f2;
+  color: #fff;
   border: none;
-  border-radius: 20px;
-  width: 126px;
-  height: 50px;
-  font-size: 20px;
-  font-weight: bold;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-  transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
-  margin: auto;
+  border-radius: 5px;
+  cursor: pointer;
 }
 
-input[type='submit']:hover {
-  transform: scale(1.05);
+.footerBottom {
+  margin-top: 40px;
+  font-size: 0.9em;
+  color: #999;
 }
 
-input[type='submit']:active {
-  transform: translateY(2px);
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+.footerBottom span {
+  color: #ba79e6;
 }
+.hr{
+  width: 80%;
+  background-color: gray;
+  height: 1.5px;
+}
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+  }
 
-@media (width >= 800px) {
-  textarea,
-  input:not([type='submit']) {
-    width: 600px;
-    font-size: 20px;
+  .section {
+    max-width: 100%;
+    text-align: center;
   }
-  form {
-    gap: 40px;
+
+  .socialIcons {
+    justify-content: center;
   }
-}
 
-@media (width >= 1400px) {
-  textarea,
-  input:not([type='submit']) {
-    width: 800px;
+  .emailInput {
+    width: 92.5%;
   }
 }
diff --git a/src/sections/Footer/Footer.jsx b/src/sections/Footer/Footer.jsx
diff --git a/src/sections/Footer/FooterStyles.module.css b/src/sections/Footer/FooterStyles.module.css
diff --git a/src/sections/Hero/Hero.jsx b/src/sections/Hero/Hero.jsx
@@ -1,22 +1,22 @@
-import styles from './HeroStyles.module.css';
-import heroImg from '../../assets/aboutr.png';
+import styles from "./HeroStyles.module.css";
+import heroImg from "../../assets/aboutr.png";
 
-import sun from '../../assets/sun.svg';
-import moon from '../../assets/moon.svg';
+import sun from "../../assets/sun.svg";
+import moon from "../../assets/moon.svg";
 
-import githubLight from '../../assets/github-light.svg';
-import githubDark from '../../assets/github-dark.svg';
-import linkedinLight from '../../assets/linkedin-light.svg';
-import linkedinDark from '../../assets/linkedin-dark.svg';
-import CV from '../../assets/cv.pdf';
-import { useTheme } from '../../common/ThemeContext';
+import githubLight from "../../assets/github-light.svg";
+import githubDark from "../../assets/github-dark.svg";
+import linkedinLight from "../../assets/linkedin-light.svg";
+import linkedinDark from "../../assets/linkedin-dark.svg";
+import CV from "../../assets/cv.pdf";
+import { useTheme } from "../../common/ThemeContext";
 
 function Hero() {
   const { theme, toggleTheme } = useTheme();
 
-  const themeIcon = theme === 'light' ? sun : moon;
-  const githubIcon = theme === 'light' ? githubLight : githubDark;
-  const linkedinIcon = theme === 'light' ? linkedinLight : linkedinDark;
+  const themeIcon = theme === "light" ? sun : moon;
+  const githubIcon = theme === "light" ? githubLight : githubDark;
+  const linkedinIcon = theme === "light" ? linkedinLight : linkedinDark;
 
   return (
     <section id="hero" className={styles.container}>
@@ -41,11 +41,10 @@ function Hero() {
         </h1>
         <h2>Full stack Developer</h2>
         <span>
-
           <a href="https://github.com/Mansoor-P" target="_blank">
             <img src={githubIcon} alt="Github icon" />
           </a>
-          <a href="https://linkedin.com/mansoor0731" target="_blank">
+          <a href="https://www.linkedin.com/in/mansoor0731/" target="_blank">
             <img src={linkedinIcon} alt="Linkedin icon" />
           </a>
         </span>
@@ -57,6 +56,10 @@ function Hero() {
           <button className="hover">Resume</button>
         </a>
       </div>
+      <a href="#top" className={styles.up_button}>
+
+        <span className={styles.arrow}  >↑</span>
+      </a>
     </section>
   );
 }