Fabi⚡️Card

Code ↔ Screen, Side-by-Side.

Fabi⚡️Card is an interactive portfolio designed to clearly present the direct relationship between code and its visual output.

Each project is displayed as a dual card, allowing simultaneous viewing of the implementation (HTML / CSS / JS) and the final rendered interface.

See the project in action 🤺 ➾ https://fabianacampanari.github.io/FabiCard/

.🎵⋆. ݁₊🎶*+🎶.. Live Demo: Turn the Sound On & Enjoy the Show ..+🎶⋆. ݁₊🎵.⋆.𝄞.

FabiCard.Code.Screen.side-by-side.mp4

🖤 Created by: Fabi⚡️ - Front-End Developer & Graphic Designer

🎶 Music by: Alexandre Pachabezian - River Flows In You - (Deep House Remix)

₊˚🕯️ Project Purpose

To offer an elegant and educational visual experience that allows users to:

- Compare code ↔ interface in real time

- Highlight structure, semantics, and styling

- Facilitate evaluation, study, and presentation of front-end projects

🕺 Technologies & Skills

Web Development

- HTML — 82.8%

- CSS — 16.6%

- JavaScript — 0.6%

- GitHub Pages / Automatic Deployment

ૐ Sound Design

- Created by: Fabi⚡️ Front-End Developer & Graphic Designer*

- Music by: Alexandre Pachabezian 𝄞 “ River Flows In You” - (Deep House Remix)

- I crafted the sound design by synchronizing the music’s rhythm with the timing, speed, and visual flow of the animations.

- This intentional alignment between audio and motion creates a cohesive and immersive experience, enhancing the overall atmosphere of the presentation.

💌 Let the data flow... Ping Me !

🛸๋ My Contacts Hub

────────────── ⊹🔭๋ ──────────────

➣➢➤ Back to Top

Copyright 2026 Fabiana Campanari. Code released under the MIT license.