Crafting digital experiences that flow like water and glow like light.
Welcome to the home of Silent Flare, a personal portfolio website designed with a focus on modern aesthetics, interactive data visualization, and fluid user experiences.
The project is built on two primary design pillars:
- Digital Youth: High-saturation accents, neon glows, and a vibrant, energetic vibe.
- Silent Energy: A deep dark theme with minimalist, mysterious glassmorphism elements and smooth transitions.
- Dynamic GitHub Contribution Graph: An upgraded contribution graph featuring glowing, slightly 3D "energy cells" with reactive hover effects.
- Infinite Tech Marquee: A non-stop scrolling showcase of the modern tech stack.
- Interactive UI:
- Magnetic Buttons: Elements that react to cursor proximity for a tactile feel.
- Animated Signature: A fluid, handwritten SVG animation for the brand identity.
- Glassmorphism Panels: Sleek, translucent surfaces that provide depth and clarity.
- Fluid Media Background: Integration of high-quality video and image backgrounds that respond to user interaction.
- Core: HTML5, CSS3 (Tailwind CSS & Vanilla CSS)
- Logic: Native JavaScript (ES6+)
- Icons: Font Awesome 6
- Typography: Inter (UI), Dancing Script (Signature)
- Deployment: Optimized for GitHub Pages
SilentFlare.com/
├── css/ # Stylesheets (Tailwind output & custom CSS)
├── js/ # Application logic and module configurations
├── pic/ # Image assets and avatars
├── vid/ # Background video assets
├── index.html # Main entry point
├── package.json # Build scripts and dependencies
└── tailwind.config.js # Custom Tailwind configuration
The project uses Tailwind CSS for utility-first styling. To build the CSS output:
# Install dependencies
npm install
# Build once
npm run build:css
# Watch for changes
npm run watch:cssSimply open index.html in any modern web browser or use a live server extension (like Live Server in VS Code).
This project is licensed under the ISC License.
Designed and developed with ❤️ by Silent Flare.