feat: Initialize portfolio project with core pages, UI components, and configuration files.

This commit is contained in:
Evandro Fonseca Junior committed 2026-03-07 10:27:04 -03:00
1 parent aa07d6faeb
commit 0523052864
38 files changed
+1165 -460

No files matched your search

+37 -22
View File
@@ -1,4 +1,4 @@
"use client";
"use client";
import { Logo } from "./Logo";
@@ -48,15 +48,14 @@ export default function Hero() {
return (
<section
id="home"
className="relative overflow-hidden px-6 py-24 lg:px-16"
style={{ background: "#0A0A0A", color: "#FFFFFF" }}
className="relative overflow-hidden bg-[#0A0A0A] px-sp-4 py-sp-12 text-white lg:px-sp-8"
>
<div className="pointer-events-none absolute inset-0 bg-grid-light opacity-70" />
<div className="pointer-events-none absolute inset-x-0 top-0 h-40 bg-[radial-gradient(circle_at_top,rgba(232,255,0,0.18),transparent_60%)]" />
<div className="relative z-10 mx-auto grid min-h-[calc(100vh-52px)] w-full max-w-[1240px] grid-cols-1 items-center gap-16 lg:grid-cols-2">
<div className="relative z-10 mx-auto grid min-h-[calc(100vh-52px)] w-full max-w-[1240px] grid-cols-1 items-center gap-8 lg:grid-cols-2">
<div>
<div className="mb-8 inline-flex items-center gap-2">
<div className="mb-sp-8 inline-flex items-center gap-sp-2">
<span
className="h-1.5 w-1.5 animate-pulse rounded-full"
style={{ background: "#E8FF00" }}
@@ -70,10 +69,10 @@ export default function Hero() {
</div>
<h1
className="mb-6 font-display text-5xl font-extrabold leading-[0.92] tracking-[-0.04em] md:text-6xl lg:text-7xl xl:text-[5.4rem]"
style={{ color: "#FFFFFF" }}
className="mb-sp-6 text-[13vw] sm:text-7xl md:text-[6rem] lg:text-[7rem] xl:text-[8rem] leading-[0.9] tracking-[-0.01em]"
style={{ color: "#FFFFFF", fontFamily: "'Monument Extended', sans-serif", fontWeight: 800 }}
>
Evandro
evandro
<br />
<span style={{ color: "#E8FF00" }}>.dev</span>
<br />
@@ -81,7 +80,7 @@ export default function Hero() {
</h1>
<p
className="mb-10 max-w-[460px] text-[13px] leading-7"
className="mb-sp-10 max-w-[460px] text-[13px] leading-7"
style={{ color: "rgba(255,255,255,.72)" }}
>
Engenheiro de Software especializado em aplicacoes de alta
@@ -89,16 +88,16 @@ export default function Hero() {
React, Tauri e arquitetura escalavel.
</p>
<div className="mb-8 flex flex-wrap items-center gap-4">
<div className="mb-sp-8 flex flex-wrap items-center gap-sp-4">
<a
href={`https://wa.me/5547992742365?text=${encodeURIComponent(greeting)}`}
className="inline-flex h-11 items-center rounded-sm px-6 text-[11px] font-semibold uppercase tracking-[0.08em] no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(232,255,0,.8),0_8px_24px_rgba(232,255,0,.35)]"
className="inline-flex h-11 items-center rounded-sm px-sp-6 text-[11px] font-semibold uppercase tracking-[0.08em] no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_rgba(232,255,0,.8),0_8px_24px_rgba(232,255,0,.35)]"
style={{ background: "#E8FF00", color: "#0A0A0A" }}
>
Iniciar projeto
</a>
<div className="flex items-center gap-2">
<div className="flex items-center gap-sp-2">
{SOCIAL_LINKS.map((link) => (
<a
key={link.label}
@@ -141,7 +140,7 @@ export default function Hero() {
</div>
<div
className="mt-10 grid max-w-[440px] grid-cols-3 gap-px border max-sm:grid-cols-1"
className="mt-sp-10 grid max-w-[440px] grid-cols-3 gap-px border max-sm:grid-cols-1"
style={{
borderColor: "rgba(255,255,255,.12)",
background: "rgba(255,255,255,.08)",
@@ -161,7 +160,7 @@ export default function Hero() {
<span style={{ color: "#E8FF00" }}>{item.accent}</span>
</div>
<div
className="mt-1 text-[9px] uppercase tracking-[0.12em]"
className="mt-sp-1 text-[9px] uppercase tracking-[0.12em]"
style={{ color: "rgba(255,255,255,.35)" }}
>
{item.label}
@@ -171,7 +170,7 @@ export default function Hero() {
</div>
</div>
<div className="flex flex-col items-end gap-6 max-lg:items-start">
<div className="flex flex-col items-end gap-sp-6 max-lg:items-start">
<div
className="relative flex aspect-square w-full max-w-[440px] items-center justify-center border max-lg:max-w-[320px]"
style={{
@@ -183,35 +182,51 @@ export default function Hero() {
className="absolute left-6 top-5 text-[9px] tracking-[0.14em]"
style={{ color: "rgba(255,255,255,.32)" }}
>
D / SLASH MARK
EV / LOGO MARK
</span>
<Logo variant="mark" size="xl" theme="dark" />
<svg
width="280"
height="280"
viewBox="0 0 120 120"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="shrink-0 transition-transform duration-700 hover:scale-110"
>
<rect x="20" y="30" width="12" height="60" fill="currentColor" />
<rect x="32" y="30" width="28" height="12" fill="currentColor" />
<rect x="32" y="54" width="18" height="12" fill="currentColor" />
<rect x="32" y="78" width="28" height="12" fill="currentColor" />
<polygon points="62,90 74,90 92,30 80,30" fill="var(--slash)" />
<circle cx="104" cy="84" r="6" fill="currentColor" />
</svg>
<span
className="absolute bottom-5 right-6 text-[9px] tracking-[0.14em]"
style={{ color: "#E8FF00", opacity: 0.78 }}
style={{ color: "var(--slash)", opacity: 0.78 }}
>
CONCEITO ESCOLHIDO
</span>
</div>
<div
className="flex items-center gap-3 text-[9px] tracking-[0.12em]"
className="flex items-center gap-sp-3 text-[9px] tracking-[0.12em]"
style={{ color: "rgba(255,255,255,.32)" }}
>
<span
className="h-px w-6"
style={{ background: "rgba(255,255,255,.18)" }}
/>
D / Slash mark · conceito final
EV / Full mark · identidade visual
</div>
<div
className="flex items-center gap-3 text-[9px] tracking-[0.12em]"
className="flex items-center gap-sp-3 text-[9px] tracking-[0.12em]"
style={{ color: "rgba(255,255,255,.32)" }}
>
<span
className="h-px w-6"
style={{ background: "rgba(255,255,255,.18)" }}
/>
Escala: 280x200 · viewbox
Escala: 280x280 · svg viewbox
</div>
</div>
</div>