Possible fix for canvases/GLTF not rendering on mobile devices about project_3d_developer_portfolio HOT 8 OPEN

Heyy @Aminur-Application thanks for sharing your solution, i was going crazy about it 🤣. Great work with the portfolio btw! Just a heads up, idk if you seen it but on my screen the portfolio have an overflow-x

You can solve this by changing this property w-screen on the section highlighted tag to w-full 😊

from project_3d_developer_portfolio.

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

"react": "^18.2.0"
"react-type-animation": "^3.0.1"

from project_3d_developer_portfolio.

Heyy @Aminur-Application thanks for sharing your solution, i was going crazy about it 🤣. Great work with the portfolio btw! Just a heads up, idk if you seen it but on my screen the portfolio have an overflow-x You can solve this by changing this property w-screen on the section highlighted tag to w-full 😊

Thanks @Julia-Alberici :)

from project_3d_developer_portfolio.

hey do you mind sharing how you animated the text to get typed out because when trying to do so all the libraries that I can find are outdated for react-18 and if i force install them they type in a very laggy way.

from project_3d_developer_portfolio.

@hady-dev
hey, i used a package called react-type-animation;

import { TypeAnimation } from 'react-type-animation';

<p className={`${styles.heroSubText} mt-2 text-white-100`}>
        <span>I develop</span>
        <TypeAnimation
          cursor={false} // omit the default css typing animation class, otherwise we won't be able to manipulate it manually

          className={"text-[#915eff]"} // pass custom cursor className that will be manipulated (defaults below)
          sequence={[
            ' Web Applications',
            500,
            ' Desktop Applications',
            500,
            ' User Interfaces',
            500,
            ' ',
            100,
            () => setDisplayText(true)
          ]}
          repeat={0}
        />
</p>

from project_3d_developer_portfolio.

@hady-dev
hey, i used a package called react-type-animation;

import { TypeAnimation } from 'react-type-animation';

<p className={`${styles.heroSubText} mt-2 text-white-100`}>
        <span>I develop</span>
        <TypeAnimation
          cursor={false} // omit the default css typing animation class, otherwise we won't be able to manipulate it manually

          className={"text-[#915eff]"} // pass custom cursor className that will be manipulated (defaults below)
          sequence={[
            ' Web Applications',
            500,
            ' Desktop Applications',
            500,
            ' User Interfaces',
            500,
            ' ',
            100,
            () => setDisplayText(true)
          ]}
          repeat={0}
        />
</p>

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

from project_3d_developer_portfolio.

Hey, I saw that you kind-of reorganized the Hero component, you mind sharing what you did to it and App.jsx? @Aminur-Application

from project_3d_developer_portfolio.

What version of react do you have because react-type-animation does not support react-18. There is work arounds to install it without using -force but still types out glitchy text for me.

"react": "^18.2.0" "react-type-animation": "^3.0.1"

use npm install --legacy-peer-deps react-type-animation
this works me no glitchy

from project_3d_developer_portfolio.