add hover image effect on timeline events which we have a website

TEDxNTUA · May 23, 2024 · 13d87dc · 13d87dc
1 parent 6c40d54
commit 13d87dc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/data/previousEvents.js b/data/previousEvents.js
@@ -2,7 +2,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "ephemeral",
  year: "2024",
- link: "https://www.linkedin.com",
+ link: "https://2024.tedxntua.com/",
  source: "ephemeral.png",
  logo: "ephemeral-logo.png",
  paragraph:
@@ -12,7 +12,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "mneme",
  year: "2023",
- link: "https://www.linkedin.com",
+ link: "",
  source: "mneme.jpeg",
  logo: "Mneme-logo.png",
  paragraph:
@@ -21,7 +21,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "play",
  year: "2022",
- link: "https://www.linkedin.com",
+ link: "",
  source: "play.jpeg",
  logo: "Play-logo.png",
  paragraph:
@@ -31,7 +31,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "ubuntu",
  year: "2021",
- link: "https://www.linkedin.com",
+ link: "",
  source: "ubuntu.jpeg",
  logo: "Ubuntu-logo.png",
  paragraph:
@@ -40,7 +40,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "dualism",
  year: "2020",
- link: "https://www.linkedin.com",
+ link: "",
  source: "dualism.jpeg",
  logo: "Dualism-logo.png",
  paragraph:
@@ -51,7 +51,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "enigma",
  year: "2019",
- link: "https://www.linkedin.com",
+ link: "",
  source: "enigma.jpeg",
  logo: "Enigma-logo.png",
  paragraph:
@@ -61,7 +61,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "chaos",
  year: "2018",
- link: "https://www.linkedin.com",
+ link: "",
  source: "chaos.jpeg",
  logo: "Chaos-logo.png",
  paragraph:
@@ -70,7 +70,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "heuristics",
  year: "2017",
- link: "https://www.linkedin.com",
+ link: "",
  source: "heuristics.jpeg",
  logo: "Heuristics-logo.png",
  paragraph:
@@ -79,7 +79,7 @@ export const PREVIOUSEVENTS = [
  {
  id: "chain reactions",
  year: "2015",
- link: "https://www.linkedin.com",
+ link: "",
  source: "chain-reactions.jpeg",
  logo: "Chain-reactions-logo.png",
  paragraph:

diff --git a/src/components/TimelineComponent/Photo.js b/src/components/TimelineComponent/Photo.js
@@ -10,6 +10,7 @@ export default function Photo({ TedEvent }) {
  const { scrollYProgress } = useScroll({ target: Imageref });
  const y = useTransform(scrollYProgress, [0, 1], [-300, 300]);
 
+ console.log(TedEvent.link);
  return (
  // <main className="h-[50vh] grid grid-cols-3 justify-center items-center snap-center bg-emerald-500">
  // <div className="grid grid-cols-1 justify-center items-center">
@@ -64,8 +65,7 @@ export default function Photo({ TedEvent }) {
  // style={{ y, zIndex: 1 }}
  />
  </div>
- <div className="xl:mr-[5vw] self-start lg:self-center lg:col-span-2 xl:col-span-1">
- {/* <Image */}
+ {/* <div className="xl:mr-[5vw] self-start lg:self-center lg:col-span-2 xl:col-span-1">
  <img
  width={300}
  height={300}
@@ -74,7 +74,36 @@ export default function Photo({ TedEvent }) {
  src={`./previousEvents/${TedEvent.source}`}
  alt="Previous ted event"
  />
+ </div> */}
+ <div className="xl:mr-[5vw] self-start lg:self-center lg:col-span-2 xl:col-span-1">
+ {TedEvent.link !== "" ? (
+ <a
+ href={TedEvent.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="hover:cursor-pointer bg-blue-500"
+ >
+ <img
+ width={300}
+ height={300}
+ ref={Imageref}
+ className="border-[2px] border-[#eb002733] hover:border-[#eb0027] rounded-md mx-auto w-[60%] xl:w-full object-fill"
+ src={`./previousEvents/${TedEvent.source}`}
+ alt="Previous ted event"
+ />
+ </a>
+ ) : (
+ <img
+ width={300}
+ height={300}
+ ref={Imageref}
+ className="border-[2px] border-[#eb002733] rounded-md mx-auto w-[60%] xl:w-full object-fill"
+ src={`./previousEvents/${TedEvent.source}`}
+ alt="Previous ted event"
+ />
+ )}
  </div>
+
  {/* <img
  src={`./eventLogos/${TedEvent.logo}`}
  className="mx-auto w-[15vw] h-[5vh] xl:hidden"