added project imges

gavrielbatyrov10 · Sep 3, 2024 · cc27532 · cc27532
1 parent 6e91e8f
commit cc27532
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/png" href="./src/assets/Logo (2).png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Gavriel Batyrov</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -21,11 +21,11 @@ export default function App() {
 
   return (
     <div className="App">
-      <Header />
-      <Hero />
+      <Header toggleModal={toggleModal} />
+      <Hero toggleModal={toggleModal} />
       <About />
       <Projects />
-      <Footer />
+      <Footer toggleModal={toggleModal} />
 
       <Modal
         isOpen={isModalOpen}
@@ -34,8 +34,9 @@ export default function App() {
           <div className="modal-left-content">
             <h2>Let's Connect</h2>
             <p>
-              I would love to hear from you. Whether it's a project, job
-              opportunity, or just a chat, feel free to reach out!
+              I’m currently looking for new opportunities! If you have a job
+              opening or would like to discuss potential roles, please reach
+              out—I’d love to connect.
             </p>
           </div>
         }

diff --git a/src/Footer.jsx b/src/Footer.jsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import "./Footer.css";
-import Modal from "./Modal"; // Import the Modal component
-import ContactForm from "./Contact"; // Import the ContactForm component
-import resume from "./assets/resume.pdf"; // Correctly import the PDF
+import Modal from "./Modal";
+import ContactForm from "./Contact";
+import modalImage from "./assets/modal.svg";
+import resume from "./assets/resume.pdf";
 
 export default function Footer() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -30,7 +31,13 @@ export default function Footer() {
               <a href="#projects">Projects</a>
             </li>
             <li>
-              <a href="#contact" onClick={toggleModal}>
+              <a
+                href="#contact"
+                onClick={(e) => {
+                  e.preventDefault();
+                  toggleModal();
+                }}
+              >
                 Contact
               </a>
             </li>
@@ -79,10 +86,20 @@ export default function Footer() {
             <div className="modal-left-content">
               <h3 className="modal__header1">Let's Connect</h3>
               <p className="modal__para">
-                I'm currently looking for new opportunities! If you have a job
-                opening or would like to discuss potential roles, please reach
-                out—I'd love to connect.
+                I'm actively pursuing opportunities as a software engineer and
+                would be thrilled to connect with others in the field. If you
+                have a job opening or simply want to discuss anything related to
+                technology and development, I'd be happy to hear from you. Don't
+                hesitate to get in touch—I'm eager to explore new possibilities
+                and engage in meaningful conversations.
               </p>
+              <figure className="modal__img--wrapper">
+                <img
+                  src={modalImage}
+                  alt="Contact Illustration"
+                  className="modal__img"
+                />
+              </figure>
             </div>
           }
           rightContent={<ContactForm />}

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import "./Header.css";
-import Modal from "./Modal"; // Ensure you import your Modal component
-import ContactForm from "./Contact"; // Import your ContactForm component
+import Modal from "./Modal"; // Import the Modal component
+import ContactForm from "./Contact"; // Import the ContactForm component
+import modalImage from "./assets/modal.svg"; // Import the modal image
 
 export default function Header() {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -60,7 +61,7 @@ export default function Header() {
         </nav>
       </div>
 
-      {/* Modal Component */}
+      {/* Modal for Contact Form */}
       {isModalOpen && (
         <Modal
           isOpen={isModalOpen}
@@ -69,9 +70,20 @@ export default function Header() {
             <div className="modal-left-content">
               <h3 className="modal__header1">Let's Connect</h3>
               <p className="modal__para">
-                I would love to hear from you. Whether it's a project, job
-                opportunity, or just a chat, feel free to reach out!
+                I'm actively pursuing opportunities as a software engineer and
+                would be thrilled to connect with others in the field. If you
+                have a job opening or simply want to discuss anything related to
+                technology and development, I'd be happy to hear from you. Don't
+                hesitate to get in touch—I'm eager to explore new possibilities
+                and engage in meaningful conversations.
               </p>
+              <figure className="modal__img--wrapper">
+                <img
+                  src={modalImage}
+                  alt="Contact Illustration"
+                  className="modal__img"
+                />
+              </figure>
             </div>
           }
           rightContent={<ContactForm />}

diff --git a/src/Hero.jsx b/src/Hero.jsx
@@ -34,8 +34,12 @@ export default function Hero() {
               <div className="modal-left-content">
                 <h3 className="modal__header1">Let's Connect</h3>
                 <p className="modal__para">
-                  I would love to hear from you. Whether it's a project, job
-                  opportunity, or just a chat, feel free to reach out!
+                  I'm actively pursuing opportunities as a software engineer and
+                  would be thrilled to connect with others in the field. If you
+                  have a job opening or simply want to discuss anything related
+                  to technology and development, I'd be happy to hear from you.
+                  Don't hesitate to get in touch—I'm eager to explore new
+                  possibilities and engage in meaningful conversations.
                 </p>
                 <figure className="modal__img--wrapper">
                   <img

diff --git a/src/Projects.css b/src/Projects.css
@@ -56,7 +56,8 @@
 .project-image {
   background-size: cover;
   background-position: center;
-  height: 200px;
+  height: 250px;
+  scale: 1;
   transition: transform 0.5s ease-in-out;
 }
 
@@ -142,6 +143,8 @@
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }
 
+
+
 /* Animations */
 @keyframes fadeInUp {
   from {

diff --git a/src/Projects.jsx b/src/Projects.jsx
@@ -1,28 +1,31 @@
 import React from "react";
 import "./Projects.css";
+import projectsite from "./assets/projectsite.png"; // Import the image
+import projectsitet2 from "./assets/projectsitet2.png"; // Import the correct image name
 
 export default function Projects() {
   const projectList = [
     {
-      title: "Project One",
+      title: "Puppy Bowl",
       description:
-        "A detailed exploration of Project One, focusing on innovative features and user experience.",
-      imageUrl: "https://via.placeholder.com/300x200",
-      link: "#",
+        "A backend application with functionalities to add, delete, and retrieve data, built using Express and Prisma. The tech stack for this project includes Node.js, JavaScript, Git, GitHub, Express, and Prisma.",
+      imageUrl:
+        "https://images.prismic.io/turing/652ec2a4fbd9a45bcec8194e_Express_js_11zon_0a5a935350.webp?auto=format%2Ccompress&fit=max&w=1920",
+      link: "https://github.com/gavrielbatyrov10/Puppy-Bowl",
     },
     {
-      title: "Project Two",
+      title: "Paw Pals",
       description:
-        "Project Two showcases advanced technology solutions with a user-friendly design.",
-      imageUrl: "https://via.placeholder.com/300x200",
-      link: "#",
+        "A fullstack application built using React and Express, providing a platform for pet owners to connect and share. The tech stack for this project includes React, Express, Node.js, JavaScript, Git, GitHub, Prisma, HTML, and CSS.",
+      imageUrl: projectsitet2,
+      link: "https://fullstackproject1-838j.onrender.com/", // Fix the link and remove extra attributes
     },
     {
-      title: "Project Three",
+      title: "Handy Chevra",
       description:
-        "A comprehensive look at Project Three, highlighting its impact and market relevance.",
-      imageUrl: "https://via.placeholder.com/300x200",
-      link: "#",
+        "A modern and responsive frontend application for a handyman service, built with React and CSS to provide an intuitive and user-friendly experience.",
+      imageUrl: projectsite, // Directly use the imported image
+      link: "https://handychevra.com/",
     },
   ];
 
@@ -34,10 +37,19 @@ export default function Projects() {
           <div className="project-card" key={index}>
             <div
               className="project-image"
-              style={{ backgroundImage: `url(${project.imageUrl})` }}
+              style={{
+                backgroundImage: `url(${project.imageUrl})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+              }}
             >
               <div className="overlay">
-                <a href={project.link} className="project-link">
+                <a
+                  href={project.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="project-link"
+                >
                   View Project
                 </a>
               </div>

diff --git a/src/assets/Logo (2).png b/src/assets/Logo (2).png
diff --git a/src/assets/projectsite.png b/src/assets/projectsite.png
diff --git a/src/assets/projectsitet2.png b/src/assets/projectsitet2.png