feat: implement Preloader, Footer, and Section components and integrate them into the home page layout.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
d54462c687
commit
0ab6930f92
4 files changed
+114
-46
No files matched your search
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Footer() {
|
||||
const [blink, setBlink] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setBlink((prev) => !prev);
|
||||
}, 500);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer className="w-full py-sp-8 border-t border-[rgba(255,255,255,0.06)] flex items-center justify-center font-mono text-[12px] text-[rgba(255,255,255,0.5)] bg-transparent">
|
||||
<div className="flex items-center">
|
||||
<span className="text-[rgba(255,255,255,0.7)]">evandro@dev</span>
|
||||
<span className="text-[rgba(255,255,255,0.7)]">:</span>
|
||||
<span className="text-[#E8FF00]">~</span>
|
||||
<span className="text-[rgba(255,255,255,0.7)]">$ exit</span>
|
||||
<span
|
||||
className={`inline-block w-[6px] h-[14px] bg-[rgba(255,255,255,0.8)] ml-1 align-middle transition-opacity duration-100 ${
|
||||
blink ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
+38
-11
@@ -1,4 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import { Reveal } from "./Reveal";
|
||||
|
||||
interface SectionProps {
|
||||
@@ -23,21 +26,45 @@ export const Section = ({
|
||||
disableChildrenAnimation = false,
|
||||
}: SectionProps) => {
|
||||
const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
|
||||
|
||||
const itemVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
|
||||
};
|
||||
|
||||
return (
|
||||
<section id={id} className={baseClass}>
|
||||
<div className="ds-section-shell">
|
||||
<Reveal y={40} duration={0.8}>
|
||||
<div className="ds-section-header">
|
||||
<div className="ds-section-meta">
|
||||
{eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
|
||||
<h2 className="ds-section-title">{title}</h2>
|
||||
{description && (
|
||||
<p className="ds-section-description">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{aside && <aside>{aside}</aside>}
|
||||
<motion.div
|
||||
className="ds-section-header"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
variants={{
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: { staggerChildren: 0.15 }
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="ds-section-meta">
|
||||
{eyebrow && (
|
||||
<motion.p className="ds-eyebrow" variants={itemVariants}>
|
||||
{eyebrow}
|
||||
</motion.p>
|
||||
)}
|
||||
<motion.h2 className="ds-section-title" variants={itemVariants}>
|
||||
{title}
|
||||
</motion.h2>
|
||||
{description && (
|
||||
<motion.p className="ds-section-description" variants={itemVariants}>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
{aside && <motion.aside variants={itemVariants}>{aside}</motion.aside>}
|
||||
</motion.div>
|
||||
|
||||
{!disableChildrenAnimation ? (
|
||||
<Reveal y={60} duration={1} delay={0.2}>
|
||||
<div>{children}</div>
|
||||
|
||||
Reference in new issue
Block a user