styling added

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+.git
+.gitignore
+README.md
+npm-debug.log

Dockerfile

@@ -0,0 +1,29 @@
+# Step 1: Use a base image with Node.js
+FROM node:16 AS build
+
+# Step 2: Set the working directory inside the container
+WORKDIR /app
+
+# Step 3: Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Step 4: Install dependencies
+RUN npm install
+
+# Step 5: Copy the rest of your application code
+COPY . .
+
+# Step 6: Build the React application
+RUN npm run build
+
+# Step 7: Use a base image to serve the application
+FROM nginx:alpine
+
+# Step 8: Copy the build output from the previous stage to the Nginx public directory
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Step 9: Expose port 80 to the outside
+EXPOSE 80
+
+# Step 10: Start the Nginx server
+CMD ["nginx", "-g", "daemon off;"]

src/App.css

@@ -304,61 +304,66 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
   border-right: 0.08em solid #666;
 }
 
-/* Projects */
-.card-custom {
+/* General styling for projects section */
+.projects-section {
+  padding: 0 0 50px 0;
   position: relative;
-  overflow: hidden;
-  border: none;
-  cursor: pointer;
-  transition: transform 0.3s ease-in-out;
 }
 
-.card-custom:hover {
-  transform: scale(1.05);
+/* Styling for the carousel container */
+.skill-slider {
+  width: 80%;
+  margin: 0 auto;
+  position: relative;
 }
 
-.card-custom img {
-  transition: transform 0.3s ease-in-out;
+/* Styling for the cards within the carousel */
+.card-custom {
+  background-color: #463c3c; /* Light grey background for cards */
+  border-radius: 20px; /* Rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
+  overflow: hidden; /* Ensure content doesn't overflow */
+  position: relative; /* Allow for overlapping */
+  transition: transform 250ms, box-shadow 250ms; /* Smooth transitions */
 }
 
-.card-custom:hover img {
-  transform: scale(1.1);
+/* Image styling */
+.card-custom img {
+  width: 100%;
+  border-bottom: 1px solid #ddd; /* Divider line between image and text */
 }
 
-.card-custom .card-body {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  color: #fff;
-  padding: 20px;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-  transform: translateY(100%);
+/* Styling for card content */
+.card-custom-body {
+  padding: 1rem;
 }
 
-.card-custom:hover .card-body {
-  opacity: 1;
-  transform: translateY(0);
+/* Hover effects for the card */
+.card-custom:hover {
+  transform: translateY(-10px) rotate(3deg); /* Move up and rotate */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
 }
 
-.card-custom .card-title {
-  font-size: 20px;
-  font-weight: bold;
+/* Styling to ensure cards overlap */
+.card-custom:nth-child(n+2) {
+  margin-left: -40px; /* Overlap effect */
 }
 
-.card-custom .card-text {
-  font-size: 16px;
+/* Adjust carousel arrows */
+.react-multi-carousel-arrow {
+  background-color: #333; /* Dark background for arrows */
+  border-radius: 50%; /* Round arrows */
+  height: 30px;
+  width: 30px;
+  z-index: 10;
 }
 
-/* Wrapper for Banner and Projects */
-.content-wrapper {
-  background: url('./assets/img/136646.jpg') no-repeat center center;
-  background-size: cover;
-  padding-top: 150px; /* Same as the padding top of the banner */
+.react-multi-carousel-arrow::before {
+  font-size: 20px;
+  color: #fff; /* White arrow color */
 }
 
+
 /* contactform */
 
 .modal-header {

src/components/Projects.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Card, Container, Row, Col } from 'react-bootstrap';
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
 
 const projects = [
   {
@@ -27,24 +28,39 @@ const Projects = () => {
     window.open(link, '_blank');
   };
 
+  const responsive = {
+    superLargeDesktop: {
+      breakpoint: { max: 4000, min: 3000 },
+      items: 5
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 3
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 2
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1
+    }
+  };
+
   return (
     <section className="projects-section" id="projects">
-      <Container>
-        <Row>
-          {projects.map((project, index) => (
-            <Col key={index} sm={12} md={6} lg={4}>
-              <Card className="mb-4" onClick={() => handleCardClick(project.link)}>
-                <Card.Img variant="top" src={project.imageUrl} />
-                <Card.Body>
-                  <Card.Title>{project.title}</Card.Title>
-                  <Card.Text>{project.description}</Card.Text>
-                </Card.Body>
-              </Card>
-            </Col>
-          ))}
-        </Row>
-      </Container>
-    </section>
+    <Carousel responsive={responsive} infinite={true} className="skill-slider">
+      {projects.map((project, index) => (
+        <div key={index} className="card-custom" onClick={() => handleCardClick(project.link)}>
+          <img src={project.imageUrl} alt={project.title} />
+          <div className="card-custom-body">
+            <h5>{project.title}</h5>
+            <p>{project.description}</p>
+          </div>
+        </div>
+      ))}
+    </Carousel>
+  </section>
   );
 };