Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

timeline response #83

Merged
merged 5 commits into from
Mar 18, 2024
Merged

timeline response #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
730a4a4
added alt text for smaller screens
kavinphab Mar 4, 2024
a4cf972
finished responsive timeline
kavinphab Mar 11, 2024
7d23a90
alignment bug fixes
kavinphab Mar 11, 2024
27f8cbf
Merge branch 'dev' of https://github.com/acm-ucr/hsp-website into kav…
rfairooz Mar 18, 2024
17c4fc7
small fixes
rfairooz Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/projects/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Image1 from "@/public/assets/projects/poseidon/scotty.svg";
import Image2 from "@/public/assets/projects/poseidon/far.svg";
import Image3 from "@/public/assets/projects/poseidon/rocket.svg";
import PageTitle from "@/components/PageTitle";
import Timeline from "@/components/projects/poseidon/Timeline";

const page = () => {
const first = texts[0];
Expand All @@ -31,6 +32,7 @@ const page = () => {
<Image src={Image3} alt="rocket" />
</div>
</div>
<Timeline />
</div>
);
};
Expand Down
12 changes: 6 additions & 6 deletions src/components/projects/poseidon/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@ import texts from "@/data/Poseidon/Timeline";
const Timeline = () => {
return (
<div className="flex flex-col items-center my-10">
<div className="flex text-left w-9/12 text-3xl font-extrabold font-montserrat pb-4">
<div className="flex lg:justify-start justify-center lg:w-9/12 text-3xl font-extrabold font-montserrat pb-4">
Timeline
</div>
{texts.map((event, index) => (
<div key={index} className="flex w-9/12 items-start ">
<div key={index} className="flex w-11/12 lg:w-9/12 items-start ">
<div className="flex items-center justify-center">
<div>
<div className="flex flex-col items-center">
<div className=" bg-blue-500 rounded-full w-10 h-10"></div>

{index !== texts.length - 1 && (
<div className="w-1 bg-black h-20"></div>
<div className="bg-black relative h-20 w-1"></div>
)}
</div>
</div>
</div>

<div className="grid grid-cols-2 font-sans ">
<div className="text-2xl flex justify-center items-start ">
<div className="grid grid-cols-1 lg:grid-cols-2 font-sans ">
<div className="text-lg lg:text-2xl flex justify-center items-start ">
{event.data}
</div>
<div className="text-xl text-left flex justify-center items-center">
<div className="text-sm lg:text-xl text-left flex justify-center items-center">
{event.para}
</div>
</div>
Expand Down
Loading