initial commit

src/pages/portfolio/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "./style.css";
+import { Helmet, HelmetProvider } from "react-helmet-async";
+import { Container, Row, Col } from "react-bootstrap";
+import { dataportfolio, meta } from "../../content_option";
+
+export const Portfolio = () => {
+  return (
+    <HelmetProvider>
+      <Container className="About-header">
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title> Projects | {meta.title} </title>
+          <meta name="description" content={meta.description} />
+        </Helmet>
+        <Row className="mb-5 mt-3 pt-md-3">
+          <Col lg="8">
+            <h1 className="display-4 mb-4"> Projects </h1>
+            <hr className="t_border my-4 ml-0 text-left" />
+          </Col>
+        </Row>
+        <div className="mb-5 project_items_ho">
+          {dataportfolio.map((data, i) => {
+            return (
+              <div key={i} className="project_item">
+                <img src={data.img} alt="" />
+                <div className="content">
+                  <p>{data.description}</p>
+                  <a href={data.link} target="_blank" rel="noopener noreferrer">View Project</a>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Container>
+    </HelmetProvider>
+  );
+};

src/pages/portfolio/style.css

@@ -0,0 +1,82 @@
+.project_items_ho {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2rem;
+}
+
+.project_item {
+    width: calc(33% - 2rem);
+    text-align: center;
+    margin: 0.5rem;
+    position: relative;
+    background: var(--secondary-color);
+    padding: 6px;
+    border: 1px solid var(--secondary-color);
+    transition: 0.3s ease;
+    font-size: 0;
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 768px) {
+    .project_item {
+        width: calc(50% - 2rem);
+    }
+}
+
+@media (max-width: 576px) {
+    .project_item {
+        width: calc(100% - 2rem);
+    }
+}
+
+.project_item img {
+    max-width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+}
+
+.project_item .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: var(--overlay-color);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.project_item:hover .content {
+    opacity: 1;
+}
+
+.project_item .content p {
+    color: var(--text-color);
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.project_item .content a {
+    background: var(--bg-color);
+    border: solid 1px var(--text-color);
+    padding: 4px 8px;
+    text-align: center;
+    font-size: 1rem;
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+.project_item .content a:hover {
+    text-decoration: none;
+}