fixed project issues

Author: gauravsahdz

src/components/ProjectDetailsModal.js

@@ -23,6 +23,7 @@ class ProjectDetailsModal extends Component {
       var title = this.props.data.title;
       var description = this.props.data.description;
       var url = this.props.data.link;
+      var gitUrl = this.props.data.githubRepoLink;
       if (this.props.data.technologies) {
         var tech = technologies.map((icons, i) => {
           return (
@@ -46,9 +47,12 @@ class ProjectDetailsModal extends Component {
           var img = images.map((elem, i) => {
             return (
               <div key={i}>
-                <img src={urlFor(elem).url()} alt="project" 
-                style={{ width: "100%", height: "100%" }}
-                />;
+                <img
+                  src={urlFor(elem).url()}
+                  alt="project"
+                  style={{ width: "100%", height: "100%" }}
+                />
+                ;
               </div>
             );
           });
@@ -109,9 +113,24 @@ class ProjectDetailsModal extends Component {
                   <i
                     className="fas fa-external-link-alt"
                     style={{ marginLeft: "10px" }}
+                    title="Live Demo"
                   ></i>
                 </a>
               ) : null}
+              {gitUrl ? (
+                <a
+                  href={gitUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="link-href"
+                >
+                  <i
+                    className="fas fa-code-branch"
+                    style={{ marginLeft: "10px" }}
+                    title="Github Repo"
+                  />
+                </a>
+              ) : null}
             </h3>
             <p className="modal-description">{description}</p>
             <div className="col-md-12 text-center">

src/components/Projects.js

@@ -3,6 +3,7 @@ import ProjectDetailsModal from "./ProjectDetailsModal";
 import client from "../client";
 
 import imageUrlBuilder from "@sanity/image-url";
+import { Dropdown } from "react-bootstrap";
 
 const builder = imageUrlBuilder(client);
 
@@ -15,7 +16,8 @@ class Projects extends Component {
     super(props);
     this.state = {
       detailsModalShow: false,
-      selectedProject: null, // Store the selected project data
+      selectedProject: null,
+      showAllProjects: false, // State to control whether to show all projects or not
     };
   }
 
@@ -29,8 +31,16 @@ class Projects extends Component {
     this.setState({ detailsModalShow: false, selectedProject: null });
   };
 
+  // Function to toggle showing all projects
+  toggleShowAllProjects = () => {
+    this.setState((prevState) => ({
+      showAllProjects: !prevState.showAllProjects,
+    }));
+  };
+
   render() {
-    const { selectedProject } = this.state;
+    const { selectedProject, showAllProjects } = this.state;
+    const { projects } = this.props;
 
     // Check if selectedProject is not null, then render project details modal
     const projectDetailsModal = selectedProject && (
@@ -41,36 +51,8 @@ class Projects extends Component {
       />
     );
 
-    let projects = [];
-
-    if (this.props.projects) {
-      projects = this.props.projects.map((project) => (
-        <div
-          className="col-sm-12 col-md-6 col-lg-4"
-          key={project._id} // Use a unique key, like the project's _id
-          style={{ cursor: "pointer" }}
-        >
-          <span className="portfolio-item d-block">
-            <div
-              className="foto"
-              onClick={() => this.detailsModalShow(project)}
-            >
-              <div>
-                <img
-                  src={urlFor(project.thumbnail).url()}
-                  alt="projectImages"
-                  height="230"
-                  style={{ marginBottom: 5 }}
-                />
-                <span className="project-date">{project.date}</span>
-                <br />
-                <p className="project-title-settings mt-3">{project.title}</p>
-              </div>
-            </div>
-          </span>
-        </div>
-      ));
-    }
+    // Determine which projects to render based on showAllProjects state
+    const visibleProjects = showAllProjects ? projects : projects.slice(0, 6);
 
     return (
       <section id="portfolio">
@@ -79,9 +61,55 @@ class Projects extends Component {
             <span>Projects</span>
           </h1>
           <div className="col-md-12 mx-auto">
-            <div className="row mx-auto">{projects}</div>
+            <div className="row mx-auto">
+              {visibleProjects.map((project) => (
+                <div
+                  className="col-sm-12 col-md-6 col-lg-4"
+                  key={project._id}
+                  style={{ cursor: "pointer" }}
+                >
+                  <span className="portfolio-item d-block">
+                    <div
+                      className="foto"
+                      onClick={() => this.detailsModalShow(project)}
+                    >
+                      <div>
+                        <img
+                          src={urlFor(project.thumbnail).url()}
+                          alt="projectImages"
+                          height="230"
+                          style={{ marginBottom: 5 }}
+                        />
+                        <span className="project-date">{project.date}</span>
+                        <br />
+                        <p className="project-title-settings mt-3">
+                          {project.title}
+                        </p>
+                      </div>
+                    </div>
+                  </span>
+                </div>
+              ))}
+            </div>
           </div>
           {projectDetailsModal}
+
+          <div
+            className="col-md-12 mx-auto"
+            style={{ textAlign: "center", marginTop: 20 }}
+          >
+            <Dropdown>
+              <Dropdown.Toggle
+                variant="success"
+                id="dropdown-basic"
+                style={{ backgroundColor: "black", borderColor: "black" }}
+                size="lg"
+                onClick={this.toggleShowAllProjects}
+              >
+                {showAllProjects ? "Show Less" : "See More"}
+              </Dropdown.Toggle>
+            </Dropdown>
+          </div>
         </div>
       </section>
     );

src/scss/themes/theme-dark.scss

@@ -42,6 +42,10 @@ body[data-theme="dark"] {
     background-color: #494949 !important;
   }
 
+  .navbar-brand{
+    color: white !important;
+  }
+
   .resume-btn {
     background-color: #494949;
     color: white;
@@ -101,16 +105,16 @@ body[data-theme="dark"] {
   }
 
   #contactForm {
-    background: #494949;
+    background: #5b5b5b;
     label {
       color: rgba(244, 239, 239, 0.641) !important;
     }
     #name,
     #email,
     #message,
     #subject {
-      color: white;
-      background: #6d6d6d;
+      color: #6d6d6d;
+      background: white;
     }
   }