Welcome to Velixo.

Congratulations on choosing Velixo — a professional, high-fidelity portfolio ecosystem designed for elite architects, engineers, and technical creatives.

Pro Tip: This template used shared assets for better performance. All three demos are pre-configured to work out-of-the-box.

This documentation will guide you through the setup, customization, and deployment of your new professional identity. Whether you are building an elite bento-style resume or an editorial narrative portfolio, this guide covers the technical essentials.

Project Structure

Velixo relies on a modular architecture where the core logic is shared across all three demos to minimize redundancy and maximize speed.

📁 Velixo/ (Root)
 ├── 📁 assets/         # Global styles, JS, and Media
 │   ├── 📁 css/      # main.css, plugins, bootstrap
 │   ├── 📁 fonts/    # FontAwesome & Webfonts
 │   ├── 📁 img/      # Optimized WebP assets
 │   └── 📁 js/       # Core logic & logic hooks
 ├── 📁 demo-1/       # Elite Professional (Bento)
 ├── 📁 demo-2/       # Modular Studio (Agency)
 ├── 📁 demo-3/       # Narrative Split (Creative)
 ├── 📁 documentation/ # Current help files
 └── 📄 index.html     # Master Hub / Landing Page

Installation Guide

Since Velixo is a static HTML template, no complex backend setup or database is required. You can go live in minutes.

Local Development

To view the project locally, simply extract the ZIP file and open any index.html file in a modern browser (Chrome, Safari, Firefox).

Live Deployment

To deploy Velixo, upload the entire contents of the root folder (including assets) to your server via FTP or a CI/CD pipeline (like Netlify or Vercel).

Theming & Style Customization

Velixo is built using modern CSS Variables, allowing you to change the entire brand identity with a single line of code.

Primary Global Variables

Open assets/css/main.css and locate the :root { /* Variable Settings & Theme Handling */ section to modify core brand tokens.

:root {
  /* Brand Identity */
  --velixo-primary: #1b74e4;      /* High-Impact Blue */
  --velixo-secondary: #fa5252;    /* Highlight Red */
  
  /* Layout Spacing */
  --radius-3xl: 48px;             /* Curved Corner Radius */
  --radius-xl: 32px;              /* Standard Card Radius */
}
                    

Updating Content

To update text, icons, and links, simply edit the HTML files in the respective demo folder (e.g., demo-1/index.html).

  • Icons: Uses FontAwesome 7.2. Search icons on FontAwesome.
  • Images: Replace files in assets/img/ or update the src attribute in HTML.
  • Animations: Adjust WOW.js data-wow-delay and animate.css classes.

Dark Mode Mechanism

Velixo uses a class-based strategy to toggle themes. The state is permanently stored in localStorage to remember user preference across sessions.

/* Manual Control */
// Add 'dark-theme' class to <html> for dark mode
<html class="dark-theme">

// Remove class for light mode (Default)
<html>
                    

Support & Lifetime Updates

We believe in high-fidelity support. If you encounter any technical difficulty or layout displacement, please reach out via our official channels.