feat: add animated components for enhanced UI/UX
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
0ab6930f92
commit
08dd046887
76 files changed
+21682
-1197
No files matched your search
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 400" width="680" height="400">
|
||||
<defs>
|
||||
<radialGradient id="grad" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(340 200) rotate(90) scale(400 680)">
|
||||
<stop stop-color="#1A1A1A" />
|
||||
<stop offset="1" stop-color="#050505" />
|
||||
</radialGradient>
|
||||
<filter id="logoGlow">
|
||||
<feGaussianBlur stdDeviation="8" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="680" height="400" rx="24" fill="url(#grad)" />
|
||||
<rect x="1" y="1" width="678" height="398" rx="23" stroke="#CCCCCC" stroke-opacity="0.1" stroke-width="1.5" fill="none" />
|
||||
<circle cx="680" cy="40" r="320" fill="none" stroke="#E8FF00" stroke-opacity="0.03" stroke-width="1" />
|
||||
<circle cx="680" cy="40" r="240" fill="none" stroke="#FFFFFF" stroke-opacity="0.02" stroke-width="1" />
|
||||
<g transform="translate(60, 80)">
|
||||
<text x="0" y="10" font-family="Arial, Helvetica, sans-serif" font-weight="bold" font-size="44" fill="#FFFFFF">evandro<tspan fill="#E8FF00">.dev.br</tspan></text>
|
||||
<text x="0" y="50" font-family="'Courier New', Courier, monospace" font-size="14" fill="#BBBBBB" letter-spacing="0.2em">FULL-STACK DEVELOPER</text>
|
||||
</g>
|
||||
<g transform="translate(60, 250)">
|
||||
<rect x="-20" y="8" width="4" height="96" rx="2" fill="#E8FF00" />
|
||||
<text x="0" y="24" font-family="'Courier New', Courier, monospace" font-size="15" fill="#CCCCCC">evandro.dev.br</text>
|
||||
<text x="0" y="60" font-family="'Courier New', Courier, monospace" font-size="15" font-weight="bold" fill="#FFFFFF">[email protected]</text>
|
||||
<text x="0" y="96" font-family="'Courier New', Courier, monospace" font-size="15" fill="#CCCCCC">github.com/evandrodevbr</text>
|
||||
</g>
|
||||
<g transform="translate(420, 100) scale(1.6)">
|
||||
<rect x="18" y="28" width="16" height="64" fill="#FFFFFF" opacity="0.05" filter="url(#logoGlow)" />
|
||||
<rect x="20" y="30" width="12" height="60" fill="#FFFFFF" />
|
||||
<rect x="32" y="30" width="28" height="12" fill="#FFFFFF" />
|
||||
<rect x="32" y="54" width="18" height="12" fill="#FFFFFF" />
|
||||
<rect x="32" y="78" width="28" height="12" fill="#FFFFFF" />
|
||||
<polygon points="62,90 74,90 92,30 80,30" fill="#E8FF00" />
|
||||
<circle cx="104" cy="84" r="6" fill="#FFFFFF" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 400" width="680" height="400">
|
||||
<rect width="680" height="400" rx="24" fill="#FFFFFF" />
|
||||
<rect x="1" y="1" width="678" height="398" rx="23" stroke="#EEEEEE" stroke-width="1.5" fill="none"/>
|
||||
<circle cx="680" cy="40" r="320" fill="none" stroke="#666666" stroke-opacity="0.05" stroke-width="1" />
|
||||
<circle cx="680" cy="40" r="240" fill="none" stroke="#666666" stroke-opacity="0.03" stroke-width="1" />
|
||||
<g transform="translate(60, 80)">
|
||||
<text x="0" y="10" font-family="Arial, Helvetica, sans-serif" font-weight="bold" font-size="44" fill="#000000">evandro<tspan fill="#000000">.dev.br</tspan></text>
|
||||
<text x="0" y="50" font-family="'Courier New', Courier, monospace" font-size="14" fill="#666666" letter-spacing="0.2em">FULL-STACK DEVELOPER</text>
|
||||
</g>
|
||||
<g transform="translate(60, 250)">
|
||||
<rect x="-20" y="8" width="4" height="96" rx="2" fill="#000000" />
|
||||
<text x="0" y="24" font-family="'Courier New', Courier, monospace" font-size="15" fill="#666666">evandro.dev.br</text>
|
||||
<text x="0" y="60" font-family="'Courier New', Courier, monospace" font-size="15" font-weight="bold" fill="#000000">[email protected]</text>
|
||||
<text x="0" y="96" font-family="'Courier New', Courier, monospace" font-size="15" fill="#666666">github.com/evandrodevbr</text>
|
||||
</g>
|
||||
<g transform="translate(420, 100) scale(1.6)">
|
||||
<rect x="20" y="30" width="12" height="60" fill="#000000" />
|
||||
<rect x="32" y="30" width="28" height="12" fill="#000000" />
|
||||
<rect x="32" y="54" width="18" height="12" fill="#000000" />
|
||||
<rect x="32" y="78" width="28" height="12" fill="#000000" />
|
||||
<polygon points="62,90 74,90 92,30 80,30" fill="#000000" />
|
||||
<circle cx="104" cy="84" r="6" fill="#000000" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 400" width="680" height="400">
|
||||
<circle cx="680" cy="40" r="320" fill="none" stroke="#FFFFFF" stroke-opacity="0.05" stroke-width="1" />
|
||||
<circle cx="680" cy="40" r="240" fill="none" stroke="#FFFFFF" stroke-opacity="0.03" stroke-width="1" />
|
||||
<g transform="translate(60, 80)">
|
||||
<text x="0" y="10" font-family="Arial, Helvetica, sans-serif" font-weight="bold" font-size="44" fill="#FFFFFF">evandro<tspan fill="#FFFFFF">.dev.br</tspan></text>
|
||||
<text x="0" y="50" font-family="'Courier New', Courier, monospace" font-size="14" fill="#CCCCCC" letter-spacing="0.2em">FULL-STACK DEVELOPER</text>
|
||||
</g>
|
||||
<g transform="translate(60, 250)">
|
||||
<rect x="-20" y="8" width="4" height="96" rx="2" fill="#FFFFFF" />
|
||||
<text x="0" y="24" font-family="'Courier New', Courier, monospace" font-size="15" fill="#CCCCCC">evandro.dev.br</text>
|
||||
<text x="0" y="60" font-family="'Courier New', Courier, monospace" font-size="15" font-weight="bold" fill="#FFFFFF">[email protected]</text>
|
||||
<text x="0" y="96" font-family="'Courier New', Courier, monospace" font-size="15" fill="#CCCCCC">github.com/evandrodevbr</text>
|
||||
</g>
|
||||
<g transform="translate(420, 100) scale(1.6)">
|
||||
<rect x="20" y="30" width="12" height="60" fill="#FFFFFF" />
|
||||
<rect x="32" y="30" width="28" height="12" fill="#FFFFFF" />
|
||||
<rect x="32" y="54" width="18" height="12" fill="#FFFFFF" />
|
||||
<rect x="32" y="78" width="28" height="12" fill="#FFFFFF" />
|
||||
<polygon points="62,90 74,90 92,30 80,30" fill="#FFFFFF" />
|
||||
<circle cx="104" cy="84" r="6" fill="#FFFFFF" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Reference in new issue
Block a user