#clickable cards that open a new site within the webpage

9 messages · Page 1 of 1 (latest)

modern sorrel
#

hey i followed the great 3D Portfolio video from Adrian and now i want to change the result to my needs.
i have problems to make the Cards in the video clickable, so that when you click on them a new page opens in the webpage that shows the project in more detail.

does anyone know how to solve this ? 🙂

#

code for the card section

import Tilt from 'react-parallax-tilt'
import { motion } from 'framer-motion';

import { styles } from '../styles';
import { services } from '../constants';
import { fadeIn, textVariant } from '../utils/motion';
import { SectionWrapper } from '../hoc';

import { navLinks } from '../constants';
import { Link } from 'react-router-dom';

const ServiceCard = ({ index, title, icon }) => {
  return (
    <Tilt className="xs:w-[250px] w-full">
      <motion.div
        variants={fadeIn("up", "spring", 0.5 * index, 0.75)}
        className="w-full green-pink-gradient p-[10px] rounded-[10px] shadow-card cursor-pointer"
      >
        <div options={{

          max: 45,
          scale: 1,
          speed: 450
        }}
          className="bg-black rounded-[5px] py-0 px-0 min-h-[0px] flex justify-evenly items-center flex-col cursor-pointer "
        >
          <img src={icon} alt={title} className="w-full h-full object-cover rounded-2xl" />
          <h3 className="text-[#FF5F1F] text-[0px] font-bold text-center">{title}</h3>
          
        </div>
      </motion.div>
    </Tilt>
  )
}

const About = () => {
  return (
    <>
      <motion.div variants={textVariant()}>
        <p className={styles.sectionHeadText}
        >Random Projects</p>
        <h2 className={styles.sectionSubText}
        >Click on it</h2>
      </motion.div>

      <motion.p
        //anordnung der Karten
        variants={fadeIn("", "", 0.1, 1)}
        className="mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]"
      >
        tests

      </motion.p>

      <div className="mt-2 flex flex-wrap gap-8">
        {services.map((service, index) => (
          <ServiceCard key={service.title} index={index}{...service} />
        ))}
      </div>
    </>
  )
}

export default SectionWrapper(About, "about")```
#

.
.
.
**code of the app.jsx
**

import { BrowserRouter } from 'react-router-dom';
import { About, Contact, Experience, Feedbacks, Hero, Navbar, Tech, Works, StarsCanvas } from './components';

const App = () => {

  return (
    <BrowserRouter>
      <div className="relative z-0 bg-primary">
        <div className="bg-hero-pattern bg cover bg-no-repeat bg-center">
          <Navbar />
          <Hero />
        </div>
        <About />
        {/* <Experience/>
        <Tech />
        <Works />
        <Feedbacks/> */}
        <div className="relative z-0">
          {/* <Contact/>
          <StarsCanvas/> */}
        </div>
      </div>
</BrowserRouter>
  )
}
export default App```
river warren
modern sorrel
# river warren Can you not just wrap them in an anchor tag?

hey, thanks for your reply.
I tried something and it seems to work, unfortunately I don't have the nice grid view with the animation.
it works if i read each card separately, but this way they are displayed one below the other and not side by side like in the nice grid before (screenshot above).

Do you know how to solve this?

i changed the card code to this. i duplicated the code below for each card while using an another const Servicecard number and an another ahref link to a different project site.

  return (
    <Tilt className="xs:w-[250px] w-full">
      <motion.div
        variants={fadeIn("up", "spring", 0.5 * index, 0.75)}
        className="w-full green-pink-gradient p-[10px] rounded-[10px] shadow-card cursor-pointer"
      >
        <div options={{
          max: 45,
          scale: 1,
          speed: 450
        }}
          className="bg-black rounded-[5px] py-0 px-0 min-h-[0px] flex justify-evenly items-center flex-col cursor-pointer "
        >
          <a href="/project1">
  <img src={icon} alt={title} className="w-full h-full object-cover rounded-2xl" />
</a>
          <h3 className="text-[#FF5F1F] text-[0px] font-bold text-center">{title}</h3>
        </div>
      </motion.div>
    </Tilt>
  )
}```

and in the index i changed it to this for each card.
``` const services = [
    {
      title: "Project: X",
      icon: creator,
    }, 
  ];

  const services2 = [
    {
      title: "Project: X2",
      icon: creator,
    },
   ];```
river warren
#

I would just use flexbox to get them back into a grid

modern sorrel