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:
¨evandrodevbr¨ committed 2025-09-03 01:47:27 -03:00
1 parent 780fd7c161
commit 6fe280cea1
7 files changed
+729 -27

No files matched your search

+13 -5
View File
@@ -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 */}