Skip to content

Commit

Permalink
Fixed images
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArushYadlapati
ArushYadlapati committed Aug 21, 2024
1 parent a5c969d commit 0337600
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 81 deletions.
86 changes: 43 additions & 43 deletions app/components/homepage/projects/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@
import {projectsData} from '@/utils/data/projects-data';
import { projectsData } from '@/utils/data/projects-data';
import ProjectCard from './project-card';
import Image from "next/image";

const Projects = () => {
return (
<div id='projects' className="relative z-50 my-12 lg:my-24">
<div className="sticky top-10">
<div className="w-[600px] h-[10px] bg-violet-100 rounded-full absolute -top-3 left-0 translate-x-1/2 filter blur-3xl opacity-30"></div>

return (<div id='projects' className="relative z-50 my-12 lg:my-24">
<div className="sticky top-10">
<div
className="w-[600px] h-[10px] bg-violet-100 rounded-full absolute -top-3 left-0 translate-x-1/2 filter blur-3xl opacity-30"></div>

<div className="flex justify-center my-5 lg:py-8">
<div className="flex items-center">
<span className="w-24 h-[2px] bg-[#1a1443]"></span>
<span className="bg-[#1a1443] w-fit text-white p-2 px-5 text-xl rounded-md">
Projects
</span>
<span className="w-24 h-[2px] bg-[#1a1443]"></span>
<div className="flex justify-center my-5 lg:py-8 pt-10"> {/* Reduced pt-10 to pt-5 */}
<div className="flex items-center">
<span className="w-24 h-[2px] bg-[#1a1443]"></span>
<span className="bg-[#1a1443] w-fit text-white p-2 px-5 text-xl rounded-md">
Projects
</span>
<span className="w-24 h-[2px] bg-[#1a1443]"></span>
</div>
</div>
</div>

</div>
<Image
src="./section.svg"
alt="Hero"
width={1080 * 2}
height={200 * 2}
className="absolute top-0 left-1/2 transform -translate-x-1/2 opacity-80 mx-auto"
/>
<div className="pt-24">
<Image
src="./section.svg"
alt="Hero"
width={1080 * 2}
height={200 * 2}
className="absolute top-0 left-1/2 transform -translate-x-1/2 opacity-80 mx-auto"
/>

<div className="flex flex-col gap-6">
{projectsData.slice(0, 4).map((project, index) => (<div
id={`sticky-card-${index + 1}`}
key={index}
className="sticky-card w-full mx-auto max-w-2xl sticky"
>
<div
className="box-border flex items-center justify-center rounded shadow-[0_0_30px_0_rgba(0,0,0,0.3)] transition-all duration-[0.5s] flex-mobile"> {/* Add flex-mobile class */}
<ProjectCard project={project}/>
<Image
src="./blur-23.svg"
alt="Hero"
width={1080}
height={200}
className="absolute bottom-0 opacity-80"
/>
</div>
</div>))}
<div className="pt-12"> {/* Reduced pt-24 to pt-12 */}
<div className="flex flex-col gap-6">
{projectsData.slice(0, 4).map((project, index) => (
<div
id={`sticky-card-${index + 1}`}
key={index}
className="sticky-card w-full mx-auto max-w-2xl sticky"
>
<div className="box-border flex items-center justify-center rounded shadow-[0_0_30px_0_rgba(0,0,0,0.3)] transition-all duration-[0.5s] flex-mobile">
<ProjectCard project={project} />
<Image
src="./blur-23.svg"
alt="Hero"
width={1080}
height={200}
className="absolute bottom-0 opacity-80"
/>
</div>
</div>
))}
</div>
</div>
</div>
</div>);
);
};


export default Projects;
export default Projects;
71 changes: 33 additions & 38 deletions app/components/homepage/projects/project-card.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import * as React from 'react';
import Image from "next/image";

function ProjectCard({project}) {
function ProjectCard({ project }) {
return (
<div
className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37] w-[1000px]">
<div className="order-1 lg:order-2 from-[#0d1224] border-[#1b2c68a0] relative rounded-lg border bg-gradient-to-r to-[#0a0d37] w-[1000px]">
<div className="flex-1">
<div className="flex flex-row">
<div className="h-[1px] w-full bg-gradient-to-r from-transparent via-pink-500 to-violet-600"></div>
Expand All @@ -20,7 +19,8 @@ function ProjectCard({project}) {
{project.name}
</p>
</div>
<div className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-8">
<div
className="overflow-hidden border-t-[2px] border-indigo-900 px-4 lg:px-8 py-4 lg:py-6"> {/* Adjusted padding here */}
<code className="font-mono text-xs md:text-sm lg:text-base">
<div className="blink">
<span className="mr-2 text-pink-500">const</span>
Expand All @@ -40,8 +40,8 @@ function ProjectCard({project}) {
<span className="text-gray-400">&#39;</span>
<span
className="text-[#1C8AB5] underline group-hover:text-[#19F2B3] transition-colors duration-300">
{project.link}
</span>
{project.link}
</span>
<span className="text-gray-400">&#39;</span>
<a href={project.link} target="_blank" rel="noopener noreferrer"
className="absolute inset-0 z-10 cursor-pointer"
Expand All @@ -62,17 +62,14 @@ function ProjectCard({project}) {
<span className=" text-white">tools:</span>
<span className="text-gray-400">{` ['`}</span>

{
project.tools.map((tag, i) => (
<React.Fragment key={i}>
<span className="text-amber-300">{tag}</span>
{
project.tools.length - 1 !== i &&
<span className="text-gray-400">{`', '`}</span>
}
</React.Fragment>
))
}
{project.tools.map((tag, i) => (
<React.Fragment key={i}>
<span className="text-amber-300">{tag}</span>
{project.tools.length - 1 !== i && (
<span className="text-gray-400">{`', '`}</span>
)}
</React.Fragment>
))}
<span className="text-gray-400">{"'],"}</span>
</div>
<div>
Expand All @@ -85,31 +82,29 @@ function ProjectCard({project}) {
<span className="text-cyan-400">{' ' + project.description}</span>
<span className="text-gray-400"></span>
</div>
<div>
<span className="text-gray-400">{`};`}</span>
<div><span className="text-gray-400">{`};`}</span>
</div>
<div
className="flex justify-center items-center w-full h-full p-4 lg:p-8"> {/* Adjusted padding here */}
<div className="w-full max-w-md lg:max-w-none lg:w-[135%]">
<Image
src={project.image}
alt={project.name}
width={1080}
height={200}
className="w-full h-auto object-cover rounded-lg transform lg:scale-135"
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: '10px',
}}
/>
</div>
</div>
</code>
</div>
</div>

{/*<div className="pl-4 lg:pl-10 pr-10 pb-10">*/}
<div className="flex justify-center items-center w-full h-full p-4 lg:p-12">
<div className="w-full max-w-md lg:max-w-none lg:w-[135%]">
<Image
src={project.image}
alt={project.name}
width={1080}
height={200}
className="w-full h-auto object-cover rounded-lg transform lg:scale-135"
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'cover',
borderRadius: '10px',
}}
/>
</div>
</div>
</div>
);
}
Expand Down

0 comments on commit 0337600

Please sign in to comment.