Donen

src/App.js

@@ -5,6 +5,7 @@ import Home from './Components/Home';
 import About from './Components/About/About';
 import Skills from './Components/Skills/Skills.js';
 import Footerr from './Components/Footer/Footerr';
+import Projects from './Components/Projects/Projects.js';
 import './App.css';
 
 function App() {
@@ -15,8 +16,9 @@ function App() {
         <Route exact path="/" component={Home} />
         <Route path="/about" component={About} />
         <Route path="/skills" component={Skills} />
+        <Route path="/projects" component={Projects} />
       </Switch>
-      <Footerr />
+      <Footerr/>
     </Router>
   );
 }

src/Components/About/Style.css

@@ -15,6 +15,9 @@
     left: 8rem;
     font-size: 1.11rem;
   }
+  .container3 h2{
+    color:#353941;
+  }
 
   .highlight {
     color: #b093d6;

src/Components/Footer/Footerr.css

@@ -1,24 +1,38 @@
 /* Section3/Footer.css */
 
 .footer {
-    display: flex;
+  display: flex;
+  flex-direction: column; /* Change flex-direction to column for smaller screens */
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  background-color: #353941; /* Footer background color */
+}
+
+.developer-info p,
+.copyright p {
+  color: white;
+}
+
+.social-icons {
+  margin-top: 10px; /* Add margin-top for better spacing */
+}
+
+.social-icons a {
+  color: white; /* Icon color */
+  text-decoration: none; /* Remove underline from links */
+  margin: 0 5px; /* Adjust margin for better spacing */
+}
+
+.social-icons a:last-child {
+  margin-right: 0;
+}
+
+/* Media queries for responsiveness */
+
+@media (min-width: 768px) {
+  .footer {
+    flex-direction: row; /* Change flex-direction to row for larger screens */
     justify-content: space-evenly;
-    align-items: center;
-    padding: 10px;
-    background-color: #353941; /* Footer background color */
-  }
-
-  .developer-info p,
-  .copyright p {
-    color: white;
-  }
-
-  .social-icons a {
-    color: white; /* Icon color */
-    text-decoration: none; /* Remove underline from links */
-    margin-right: 10px;
-  }
-
-  .social-icons a:last-child {
-    margin-right: 0; 
   }
+}

src/Components/NavBarComponent/NavBar.js

@@ -39,10 +39,11 @@ function NavBar() {
           <Link to='/skills'><FontAwesomeIcon icon={faTools} className="fa-icon" />Skills</Link>
         </li>
         <li className="nav-item">
-          <a href="link"><FontAwesomeIcon icon={faProjectDiagram} className="fa-icon" />Projects</a>
+          <a href="projects"><FontAwesomeIcon icon={faProjectDiagram} className="fa-icon" />Projects</a>
         </li>
         <li className="nav-item">
-          <a href="link"><FontAwesomeIcon icon={faFile} className="fa-icon" />Resume</a>
+          {/* <a href="link"><FontAwesomeIcon icon={faFile} className="fa-icon" />Resume</a> */}
+           <a href="https://drive.google.com/file/d/13kaPsdMNDsM4LV9g7m5-E5PTildp-yYf/view" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faFile} className="fa-icon" />Resume</a>
         </li>
       </ul>
     </nav>

src/Components/Projects/Projects.css

@@ -0,0 +1,87 @@
+.projects {
+    margin-top: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 82vh;
+    background-color: #353941;
+    justify-content: space-evenly;
+  }
+
+  .projects h2 {
+    position: relative;
+    left: 14em;
+    top: 1rem;
+    font-size: 3rem;
+    color: #ddd;
+  }
+
+  .projects span {
+    color: #b093d6;
+  }
+
+  .project-card {
+    width: 300px;
+    height: 300px;
+    margin-top: 150px;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    text-align: center;
+    position: relative;
+    left: -8rem;
+    transition: all 0.3s ease; /* Smooth transition for all properties */
+    box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.1); /* Subtle white box shadow */
+  }
+
+  .project-card:hover {
+    transform: translateY(-5px); /* Adjust hover effect */
+    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.2); /* Enhance shadow on hover */
+  }
+
+  .project-card h3 {
+    margin-bottom: 10px;
+    font-size: 1.5rem;
+    color: #b093d6;
+  }
+
+  .project-card p {
+    margin-bottom: 15px;
+    color: #ddd;
+  }
+
+  .project-card a {
+    display: inline-block;
+    padding: 10px 20px;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+  }
+
+  .project-card img {
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+  }
+
+  @media (max-width: 768px) {
+    .project-card {
+      width: calc(50% - 20px); /* Adjust width for smaller screens */
+      margin-top: 50px; /* Adjust margin-top for smaller screens */
+      left: auto;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .projects h2 {
+      left: 0; /* Center h2 for smaller screens */
+      text-align: center;
+      width: 100%;
+    }
+
+    .project-card {
+      width: calc(100% - 40px); /* Adjust width for even smaller screens */
+      margin-top: 50px; /* Adjust margin-top for smaller screens */
+      left: auto;
+    }
+  }
+

src/Components/Projects/Projects.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import './Projects.css';
+// import React from 'react';
+
+const projects = [
+  {
+    title: 'Patient Record System',
+    description:
+      'Backend system for a hospital to manage patient records. This project was made to understand the basics of backend development, API creation and database management. The project was made using spring bootand java.',
+    image: 'path/to/wiggles.jpg', // Replace with the path to your image
+    github: 'https://github.com/sanjanaynvsdl/Patient_Record_System', // Replace with your project URL
+    // demo: 'https://your-wiggles-demo.com', // Replace with your project URL
+  },
+  {
+    title: 'Yulu_Analysis',
+    description:
+      'A data analysis project on the Yulu bike sharing system in Bangalore. The project was made to understand data analysis, data visualization and data interpretation. The project was made using python and jupyter notebook.',
+    image: 'path/to/newsletter.jpg', // Replace with the path to your image
+    github: 'https://github.com/sanjanaynvsdl/Yulu_Analysis', // Replace with your project URL
+    // demo: 'https://your-newsletter-demo.com', // Replace with your project URL
+  },
+  {
+    title: 'Fake store_Api',
+    description:
+      'A project to understand API creation and data management. The project was made using spring boot. The project was made to understand the basics of API creation and data management.',
+    image: 'path/to/newsletter.jpg', // Replace with the path to your image
+    github: 'https://github.com/sanjanaynvsdl/FakeStore_Api', // Replace with your project URL
+    // demo: 'https://your-newsletter-demo.com', // Replace with your project URL
+  },
+  // ... Add more projects here
+];
+
+function Projects() {
+  return (
+    <section className="projects">
+      <h2>My <span>Projects</span></h2>
+      {projects.map((project) => (
+        <div className="project-card" key={project.title}>
+          <h3>{project.title}</h3>
+          {/* <img src={project.image} alt={project.title} /> */}
+          <p>{project.description}</p>
+          <div>
+            <a href={project.github} target="_blank" rel="noreferrer">
+              Github
+            </a>
+            {/* <a href={project.demo} target="_blank" rel="noreferrer">
+              Demo
+            </a> */}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export default Projects;

src/Components/Section1/Typing.css

@@ -1,37 +1,54 @@
 .content {
-    padding-top: 160px; 
-    background-color: #353941; 
-    color: aliceblue;
-    position:relative;
-
+  padding-top: 160px; 
+  background-color: #353941; 
+  color: aliceblue;
+  position:relative;
+}
+
+.section11 {
+  display: flex;
+  flex-direction: column; /* Change flex-direction to column for smaller screens */
+  align-items: center; /* Center content horizontally */
+}
+
+.typing-effect {
+  display: block;
+  justify-content: center; 
+  min-height: 60vh; 
+  font-size: 2rem;
+  font-family: 'Roboto', sans-serif;
+  text-align: center; /* Center text horizontally */
+  padding: 6rem 1rem; /* Adjust padding for better spacing */
+}
+
+.typing-effect .name {
+  color: #b093d6;
+}
+
+.caret {
+  display: inline-block;
+  animation: blink 0.7s step-end infinite;
+}
+
+@keyframes blink {
+  from, to {
+    border-color: transparent;
   }
-  .section11{
-    display: flex;
+  50% {
+    border-color: black;
   }
- .typing-effect {
-    display: block;
-    justify-content: center; 
-    min-height: 60vh; 
-    font-size: 2rem;
-    font-family: 'Roboto', sans-serif;
-    padding-left: 12rem;
-    text-align: start;
-    padding-top: 6rem;
+}
+
+/* Media queries for responsiveness */
+
+@media (min-width: 768px) {
+  .section11 {
+    flex-direction: row; /* Change flex-direction to row for larger screens */
   }
-  .typing-effect .name{
-    color: #b093d6;
+
+  .typing-effect {
+    padding-left: 12rem; /* Restore padding-left for larger screens */
+    text-align: start; /* Reset text-align for larger screens */
+    padding-top: 6rem; /* Restore padding-top for larger screens */
   }
-  .caret {
-    display: inline-block;
-    animation: blink 0.7s step-end infinite;
-  }
-
-  @keyframes blink {
-    from, to {
-      border-color: transparent;
-    }
-    50% {
-      border-color: black;
-    }
-  } 
-
+}

src/Components/Section2/BriefIntro.css

@@ -1,21 +1,39 @@
-
-.brief-intro-container{
+.brief-intro-container {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-direction: column;
-    /* padding-top: -20rem; */
     font-size: 1.3rem;
     font-family: 'Roboto', sans-serif;
     min-height: 80vh;
-}
-.intro{
+  }
+
+  .intro {
     color: #b093d6;
-}
-.brief-intro-container h1{
-    font-size:2rem;
-}
-.brief-intro-container h1 span{
+  }
+
+  .brief-intro-container h1 {
+    font-size: 2rem;
+  }
+
+  .brief-intro-container h1 span {
     font-size: 2.5rem;
-}
+  }
+
+  /* Media queries for responsiveness */
+
+  @media (max-width: 768px) {
+    .brief-intro-container {
+      padding-top: 20vh; /* Adjust padding for smaller screens */
+    }
+
+    .brief-intro-container h1 {
+      font-size: 1.5rem; /* Adjust heading font-size for smaller screens */
+    }
+
+    .brief-intro-container h1 span {
+      font-size: 2rem; /* Adjust span font-size for smaller screens */
+    }
+  }
+