mirror of
https://github.com/harivansh-afk/React-Portfolio.git
synced 2026-04-17 18:02:35 +00:00
initial commit
This commit is contained in:
commit
fb5b992b17
35 changed files with 11573 additions and 0 deletions
107
src/pages/about/index.js
Normal file
107
src/pages/about/index.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import React from "react";
|
||||
import "./style.css";
|
||||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
import { Container, Row, Col } from "react-bootstrap";
|
||||
import {
|
||||
dataabout,
|
||||
meta,
|
||||
worktimeline,
|
||||
skills,
|
||||
} from "../../content_option";
|
||||
|
||||
export const About = () => {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<Container className="About-header">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title> About | {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">About me</h1>
|
||||
<hr className="t_border my-4 ml-0 text-left" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="sec_sp">
|
||||
<Col lg="5">
|
||||
<h3 className="color_sec py-4">{dataabout.title}</h3>
|
||||
</Col>
|
||||
<Col lg="7" className="d-flex align-items-center">
|
||||
<div>
|
||||
<p>{dataabout.aboutme}</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className=" sec_sp">
|
||||
<Col lg="5">
|
||||
<h3 className="color_sec py-4">Work Timline</h3>
|
||||
</Col>
|
||||
<Col lg="7">
|
||||
<table className="table caption-top">
|
||||
<tbody>
|
||||
{worktimeline.map((data, i) => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<th scope="row">{data.jobtitle}</th>
|
||||
<td>{data.where}</td>
|
||||
<td>{data.date}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="sec_sp">
|
||||
<Col lg="5">
|
||||
<h3 className="color_sec py-4">Skills</h3>
|
||||
</Col>
|
||||
<Col lg="7">
|
||||
{skills.map((data, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
<h3 className="progress-title">{data.name}</h3>
|
||||
<div className="progress">
|
||||
<div
|
||||
className="progress-bar"
|
||||
style={{
|
||||
width: `${data.value}%`,
|
||||
}}
|
||||
>
|
||||
<div className="progress-value">{data.value}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="sec_sp">
|
||||
<Col lg="5">
|
||||
<h3 className="color_sec py-4">Education</h3>
|
||||
</Col>
|
||||
<Col lg="7">
|
||||
<div>
|
||||
<p>
|
||||
<strong>University of Virginia, Charlottesville, VA</strong>
|
||||
<br />
|
||||
Bachelor of Arts, Computer Science
|
||||
<br />
|
||||
Expected May 2026
|
||||
<br />
|
||||
Cumulative GPA: 3.55/4.0
|
||||
<br />
|
||||
Relevant Coursework:
|
||||
<br />
|
||||
Data structures and algo, Computer systems and organization,
|
||||
Software dev essentials
|
||||
</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
100
src/pages/about/style.css
Normal file
100
src/pages/about/style.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
.sec_sp {
|
||||
margin-bottom: calc(3rem + 5.128vw)
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.t_border {
|
||||
border-color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 15px 0 20px;
|
||||
font-family: 'Raleway';
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 5px;
|
||||
background: var(--secondary);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 30px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.progress .progress-bar {
|
||||
position: relative;
|
||||
background: var(--text-color);
|
||||
animation: animate-positive 2s;
|
||||
overflow: visible;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.progress .progress-value {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 8px;
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate-positive {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-positive {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.service__title {
|
||||
padding: 8px 0;
|
||||
border-bottom: solid 2px var(--secondary-color);
|
||||
}
|
||||
|
||||
.service-section .service-category-title {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
/*! CSS Used keyframes */
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
167
src/pages/contact/index.js
Normal file
167
src/pages/contact/index.js
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import React, { useState } from "react";
|
||||
import * as emailjs from "emailjs-com";
|
||||
import "./style.css";
|
||||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
import { meta } from "../../content_option";
|
||||
import { Container, Row, Col, Alert } from "react-bootstrap";
|
||||
import { contactConfig } from "../../content_option";
|
||||
|
||||
export const ContactUs = () => {
|
||||
const [formData, setFormdata] = useState({
|
||||
email: "",
|
||||
name: "",
|
||||
message: "",
|
||||
loading: false,
|
||||
show: false,
|
||||
alertmessage: "",
|
||||
variant: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setFormdata({ loading: true });
|
||||
|
||||
const templateParams = {
|
||||
from_name: formData.email,
|
||||
user_name: formData.name,
|
||||
to_name: contactConfig.YOUR_EMAIL,
|
||||
message: formData.message,
|
||||
};
|
||||
|
||||
emailjs
|
||||
.send(
|
||||
contactConfig.YOUR_SERVICE_ID,
|
||||
contactConfig.YOUR_TEMPLATE_ID,
|
||||
templateParams,
|
||||
contactConfig.YOUR_USER_ID
|
||||
)
|
||||
.then(
|
||||
(result) => {
|
||||
console.log(result.text);
|
||||
setFormdata({
|
||||
loading: false,
|
||||
alertmessage: "SUCCESS! ,Thankyou for your messege",
|
||||
variant: "success",
|
||||
show: true,
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
console.log(error.text);
|
||||
setFormdata({
|
||||
alertmessage: `Faild to send!,${error.text}`,
|
||||
variant: "danger",
|
||||
show: true,
|
||||
});
|
||||
document.getElementsByClassName("co_alert")[0].scrollIntoView();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormdata({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<Container>
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title>{meta.title} | Contact</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">Contact Me</h1>
|
||||
<hr className="t_border my-4 ml-0 text-left" />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="sec_sp">
|
||||
<Col lg="12">
|
||||
<Alert
|
||||
//show={formData.show}
|
||||
variant={formData.variant}
|
||||
className={`rounded-0 co_alert ${
|
||||
formData.show ? "d-block" : "d-none"
|
||||
}`}
|
||||
onClose={() => setFormdata({ show: false })}
|
||||
dismissible
|
||||
>
|
||||
<p className="my-0">{formData.alertmessage}</p>
|
||||
</Alert>
|
||||
</Col>
|
||||
<Col lg="5" className="mb-5">
|
||||
<h3 className="color_sec py-4">Get in touch</h3>
|
||||
<address>
|
||||
<strong>Email:</strong>{" "}
|
||||
<a href={`mailto:${contactConfig.YOUR_EMAIL}`}>
|
||||
{contactConfig.YOUR_EMAIL}
|
||||
</a>
|
||||
<br />
|
||||
<br />
|
||||
{contactConfig.hasOwnProperty("YOUR_FONE") ? (
|
||||
<p>
|
||||
<strong>Phone:</strong> {contactConfig.YOUR_FONE}
|
||||
</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</address>
|
||||
<p>{contactConfig.description}</p>
|
||||
</Col>
|
||||
<Col lg="7" className="d-flex align-items-center">
|
||||
<form onSubmit={handleSubmit} className="contact__form w-100">
|
||||
<Row>
|
||||
<Col lg="6" className="form-group">
|
||||
<input
|
||||
className="form-control"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
value={formData.name || ""}
|
||||
type="text"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Col>
|
||||
<Col lg="6" className="form-group">
|
||||
<input
|
||||
className="form-control rounded-0"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
value={formData.email || ""}
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<textarea
|
||||
className="form-control rounded-0"
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
rows="5"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
></textarea>
|
||||
<br />
|
||||
<Row>
|
||||
<Col lg="12" className="form-group">
|
||||
<button className="btn ac_btn" type="submit">
|
||||
{formData.loading ? "Sending..." : "Send"}
|
||||
</button>
|
||||
</Col>
|
||||
</Row>
|
||||
</form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
<div className={formData.loading ? "loading-bar" : "d-none"}></div>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
45
src/pages/contact/style.css
Normal file
45
src/pages/contact/style.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.contact__form .form-control {
|
||||
padding: 1.375rem .75rem;
|
||||
line-height: 1.5;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
.contact__form input.form-control {
|
||||
margin-bottom: 2em;
|
||||
height: calc(2.5em + .75rem + 2px);
|
||||
}
|
||||
|
||||
button.btn.ac_btn:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 10px;
|
||||
z-index: 999999999;
|
||||
background: var(--text-color);
|
||||
transform: translateX(100%);
|
||||
animation: shift-rightwards 1s ease-in-out infinite;
|
||||
animation-delay: .3s;
|
||||
}
|
||||
|
||||
@keyframes shift-rightwards {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
66
src/pages/home/index.js
Normal file
66
src/pages/home/index.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React from "react";
|
||||
import "./style.css";
|
||||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
import Typewriter from "typewriter-effect";
|
||||
import { introdata, meta } from "../../content_option";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<section id="home" className="home">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title> {meta.title}</title>
|
||||
<meta name="description" content={meta.description} />
|
||||
</Helmet>
|
||||
<div className="intro_sec d-block d-lg-flex align-items-center ">
|
||||
<div
|
||||
className="h_bg-image order-1 order-lg-2 h-100 "
|
||||
style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
|
||||
></div>
|
||||
<div className="text order-2 order-lg-1 h-100 d-lg-flex justify-content-center">
|
||||
<div className="align-self-center ">
|
||||
<div className="intro mx-auto">
|
||||
<h2 className="mb-1x">{introdata.title}</h2>
|
||||
<h1 className="fluidz-48 mb-1x">
|
||||
<Typewriter
|
||||
options={{
|
||||
strings: [
|
||||
introdata.animated.first,
|
||||
introdata.animated.second,
|
||||
introdata.animated.third,
|
||||
],
|
||||
autoStart: true,
|
||||
loop: true,
|
||||
deleteSpeed: 10,
|
||||
}}
|
||||
/>
|
||||
</h1>
|
||||
<p className="mb-1x">{introdata.description}</p>
|
||||
<div className="intro_btn-action pb-5">
|
||||
<Link to="/portfolio" className="text_2">
|
||||
<div id="button_p" className="ac_btn btn ">
|
||||
My Portfolio
|
||||
<div className="ring one"></div>
|
||||
<div className="ring two"></div>
|
||||
<div className="ring three"></div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to="/contact">
|
||||
<div id="button_h" className="ac_btn btn">
|
||||
Contact Me
|
||||
<div className="ring one"></div>
|
||||
<div className="ring two"></div>
|
||||
<div className="ring three"></div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</HelmetProvider>
|
||||
);
|
||||
};
|
||||
208
src/pages/home/style.css
Normal file
208
src/pages/home/style.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
section {
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
-webkit-transition: all 0.5s ease-in;
|
||||
-o-transition: all 0.5s ease-in;
|
||||
transition: all 0.5s ease-in;
|
||||
}
|
||||
|
||||
.who_am_I {
|
||||
font-family: Cinzel;
|
||||
}
|
||||
|
||||
.has-first-color {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-portfolio {
|
||||
background: var(--primary-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-portfolio a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-about a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.intro_sec {
|
||||
height: calc(100vh - 60px);
|
||||
min-height: 700px;
|
||||
height: 100vh;
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .text,
|
||||
.intro_sec .h_bg-image {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .text,
|
||||
.intro_sec .h_bg-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .intro {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .intro {
|
||||
max-width: 700px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .intro .feature .wrap-icon {
|
||||
background: 0 0 !important;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.intro_sec .intro .feature .wrap-icon svg {
|
||||
color: #5cccc9;
|
||||
}
|
||||
|
||||
.intro_sec .text h1 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 50px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro_sec .text h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image {
|
||||
background-size: cover;
|
||||
background-position: center 30%;
|
||||
min-height: 700px;
|
||||
position: relative;
|
||||
max-width: 600px;
|
||||
max-height: 600px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ac_btn {
|
||||
padding: 4px 19px;
|
||||
color: var(--secondary-color);
|
||||
position: relative;
|
||||
border: var(--secondary-color) 2px solid;
|
||||
overflow: hidden;
|
||||
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.ac_btn a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ac_btn:hover {
|
||||
box-shadow: 8px 8px 0px var(--text-color), -8px -8px 0px var(--text-color);
|
||||
}
|
||||
|
||||
.ac_btn:hover .one {
|
||||
opacity: 1;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .two {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .three {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn:hover .four {
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn .ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate3d(0px, 90px, 0px);
|
||||
}
|
||||
|
||||
.ac_btn .one {
|
||||
background-color: #000;
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
z-index: -4;
|
||||
}
|
||||
|
||||
.ac_btn .two {
|
||||
background-color: var(--primary-color);
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
.ac_btn .three {
|
||||
background-color: var(--secondary-color);
|
||||
z-index: -2;
|
||||
transition: all 0.7s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
#button_p {
|
||||
background: var(--secondary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
#button_h:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image .resume-icon {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image .resume-icon:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.intro_sec .h_bg-image .resume-icon {
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.intro_sec .h_bg-image {
|
||||
filter: saturate(0.5);
|
||||
}
|
||||
38
src/pages/portfolio/index.js
Normal file
38
src/pages/portfolio/index.js
Normal file
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
82
src/pages/portfolio/style.css
Normal file
82
src/pages/portfolio/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue