adrianhajdin / project_3D_developer_portfolio

The most impressive websites in the world use 3D graphics and animations to bring their content to life. Learn how to build your own ThreeJS 3D Developer Portfolio today!
https://jsmastery.pro
5.77k stars 1.28k forks source link

About.jsx not loading on iphone edge or chrome #42

Open prosenba opened 1 year ago

prosenba commented 1 year ago

This worked great on chrome or edge on the pc. I tried to remove the motion tags to trouble shoot but get the same issues. Any help would be appreciated.

import React from "react"; import { Tilt } from "react-tilt"; import { motion } from "framer-motion";

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

const ServiceCard = ({ index, title, icon }) => (

web-development

{title}

);

const About = () => { return ( <>

          <p className={styles.sectionSubText}>Introduction</p>
          <h2 className={styles.sectionHeadText}>Overview.</h2>

    <div className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]'>
          Lorem ipsum dolor sit amet. Nam molestias ullam sit reprehenderit quaerat est enim vero At molestiae nihil At corrupti consequatur. At voluptatem exercitationem nam quia dolorem ut voluptatem odio hic sunt consequuntur qui saepe neque!

          Eum libero esse et dolorum excepturi et quia sint? Qui voluptatem accusamus 33 tempora modi a modi nihil.

          Aut laudantium ratione et voluptatem reiciendis est ratione nihil ut dicta omnis. Et vitae iusto et harum excepturi eum libero libero vel voluptas beatae cum dolorum placeat! Est doloribus officiis a excepturi fugiat vel pariatur cupiditate non iure porro ut voluptas voluptatem et mollitia vero sed assumenda voluptas. Aut aliquid molestias sit deleniti suscipit aut distinctio quia.
  </div>

      <div className='mt-20 flex flex-col'>
    {services.map((service, index) => (
      <ServiceCard key={service.title} index={index} {...service} />
    ))}
  </div>
</>

); };

export default SectionWrapper(About, "about");

SirNick89 commented 1 year ago

Try decreasing viewport amount of motion section in hoc/SectionWrapper.jsx. It might work

minhvyha commented 1 year ago

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

Fan-Karwanta commented 1 year ago

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

Thanks bro!! It worked for me, been debugging for an hour. Thanks!

akngngr commented 6 months ago

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

Thank you! I have been debugging this issue for a while now and it's finally fixed.