Cognivex

Intelligent Software Systems
Premium Digital Products • Industrial Grade Consulting • AI-Driven Solutions

💠 Overview

Cognivex is an industrial-grade web ecosystem engineered for high-performance software houses and technology firms. It bridges the gap between static design and dynamic management through a seamless "Instant Sync" architecture, allowing non-technical stakeholders to manage content in real-time via Google Sheets.

The platform is built with a Dark Modern Tech aesthetic, prioritizing visual precision, fluid performance, and an elite corporate user experience.

🎨 Brand Identity

The Cognivex identity is defined by a technical, high-contrast visual language that emphasizes scalability and intelligence.

🌓 Theme-Aware Design

The system employs a sophisticated theme-switching engine that re-anchors the brand's primary cyan accents across multiple surface levels:

| Palette | Dark Mode (Primary) | Light Mode | | :--- | :--- | :--- | | Surface | #0A0A0A | #F8FAFC | | Accent | #00FFFF | #007A7A | | Borders | #1F2937 | #E2E8F0 |

🖋️ Typography Engineering

• Architectural: Space Grotesk for high-impact branding and structural headings.
• Interface: Inter for hyper-legible body copy and systemic navigation.
• Scientific: JetBrains Mono for cryptographic IDs and technical validation strings.

✨ Engineering Highlights

• Google Sheet Dual-Sync: 60-second synchronized data pipeline for Team, Projects, and Certificates.
• SafeImage™ Renderer: Real-time aspect ratio detection that automatically optimizes headshots vs. broad landscapes.
• Global Certificate Hub: A cryptographic credential system with dynamic layout mapping and split-panel previews.
• Ambient UI Modules:
  • Hardware-accelerated particle systems.
  • Dynamic brand logo swapping (Mode-aware).
  • Precision glassmorphism and backdrop filtering.

🛠️ Technical Stack

• Framework: React 18
• Build Engine: Vite 6
• Animation: Framer Motion
• Styling: Vanilla CSS with modern Variable Tokens
• Icons: Lucide React & DevIcons
• Integrations: Google Sheets CSV API

🚀 Deployment Pipeline

Local Development

# Clone the repository
git clone https://github.com/RasikhAli/Cognivex.git

# Install industrial dependencies
npm install

# Initialize local environment
cp config.example.yml config.yml

# Start HMR development server
npm run dev

CI/CD Deployment

This repository is pre-configured for GitHub Actions. Every push to main triggers an automated build and deploy process to GitHub Pages.

🚀 Render Deployment (Global Static Site)

To deploy on Render and secure the cognivex.onrender.com URL:

1. Create New Service: Select Static Site and connect this GitHub repository.
2. Project Name: Set the name to cognivex (this determines your subdomain).
3. Build Settings:
   • Build Command: npm run build
   • Publish Directory: dist
4. Environment Variables: Since config.yml is gitignored, add these variables in the Render dashboard to populate your data:
   • CONFIG_SHEETS_CERTIFICATES: [Your CSV URL]
   • CONFIG_SHEETS_PROJECTS: [Your CSV URL]
   • CONFIG_SHEETS_TEAM: [Your CSV URL]
5. SPA Routing (Crucial):
   • Go to Redirects/Rewrites.
   • Add: /* (Source) -> /index.html (Destination) -> Rewrite (Action).

📊 Data Schema Management

To ensure successful synchronization, ensure your Google Sheets contain the following canonical headers:

1. Projects: Project Title, Category, Tech Stack, Screenshots, Live Link.
2. Team: Person Name, Job Title, Profile Picture, Skillset, Social Links.
3. Certificates: Full Name, Credential ID, Status, Date.

© 2026 Cognivex. Built for Excellence.