issue in ui

[Bilal-CodeMaster]

there is an issue in ui. The alignment of project card content is not same. you have to align it

[saad-bhatti]

To fix the alignment of the project card content and ensure that the buttons stay aligned at the bottom, you can make the following changes:

ProjectCards.js

Replace all the existing code in ProjectCards.js with the following code:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import { CgWebsite } from "react-icons/cg";
import { BsGithub } from "react-icons/bs";
import "./style.css"; // Import the CSS file

function ProjectCards(props) {
  return (
    <Card className="project-card-view">
      <Card.Img variant="top" src={props.imgPath} alt="card-img" />
      <Card.Body className="project-card-body">
        <Card.Title>{props.title}</Card.Title>
        <Card.Text style={{ textAlign: "justify" }}>
          {props.description}
        </Card.Text>
        <div className="button-container">
          <Button variant="primary" href={props.ghLink} target="_blank">
            <BsGithub /> &nbsp;
            {props.isBlog ? "Blog" : "GitHub"}
          </Button>

          {!props.isBlog && props.demoLink && (
            <Button
              variant="primary"
              href={props.demoLink}
              target="_blank"
              style={{ marginLeft: "10px" }}
            >
              <CgWebsite /> &nbsp;
              {"Demo"}
            </Button>
          )}
        </div>
      </Card.Body>
    </Card>
  );
}

export default ProjectCards;

style.css

Add the following to the project section in style.css:

.project-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.button-container {
  display: flex;
  justify-content: flex-start;
  margin-top: auto;
  justify-content: center;
}

This should fix the alignment issue within each project card's content.

Screenshot

Hope this helps!

[Bilal-CodeMaster]

yes this is but i just want to let you know about this problem but now i have solved this by myself and please check my portfolio and give me feedback
https://bilalcodemaster.vercel.app/home

[saad-bhatti]

I went through your portfolio and I like the clean, modern design with a minimalistic layout. It effectively highlights key content and provides a user-friendly experience. Great work!

[Bilal-CodeMaster]

thanks sir