Open Aminur-Application opened 1 year ago
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
😊
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 tow-full
😊
Thanks @Julia-Alberici :)
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.
@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>
@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.
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"
Hey, I saw that you kind-of reorganized the Hero component, you mind sharing what you did to it and App.jsx? @Aminur-Application
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
Hello friends, i was having problems with showing all the canvas elements on my mobile device, reading the other issues it became apparent mobile supports a certain number of canvases, the individual balls was taking up majority of those allotted canvases.
I tested this out by removing all the balls, and yeah the page does seem to render the other canvases, also has a faster page rendering
solution: you can remove those 3D balls altogether if you have too many
or
My solution was to group all the balls in one canvas. While i lose the control of each ball, i think it looks slightly better this way. the page is much faster at rendering too.
Check out my Portfolio
Shoot an email if you like it :)
Now on your Tech.jsx component create a const variable storing all the icons in an array and pass it into the BallCanvas
const icons = Object.values(technologies).map((technology) => technology.icon);
Hopefully this helps you all! :)