From 4114e514a2c1cc36f62bed872e256304c7ab7df3 Mon Sep 17 00:00:00 2001 From: Harivansh Rathi Date: Sat, 4 Jan 2025 04:32:59 +0530 Subject: [PATCH] chore: more chanages --- README.md | 38 -- netlify.toml | 8 + src/content_option.js | 11 +- src/pages/about/index.js | 5 - src/pages/about/style.css | 111 +++--- src/pages/contact/index.js | 86 ++-- src/pages/home/index.js | 4 + src/pages/home/style.css | 43 +- src/pages/portfolio/index.js | 13 +- src/pages/portfolio/style.css | 713 ++++------------------------------ 10 files changed, 249 insertions(+), 783 deletions(-) delete mode 100644 README.md create mode 100644 netlify.toml diff --git a/README.md b/README.md deleted file mode 100644 index b17c606..0000000 --- a/README.md +++ /dev/null @@ -1,38 +0,0 @@ -### Description - -A simple portfolio template for developer/designers built with React. - -### [live preview](https://ubaimutl.github.io/react-portfolio/) - -[![react portfoiio](src/assets/images/react%20portfolio%20gif.gif)](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 - -
git clone https://github.com/ubaimutl/react-portfolio.git
- -Install required dependencies - -
yarn install
- - -Start the server - -
yarn start
- -### More - -Modify pages content in `src/content_option.js`. - -### Thanks - -If you like this portfolio template don't forget give it a ⭐ diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..0add366 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,8 @@ +[build] + command = "yarn build" + publish = "build" + +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 diff --git a/src/content_option.js b/src/content_option.js index 64c5d13..738d796 100644 --- a/src/content_option.js +++ b/src/content_option.js @@ -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 = { diff --git a/src/pages/about/index.js b/src/pages/about/index.js index 7a3332f..e821845 100644 --- a/src/pages/about/index.js +++ b/src/pages/about/index.js @@ -68,11 +68,6 @@ export const About = () => { Expected May 2026
Cumulative GPA: 3.55/4.0 -
- Relevant Coursework: -
- Data structures and algo, Computer systems and organization, - Software dev essentials

diff --git a/src/pages/about/style.css b/src/pages/about/style.css index 2dffcc3..96f48a4 100644 --- a/src/pages/about/style.css +++ b/src/pages/about/style.css @@ -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); + } } diff --git a/src/pages/contact/index.js b/src/pages/contact/index.js index fa16a2c..1702f02 100644 --- a/src/pages/contact/index.js +++ b/src/pages/contact/index.js @@ -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 = () => { setFormdata({ show: false })} + onClose={() => setFormdata(prev => ({ ...prev, show: false }))} dismissible >

{formData.alertmessage}

@@ -152,7 +156,11 @@ export const ContactUs = () => {
- diff --git a/src/pages/home/index.js b/src/pages/home/index.js index 8008ab7..c03236a 100644 --- a/src/pages/home/index.js +++ b/src/pages/home/index.js @@ -52,6 +52,10 @@ export const Home = () => {
+

{introdata.title}

.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) */ diff --git a/src/pages/portfolio/index.js b/src/pages/portfolio/index.js index fb9b116..5102c72 100644 --- a/src/pages/portfolio/index.js +++ b/src/pages/portfolio/index.js @@ -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 = () => {
{dataportfolio.map((data, i) => { + const title = data.description.split(",")[0]; + const description = data.description.split(",").slice(1).join(",").trim(); + return (
- + {title}
-

{data.description}

- View Project +

{title}

+

{description}

+ + View Project +
); diff --git a/src/pages/portfolio/style.css b/src/pages/portfolio/style.css index 55023a8..34e29a0 100644 --- a/src/pages/portfolio/style.css +++ b/src/pages/portfolio/style.css @@ -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); -}