feat(ui): implement mobile navigation and rotating text
Add a responsive mobile navigation menu to the `Header` component, allowing users to easily access different sections of the portfolio on smaller screens. This includes a toggle button for opening/closing the menu and smooth animations for its appearance. Introduce a `RotatingText` component in the `Hero` section to dynamically display different professional titles, enhancing the visual appeal and conveying diverse skills. Update `package.json` to include `framer-motion` as a dependency, which is utilized for the new animations.
This commit is contained in:
1 parent
780fd7c161
commit
6fe280cea1
7 files changed
+729
-27
No files matched your search
+13
-5
@@ -5,6 +5,7 @@ import Image from "next/image";
|
||||
import { AuroraText } from "@/components/magicui/aurora-text";
|
||||
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
|
||||
import { useEffect } from "react";
|
||||
import { RotatingText } from "@/components/RotatingText";
|
||||
|
||||
export default function Hero() {
|
||||
const getGreetingMessage = () => {
|
||||
@@ -70,12 +71,19 @@ export default function Hero() {
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-6 leading-tight">
|
||||
<AuroraText>Evandro Fonseca Junior</AuroraText>
|
||||
<h1 className="text-3xl md:text-5xl lg:text-6xl font-black mb-6 leading-tight text-gray-200">
|
||||
Evandro Fonseca Junior
|
||||
</h1>
|
||||
<AnimatedGradientText className="text-xl md:text-2xl lg:text-3xl font-bold">
|
||||
Desenvolvedor Full-Stack
|
||||
</AnimatedGradientText>
|
||||
<RotatingText
|
||||
words={[
|
||||
"Desenvolvedor Full-Stack",
|
||||
"Desenvolvedor de Software",
|
||||
"Familiarizado em UI/UX",
|
||||
"Foco em resolução",
|
||||
]}
|
||||
className="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent"
|
||||
interval={4000}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Description */}
|
||||
|
||||
Reference in new issue
Block a user