Skip to main content

​
projects.html - Master Projects Showcase

The projects.html page displays a curated collection of BLACKICE Academy projects, including cybersecurity tools, educational platforms, and innovative AI solutions.

​
Overview

This page serves as the portfolio hub for all BLACKICE projects, featuring:
  • Interactive project cards with animated borders
  • Category-based filtering system
  • Lucide icon integration for visual appeal
  • Responsive grid layout
  • Links to live project demos

​
Page Hero Section

The hero section features a gradient background with the heading “Master Projects” and subtitle “Cybersecurity tools, educational platforms, and innovative solutions”.

​
Hero Design

  • Full-width gradient banner
  • Centered typography with text shadows
  • Responsive font sizing (clamp function)
  • Rounded bottom corners for modern look

​
Filtering System

All Projects

Default view showing all available projects across all categories.

Security

Filter to show only cybersecurity and security-focused projects.

Education

Display educational platforms and learning tools.

Tools

Show development tools, compilers, and utilities.

AI

Filter AI-powered applications and chat interfaces.

​
Filter Implementation

const filterBtns = document.querySelectorAll('.filter-btn');
const cards = document.querySelectorAll('.project-card');

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.dataset.filter;
    
    cards.forEach(card => {
      const tags = card.dataset.tags.split(' ');
      if (filter === 'all' || tags.includes(filter)) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    });
  });
});

​
Featured Projects

​
1. Elegant Site Builder

  • Category: Tools, Education
  • Tags: New, Visual, Publishing
  • Description: Beautiful visual web development platform with instant publishing capabilities
  • Icon: Layout Template (Lucide)
  • Link: elegant-builder.html

​
2. Elegant Site Store

  • Category: Tools, Education
  • Tags: Community, Showcase (Featured)
  • Description: Discover and share beautiful websites created by the community
  • Icon: Shopping Bag (Lucide)
  • Link: elegant-store.html
  • Firebase Integration: Real-time database for site listings

​
3. Web Compiler

  • Category: Tools, Education
  • Tags: Compiler, Multi-Language
  • Description: Online code compilation platform supporting multiple programming languages
  • Icon: Terminal (Lucide)
  • Link: webcompiller.html

​
4. Bicochat

  • Category: Tools, AI
  • Tags: AI (Featured), Chat, Bilingual
  • Description: AI-powered chat platform for seamless multilingual conversations
  • Icon: Bot (Lucide)
  • Link: https://bicochat.onrender.com/ (External)

​
5. VisionDraw

  • Category: Tools, AI
  • Tags: AI (Featured), Drawing, Vision
  • Description: Draw and ask AI questions about your artwork instantly with vision analysis
  • Icon: Pen Tool (Lucide)
  • Link: visiondraw.html

​
Project Card Design

​
Card Structure

<div class="project-card" data-tags="tools education">
  <div class="card-border"></div>
  <i data-lucide="icon-name" class="card-icon"></i>
  <h3 class="card-title">Project Name</h3>
  <p class="card-desc">Project description...</p>
  <div class="card-tags">
    <span class="tag">Tag1</span>
    <span class="tag featured">Tag2</span>
  </div>
  <a href="link.html" class="card-link">Action →</a>
</div>

​
Visual Effects

Animated Border

Rotating gradient border animation (8s infinite) creates a dynamic, futuristic effect.

Radial Gradients

Multiple radial gradients create depth with purple and pink tones.

Glass Effect

Inset box shadow creates elevated glass appearance.

Hover States

Cards lift and glow on hover with smooth transitions.

​
Tag System

​
Tag Types

Tags provide quick visual indicators of project characteristics and status.
  • Featured: Pink-to-red gradient (highlighted projects)
  • New: Blue-to-cyan gradient (recently added)
  • Standard: Light gray background (category/technology tags)

​
Tag Styling

.tag.featured {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
}

.tag.new {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
}

​
Navigation Elements

​
Back Button

  • Fixed position (top-left corner)
  • Gradient background matching theme
  • Returns to index.html (main portal)
  • Hover effect with scale and text shadow
.back-btn {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 100;
  background: linear-gradient(4deg, #975af4, #2f7cf8 40%, #78aafa 65%, #934cff 100%);
}

​
Responsive Design

​
Breakpoints

  • Grid: auto-fit columns, min 320px
  • Hero padding: 120px top, 60px bottom
  • Back button: 30px from edges
  • Grid: single column layout
  • Hero padding: 100px top, 40px bottom
  • Back button: 20px from edges, smaller text
  • Filter buttons: reduced padding and font size

​
Icon Integration

​
Lucide Icons

The page uses Lucide icon library for crisp, scalable icons: 
<script src="https://unpkg.com/lucide@latest"></script>
<script>
  lucide.createIcons();
</script>
Icons Used:
  • layout-template - Elegant Site Builder
  • shopping-bag - Elegant Site Store
  • terminal - Web Compiler
  • bot - Bicochat
  • pen-tool - VisionDraw

​
Filter Container Design

Glassmorphism Filter Bar

The filter section uses a gradient border wrapper with dark inner content, creating a floating effect. Buttons feature gradient backgrounds with sweep animations on hover.

​
Active Filter State

.filter-btn.active {
  background: linear-gradient(4deg, #FA0E0E, #ff6b6b 40%, #ff8787 65%, #FA0E0E 100%);
  box-shadow: 0 0 20px rgba(250, 14, 14, 0.6);
  transform: scale(1.08);
}

​
Grid Layout

​
Container Structure

.container {
  max-width: 1400px;
  margin: 0 auto;
  background: linear-gradient(gradient colors);
  border-radius: 32px;
  padding: 4px; /* Creates border effect */
}

.container-inner {
  background: #161a20;
  border-radius: 30px;
  padding: 40px 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

​
Project Data Attributes

Each project card uses data-tags for filtering: 
<div class="project-card" data-tags="tools education">
  <!-- Multiple space-separated tags for filtering -->
</div>

​
File Location

source/projects.html

​
Related Pages

​
Best Practices

Filtering

Use category filters to quickly find projects by type. “All Projects” resets the view.

External Links

Some projects (like Bicochat) open in new tabs to external hosting platforms.

Visual Feedback

Watch for featured and new badges to discover highlighted projects.

Mobile Experience

On mobile devices, cards stack vertically with optimized spacing.

Build docs developers (and LLMs) love

Get started for freeTalk to us