- 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.
81 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
}
|