evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement Preloader, Footer, and Section components and integrate them into the home page layout.

Browse Source
This commit is contained in:
Evandro Fonseca Junior committed 2026-03-07 15:45:21 -03:00
1 parent d54462c687
commit 0ab6930f92
4 files changed
+114 -46
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/Preloader.tsx
+44 -35
View File
@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Logo } from "./Logo";
export function Preloader() {
const [progress, setProgress] = useState(0);
@@ -45,46 +46,54 @@ export function Preloader() {
initial={{ y: 0 }}
exit={{ y: "-100vh" }}
transition={{ duration: 0.9, ease: [0.76, 0, 0.24, 1] }}
className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#0A0A0A] text-white"
className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--ink)] text-white w-screen h-screen"
>
<div className="flex w-full max-w-sm flex-col items-center justify-center gap-6 px-6">
<div className="overflow-hidden">
<motion.h1
initial={{ y: "100%" }}
animate={{ y: 0 }}
transition={{ duration: 1, ease: [0.76, 0, 0.24, 1], delay: 0.1 }}
className="text-4xl sm:text-5xl font-extrabold tracking-tight"
style={{ fontFamily: "'Monument Extended', sans-serif" }}
>
evandro<span className="text-[#E8FF00]">.dev</span>
</motion.h1>
</div>
<div className="flex flex-col items-center justify-center gap-8 w-full px-6">
<div className="h-[2px] w-full overflow-hidden bg-white/10">
<motion.div
className="h-full bg-[#E8FF00]"
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
transition={{ duration: 0.1, ease: "linear" }}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="flex justify-center"
>
<Logo
variant="mark"
size="xl"
theme="dark"
className="w-32 h-auto md:w-48 lg:w-56 drop-shadow-[0_0_20px_rgba(232,255,0,0.15)]"
/>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
className="text-center"
>
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight font-display mb-2">
<span style={{ color: "var(--slash)" }}>Evandro</span><span className="text-white">.dev.br</span>
</h1>
</motion.div>
<div className="flex w-full justify-between overflow-hidden text-[11px] uppercase tracking-widest text-white/50">
<motion.div
initial={{ y: "100%" }}
animate={{ y: 0 }}
transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
>
Carregando
</motion.div>
<motion.div
initial={{ y: "100%" }}
animate={{ y: 0 }}
transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.3 }}
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6, duration: 0.5 }}
className="w-full max-w-[200px] mt-4"
>
<div className="h-[2px] w-full overflow-hidden bg-white/10 rounded-full">
<motion.div
className="h-full bg-[var(--slash)]"
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
transition={{ duration: 0.1, ease: "linear" }}
/>
</div>
<div className="mt-4 flex justify-center text-[11px] uppercase tracking-widest text-[var(--slash)] font-mono opacity-80">
{progress}%
</motion.div>
</div>
</div>
</motion.div>
</div>
</motion.div>
)}