mirror of
https://github.com/harivansh-afk/React-Portfolio.git
synced 2026-04-15 23:01:37 +00:00
chore: more chanages
This commit is contained in:
parent
0fd21602f3
commit
4114e514a2
10 changed files with 249 additions and 783 deletions
38
README.md
38
README.md
|
|
@ -1,38 +0,0 @@
|
|||
### Description
|
||||
|
||||
A simple portfolio template for developer/designers built with React.
|
||||
|
||||
### [live preview](https://ubaimutl.github.io/react-portfolio/)
|
||||
|
||||
[](https://ubaimutl.github.io/react-portfolio/)
|
||||
|
||||
### Features
|
||||
|
||||
- Fully Responsive
|
||||
- Multi-Page Layout
|
||||
- Contact Form With EmailJs
|
||||
- React-Bootstrap
|
||||
- Edit Content From One Place
|
||||
|
||||
### Setup
|
||||
|
||||
Get the code
|
||||
|
||||
<pre>git clone https://github.com/ubaimutl/react-portfolio.git</pre>
|
||||
|
||||
Install required dependencies
|
||||
|
||||
<pre>yarn install</pre>
|
||||
|
||||
|
||||
Start the server
|
||||
|
||||
<pre>yarn start</pre>
|
||||
|
||||
### More
|
||||
|
||||
Modify pages content in `src/content_option.js`.
|
||||
|
||||
### Thanks
|
||||
|
||||
If you like this portfolio template don't forget give it a ⭐
|
||||
8
netlify.toml
Normal file
8
netlify.toml
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
[build]
|
||||
command = "yarn build"
|
||||
publish = "build"
|
||||
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
status = 200
|
||||
|
|
@ -20,6 +20,11 @@ const dataabout = {
|
|||
aboutme: "I am a Computer Science student at the University of Virginia, with a passion for software development and AI. I enjoy building scalable applications and exploring the latest advancements in technology. I am always eager to learn and contribute to innovative projects.",
|
||||
};
|
||||
const worktimeline = [{
|
||||
jobtitle: "Co Founder",
|
||||
where: "SOLVEX",
|
||||
date: "December 2024 - Present",
|
||||
},
|
||||
{
|
||||
jobtitle: "Front End Development Intern",
|
||||
where: "UNIKOVE TECHNOLOGIES",
|
||||
date: "June 2024 - August 2024",
|
||||
|
|
@ -146,9 +151,9 @@ const contactConfig = {
|
|||
YOUR_EMAIL: "zng2gc@virginia.edu",
|
||||
YOUR_FONE: "+1 434-310-1227",
|
||||
description: "I am currently based in Charlottesville, VA. Feel free to reach out to me for any opportunities or collaborations.",
|
||||
YOUR_SERVICE_ID: "service_id",
|
||||
YOUR_TEMPLATE_ID: "template_id",
|
||||
YOUR_USER_ID: "user_id",
|
||||
YOUR_SERVICE_ID: "YOUR_EMAILJS_SERVICE_ID",
|
||||
YOUR_TEMPLATE_ID: "YOUR_EMAILJS_TEMPLATE_ID",
|
||||
YOUR_USER_ID: "YOUR_EMAILJS_PUBLIC_KEY",
|
||||
};
|
||||
|
||||
const socialprofils = {
|
||||
|
|
|
|||
|
|
@ -68,11 +68,6 @@ export const About = () => {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,99 @@
|
|||
.sec_sp {
|
||||
margin-bottom: calc(3rem + 5.128vw)
|
||||
margin-bottom: calc(3rem + 5.128vw);
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
color: var(--text-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.t_border {
|
||||
border-color: var(--text-color) !important;
|
||||
border-color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 15px 0 20px;
|
||||
font-family: 'Raleway';
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
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%;
|
||||
}
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-positive {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 45px;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.service__title {
|
||||
padding: 8px 0;
|
||||
border-bottom: solid 2px var(--secondary-color);
|
||||
padding: 8px 0;
|
||||
border-bottom: solid 2px var(--secondary-color);
|
||||
}
|
||||
|
||||
.service-section .service-category-title {
|
||||
padding-bottom: 4px;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import * as emailjs from "emailjs-com";
|
||||
import "./style.css";
|
||||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
|
|
@ -17,51 +17,56 @@ export const ContactUs = () => {
|
|||
variant: "",
|
||||
});
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
useEffect(() => {
|
||||
// Initialize EmailJS with your user ID
|
||||
emailjs.init(contactConfig.YOUR_USER_ID);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setFormdata({ loading: true });
|
||||
setFormdata(prev => ({ ...prev, loading: true }));
|
||||
|
||||
const templateParams = {
|
||||
from_name: formData.email,
|
||||
user_name: formData.name,
|
||||
to_name: contactConfig.YOUR_EMAIL,
|
||||
message: formData.message,
|
||||
};
|
||||
try {
|
||||
const templateParams = {
|
||||
from_name: formData.email,
|
||||
user_name: formData.name,
|
||||
to_name: contactConfig.YOUR_EMAIL,
|
||||
message: formData.message,
|
||||
};
|
||||
|
||||
emailjs
|
||||
.send(
|
||||
const result = await 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();
|
||||
}
|
||||
templateParams
|
||||
);
|
||||
|
||||
setFormdata(prev => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
alertmessage: "Message sent successfully! Thank you for reaching out.",
|
||||
variant: "success",
|
||||
show: true,
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
setFormdata(prev => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
alertmessage: "Failed to send message. Please try again or contact directly via email.",
|
||||
variant: "danger",
|
||||
show: true,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormdata({
|
||||
...formData,
|
||||
setFormdata(prev => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -81,12 +86,11 @@ export const ContactUs = () => {
|
|||
<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 })}
|
||||
onClose={() => setFormdata(prev => ({ ...prev, show: false }))}
|
||||
dismissible
|
||||
>
|
||||
<p className="my-0">{formData.alertmessage}</p>
|
||||
|
|
@ -152,7 +156,11 @@ export const ContactUs = () => {
|
|||
<br />
|
||||
<Row>
|
||||
<Col lg="12" className="form-group">
|
||||
<button className="btn ac_btn" type="submit">
|
||||
<button
|
||||
className="btn ac_btn"
|
||||
type="submit"
|
||||
disabled={formData.loading}
|
||||
>
|
||||
{formData.loading ? "Sending..." : "Send"}
|
||||
</button>
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,10 @@ export const Home = () => {
|
|||
<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">
|
||||
<div
|
||||
className="mobile-image d-lg-none"
|
||||
style={{ backgroundImage: `url(/assets/images/Image%20with%20Background%20Removed.png)` }}
|
||||
></div>
|
||||
<h2 className="mb-1x">{introdata.title}</h2>
|
||||
<h1 className="fluidz-48 mb-1x">
|
||||
<Typewriter
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ section {
|
|||
height: auto !important;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro_sec .text,
|
||||
|
|
@ -65,17 +66,49 @@ section {
|
|||
}
|
||||
|
||||
.intro_sec > .h_bg-image {
|
||||
min-height: 400px;
|
||||
margin-top: 10px !important;
|
||||
margin-bottom: 30px !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.intro_sec .mobile-image {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center 30%;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--image-container-bg);
|
||||
border: 3px solid var(--secondary-color);
|
||||
filter: saturate(0.5);
|
||||
}
|
||||
|
||||
.intro_btn-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.ac_btn {
|
||||
padding: 12px 24px;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro_sec .intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.intro_sec .text p {
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small devices (phones, 600px and down) */
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import "./style.css";
|
|||
import { Helmet, HelmetProvider } from "react-helmet-async";
|
||||
import { Container, Row, Col } from "react-bootstrap";
|
||||
import { dataportfolio, meta } from "../../content_option";
|
||||
import { FaExternalLinkAlt } from "react-icons/fa";
|
||||
|
||||
export const Portfolio = () => {
|
||||
return (
|
||||
|
|
@ -21,12 +22,18 @@ export const Portfolio = () => {
|
|||
</Row>
|
||||
<div className="mb-5 project_items_ho">
|
||||
{dataportfolio.map((data, i) => {
|
||||
const title = data.description.split(",")[0];
|
||||
const description = data.description.split(",").slice(1).join(",").trim();
|
||||
|
||||
return (
|
||||
<div key={i} className="project_item">
|
||||
<img src={data.img} alt="" />
|
||||
<img src={data.img} alt={title} />
|
||||
<div className="content">
|
||||
<p>{data.description}</p>
|
||||
<a href={data.link} target="_blank" rel="noopener noreferrer">View Project</a>
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
<a href={data.link} target="_blank" rel="noopener noreferrer">
|
||||
View Project <FaExternalLinkAlt size={14} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,683 +1,128 @@
|
|||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
|
||||
gap: 2.5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 0;
|
||||
border: 1px solid var(--card-border, var(--muted));
|
||||
border-radius: 8px;
|
||||
outline: 2px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1;
|
||||
aspect-ratio: 16/10;
|
||||
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project_item {
|
||||
width: calc(50% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.project_item {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.project_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 0;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project_item {
|
||||
width: calc(50% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.project_item {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.project_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
.project_item:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project_item .content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inset: 0;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--overlay-bg, rgba(0, 0, 0, 0.7));
|
||||
backdrop-filter: blur(4px);
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.9) 0%,
|
||||
rgba(0, 0, 0, 0.7) 40%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
>>>>>>>REPLACE > .project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 0;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
>>>>>>>REPLACE > .project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project_item {
|
||||
width: calc(50% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.project_item {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.project_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@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: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.project_item:hover .content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.project_item .content p {
|
||||
color: var(--overlay-text, white);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
background: var(--overlay-text-bg, rgba(0, 0, 0, 0.5));
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
>>>>>>>REPLACE > .project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 0;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
>>>>>>>REPLACE > .project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project_item {
|
||||
width: calc(50% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.project_item {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.project_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@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-bg, rgba(var(--background-rgb), 0.9));
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.project_item:hover .content {
|
||||
opacity: 1;
|
||||
.project_item .content h3 {
|
||||
color: #fff;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.8rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project_item .content p {
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.project_item .content a {
|
||||
background: var(--overlay-button-bg, rgba(255, 255, 255, 0.9));
|
||||
border: 1px solid var(--overlay-button-border, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--overlay-button-text, black);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: var(--primary-color);
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.project_item .content a:hover {
|
||||
background: var(--overlay-button-hover-bg, rgba(255, 255, 255, 1));
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 0;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
>>>>>>>REPLACE > .project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
background: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media (max-width: 768px) {
|
||||
.project_items_ho {
|
||||
gap: 1.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(50% - 2rem);
|
||||
aspect-ratio: 3/2;
|
||||
}
|
||||
|
||||
.project_item .content {
|
||||
opacity: 1;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.95) 0%,
|
||||
rgba(0, 0, 0, 0.8) 40%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.project_item .content h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.project_item .content p {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.project_item .content a {
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.project_item {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.project_item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.project_items_ho {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.project_item {
|
||||
width: calc(33% - 2rem);
|
||||
text-align: center;
|
||||
margin: 0.5rem;
|
||||
position: relative;
|
||||
background: var(--card-bg, var(--background));
|
||||
padding: 1rem;
|
||||
border: 0.5px solid var(--card-border, var(--foreground));
|
||||
border-radius: 8px;
|
||||
outline: 3px solid var(--card-outline-color, var(--primary));
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 0;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project_item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--card-outline-hover, var(--primary));
|
||||
}
|
||||
|
||||
@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: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.project_item:hover .content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.project_item .content p {
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.project_item .content a {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.project_item .content a:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue