Files
portifolio-evandrodevbr/app/page.tsx
T
¨evandrodevbr¨ 780fd7c161 feat(ui): enhance contact form messaging and particle background animation
- Improved the contact form's message generation with more professional and detailed templates
- Replaced the grid-based background animation with a WebGL-powered particle system using OGL
- Added GSAP for advanced animation capabilities
- Adjusted layout styling for better centering and spacing across components
- Enhanced visual feedback and interactivity of the animated background

This change significantly upgrades the user experience and visual appeal of the contact section while maintaining performance through efficient rendering techniques.
2025-09-03 00:51:29 -03:00

81 lines
2.3 KiB
TypeScript

import dynamic from "next/dynamic";
import { Header } from "./components/Header";
import Squares from "@/components/Squares";
import { WorkModalities } from "./components/WorkModalities"; // Importar WorkModalities
import DotGrid from "@/components/DotGrid";
// Lazy load components for better performance
const Hero = dynamic(() => import("./components/Hero"), {
loading: () => (
<div className="min-h-screen flex items-center justify-center">
<div className="animate-pulse text-white">Carregando...</div>
</div>
),
});
const About = dynamic(() => import("./components/About"), {
loading: () => (
<div className="py-20 px-4 text-center">
<div className="animate-pulse text-white">Carregando seção...</div>
</div>
),
});
const Skills = dynamic(() => import("./components/Skills"), {
loading: () => (
<div className="py-20 px-4 text-center">
<div className="animate-pulse text-white">Carregando habilidades...</div>
</div>
),
});
const Experience = dynamic(() => import("./components/Experience"), {
loading: () => (
<div className="py-20 px-4 text-center">
<div className="animate-pulse text-white">Carregando experiência...</div>
</div>
),
});
const Projects = dynamic(() => import("./components/Projects"), {
loading: () => (
<div className="py-20 px-4 text-center">
<div className="animate-pulse text-white">Carregando projetos...</div>
</div>
),
});
const Contact = dynamic(() => import("./components/Contact"), {
loading: () => (
<div className="py-20 px-4 text-center">
<div className="animate-pulse text-white">Carregando contato...</div>
</div>
),
});
export default function Home() {
return (
<div className="min-h-screen bg-black text-white relative">
<div className="fixed inset-0 z-0 opacity-50">
<Squares
speed={0.5}
squareSize={40}
direction="diagonal" // up, down, left, right, diagonal
borderColor="#271E37"
hoverFillColor="#222222"
/>
</div>
<Header />
<main className="relative z-10">
<Hero />
<About />
<Skills />
<Experience />
<Projects />
<WorkModalities /> {/* Adicionar WorkModalities aqui */}
<Contact />
</main>
</div>
);
}