chore: more chanages

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/)
-
-[![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
-
-<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 ⭐

netlify.toml

@@ -0,0 +1,8 @@
+[build]
+  command = "yarn build"
+  publish = "build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

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_SERVICE_ID: "YOUR_EMAILJS_SERVICE_ID",
-    YOUR_TEMPLATE_ID: "template_id",
+    YOUR_TEMPLATE_ID: "YOUR_EMAILJS_TEMPLATE_ID",
-    YOUR_USER_ID: "user_id",
+    YOUR_USER_ID: "YOUR_EMAILJS_PUBLIC_KEY",
 };
 
 const socialprofils = {

src/pages/about/index.js

@@ -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>

src/pages/about/style.css

@@ -1,5 +1,5 @@
 .sec_sp {
-    margin-bottom: calc(3rem + 5.128vw)
+  margin-bottom: calc(3rem + 5.128vw);
 }
 
 .table td,
@@ -15,7 +15,7 @@
   font-size: 16px;
   font-weight: 700;
   margin: 15px 0 20px;
-    font-family: 'Raleway';
+  font-family: "Raleway";
 }
 
 .progress {
@@ -70,7 +70,6 @@
   padding-bottom: 4px;
 }
 
-
 /*! CSS Used keyframes */
 
 @-webkit-keyframes fadeInUp {

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,10 +17,16 @@ export const ContactUs = () => {
     variant: "",
   });
 
-  const handleSubmit = (e) => {
+  useEffect(() => {
-    e.preventDefault();
+    // Initialize EmailJS with your user ID
-    setFormdata({ loading: true });
+    emailjs.init(contactConfig.YOUR_USER_ID);
+  }, []);
 
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setFormdata(prev => ({ ...prev, loading: true }));
+
+    try {
       const templateParams = {
         from_name: formData.email,
         user_name: formData.name,
@@ -28,40 +34,39 @@ export const ContactUs = () => {
         message: formData.message,
       };
 
-    emailjs
+      const result = await emailjs.send(
-      .send(
         contactConfig.YOUR_SERVICE_ID,
         contactConfig.YOUR_TEMPLATE_ID,
-        templateParams,
+        templateParams
-        contactConfig.YOUR_USER_ID
+      );
-      )
+
-      .then(
+      setFormdata(prev => ({
-        (result) => {
+        ...prev,
-          console.log(result.text);
-          setFormdata({
         loading: false,
-            alertmessage: "SUCCESS! ,Thankyou for your messege",
+        alertmessage: "Message sent successfully! Thank you for reaching out.",
         variant: "success",
         show: true,
-          });
+        name: "",
-        },
+        email: "",
-        (error) => {
+        message: "",
-          console.log(error.text);
+      }));
-          setFormdata({
+    } catch (error) {
-            alertmessage: `Faild to send!,${error.text}`,
+      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,
-          });
+      }));
-          document.getElementsByClassName("co_alert")[0].scrollIntoView();
     }
-      );
   };
 
   const handleChange = (e) => {
-    setFormdata({
+    setFormdata(prev => ({
-      ...formData,
+      ...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>

src/pages/home/index.js

@@ -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

src/pages/home/style.css

@@ -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;
+    display: none;
-    margin-top: 10px !important;
+  }
-    margin-bottom: 30px !important;
+
+  .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;
+    margin: 0;
-    width: 100%;
+    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) */

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 = () => {
         </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>
+                  <h3>{title}</h3>
-                  <a href={data.link} target="_blank" rel="noopener noreferrer">View Project</a>
+                  <p>{description}</p>
+                  <a href={data.link} target="_blank" rel="noopener noreferrer">
+                    View Project <FaExternalLinkAlt size={14} />
+                  </a>
                 </div>
               </div>
             );

src/pages/portfolio/style.css

@@ -1,683 +1,128 @@
 .project_items_ho {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
-  justify-content: flex-start;
+  gap: 2.5rem;
-  gap: 2rem;
   max-width: 1200px;
-  margin: 0 auto;
+  margin: 2rem auto;
-  padding: 0 2rem;
+  padding: 0 1.5rem;
-  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-radius: 16px;
-  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;
   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);
+  transform: translateY(-5px);
-  border-color: var(--card-outline-hover, var(--primary));
+  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.3);
-}
-
-@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;
+  transition: transform 0.5s ease;
-}
-.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 {
+.project_item:hover img {
-  width: calc(33% - 2rem);
+  transform: scale(1.1);
-  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 .content {
   position: absolute;
-  top: 0;
+  inset: 0;
-  left: 0;
+  padding: 2rem;
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-end;
-  align-items: center;
+  align-items: flex-start;
-  background: var(--overlay-bg, rgba(0, 0, 0, 0.7));
+  background: linear-gradient(
-  backdrop-filter: blur(4px);
+    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);
+  transition: all 0.3s ease-in-out;
-  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;
 }
 
 .project_item:hover .content {
   opacity: 1;
 }
 
-.project_item .content p {
+.project_item .content h3 {
-  color: var(--overlay-text, white);
+  color: #fff;
-  font-size: 0.875rem;
+  font-size: 1.3rem;
-  line-height: 1.25rem;
+  font-weight: 600;
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem;
-  text-align: center;
+  text-align: left;
-  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 p {
-  color: white;
+  color: rgba(255, 255, 255, 0.9);
-  font-size: 0.875rem;
+  font-size: 0.95rem;
-  line-height: 1.25rem;
+  line-height: 1.5;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
-  text-align: center;
+  text-align: left;
-  max-width: 90%;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 0.5rem;
-  border-radius: 4px;
 }
 
 .project_item .content a {
-  background: var(--overlay-button-bg, rgba(255, 255, 255, 0.9));
+  color: #fff;
-  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);
   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));
+  background: var(--secondary-color);
-  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 {
   transform: translateY(-2px);
-  border-color: var(--card-outline-hover, var(--primary));
 }
 
+/* Mobile Styles */
 @media (max-width: 768px) {
-  .project_item {
+  .project_items_ho {
-    width: calc(50% - 2rem);
+    gap: 1.5rem;
+    padding: 0 1rem;
   }
-}
 
-@media (max-width: 576px) {
   .project_item {
-    width: calc(100% - 2rem);
+    aspect-ratio: 3/2;
   }
-}
 
-.project_item img {
+  .project_item .content {
-  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;
-}
+    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 p {
+  .project_item .content h3 {
-  color: white;
+    font-size: 1.1rem;
-  font-size: 0.875rem;
+    margin-bottom: 0.6rem;
-  line-height: 1.25rem;
+  }
+
+  .project_item .content p {
+    font-size: 0.9rem;
     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 {
+  .project_item .content a {
-  background: rgba(255, 255, 255, 0.9);
+    padding: 0.6rem 1.2rem;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 0.9rem;
-  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);
 }