feat: Initialize portfolio project with core pages, UI components, and configuration files.
This commit is contained in:
1 parent
aa07d6faeb
commit
0523052864
38 files changed
+1165
-460
No files matched your search
+37
-22
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user