364 lines
18 KiB
HTML
364 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
|
|
|
{% block description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
|
|
|
{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}
|
|
|
|
{% block og_title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
|
|
|
{% block og_description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
|
|
|
{% block twitter_title %}{{ t('Portfolio | Web Design Projects Brussels') }}{% endblock %}
|
|
|
|
{% block twitter_description %}{{ t('View my web design portfolio featuring business websites, e-commerce sites, and custom web solutions. Professional web design projects completed in Brussels.') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
{{ hero.hero_section(
|
|
title="Design Showcase",
|
|
subtitle="Explore different design styles and themes. Click on any design to see how your website could look with these modern, professional styles.",
|
|
icon_class="fas fa-palette",
|
|
stats=[
|
|
{"value": "8+", "label": "Years Experience"},
|
|
{"value": "15,000+", "label": "Hours Coded"},
|
|
{"value": "100%", "label": "Committed"}
|
|
],
|
|
t=t
|
|
) }}
|
|
|
|
<!-- Design Showcase Section -->
|
|
<section class="design-showcase py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center mb-5">
|
|
<h2 class="display-5 fw-bold mb-3">{{ t('Interactive Design Themes') }}</h2>
|
|
<p class="lead text-muted">{{ t('Click on any design below to preview how your website could look. Each theme demonstrates different styles, colors, and layouts.') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Design Grid -->
|
|
<div class="row g-4">
|
|
<!-- Modern Minimal -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="modern-minimal">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('Modern Minimal') }}</h4>
|
|
<p class="design-description">{{ t('Clean, spacious design with subtle animations and modern typography.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">Clean</span>
|
|
<span class="tag">Modern</span>
|
|
<span class="tag">Minimal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bold & Vibrant -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="bold-vibrant">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('Bold & Vibrant') }}</h4>
|
|
<p class="design-description">{{ t('Eye-catching design with bold colors and dynamic elements.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">Bold</span>
|
|
<span class="tag">Colorful</span>
|
|
<span class="tag">Dynamic</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Elegant Professional -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="elegant-professional">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('Elegant Professional') }}</h4>
|
|
<p class="design-description">{{ t('Sophisticated design with premium styling and professional appeal.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">Elegant</span>
|
|
<span class="tag">Professional</span>
|
|
<span class="tag">Premium</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tech Startup -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="tech-startup">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('Tech Startup') }}</h4>
|
|
<p class="design-description">{{ t('Modern tech-focused design with innovative layouts and animations.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">Tech</span>
|
|
<span class="tag">Innovative</span>
|
|
<span class="tag">Modern</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Creative Agency -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="creative-agency">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('Creative Agency') }}</h4>
|
|
<p class="design-description">{{ t('Artistic design with creative layouts and expressive visual elements.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">Creative</span>
|
|
<span class="tag">Artistic</span>
|
|
<span class="tag">Expressive</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- E-commerce -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="design-card" data-theme="ecommerce">
|
|
<div class="design-preview">
|
|
<div class="design-header">
|
|
<div class="design-nav">
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
<div class="nav-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="design-content">
|
|
<div class="design-hero">
|
|
<div class="design-title"></div>
|
|
<div class="design-subtitle"></div>
|
|
</div>
|
|
<div class="design-features">
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
<div class="feature-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-info">
|
|
<h4 class="design-name">{{ t('E-commerce') }}</h4>
|
|
<p class="design-description">{{ t('Optimized design for online stores with product-focused layouts.') }}</p>
|
|
<div class="design-tags">
|
|
<span class="tag">E-commerce</span>
|
|
<span class="tag">Product-focused</span>
|
|
<span class="tag">Optimized</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Preview Section -->
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<div class="theme-preview-container" id="theme-preview">
|
|
<div class="theme-preview-header text-center mb-4">
|
|
<h3 class="fw-bold">{{ t('Live Preview') }}</h3>
|
|
<p class="text-muted">{{ t('Click on any design above to see a live preview of how your website could look.') }}</p>
|
|
<button class="btn btn-outline-primary" id="reset-theme">{{ t('Reset to Default') }}</button>
|
|
</div>
|
|
<div class="theme-preview-content">
|
|
<div class="mini-website" id="mini-website">
|
|
<!-- Mini Website Header -->
|
|
<header class="mini-header">
|
|
<nav class="mini-nav">
|
|
<div class="mini-brand">
|
|
<i class="fas fa-code me-2"></i>
|
|
<span>YourBrand</span>
|
|
</div>
|
|
<ul class="mini-menu">
|
|
<li><a href="#" class="mini-nav-link">Home</a></li>
|
|
<li><a href="#" class="mini-nav-link">Services</a></li>
|
|
<li><a href="#" class="mini-nav-link">About</a></li>
|
|
<li><a href="#" class="mini-nav-link">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Mini Website Hero -->
|
|
<section class="mini-hero">
|
|
<div class="mini-hero-content">
|
|
<h1 class="mini-hero-title">Welcome to Your Business</h1>
|
|
<p class="mini-hero-subtitle">Professional solutions for your success</p>
|
|
<div class="mini-hero-buttons">
|
|
<button class="mini-btn mini-btn-primary">Get Started</button>
|
|
<button class="mini-btn mini-btn-secondary">Learn More</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mini Website Features -->
|
|
<section class="mini-features">
|
|
<div class="mini-feature">
|
|
<div class="mini-feature-icon">
|
|
<i class="fas fa-rocket"></i>
|
|
</div>
|
|
<h3 class="mini-feature-title">Fast & Reliable</h3>
|
|
<p class="mini-feature-text">Lightning-fast performance and reliable service.</p>
|
|
</div>
|
|
<div class="mini-feature">
|
|
<div class="mini-feature-icon">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
<h3 class="mini-feature-title">Secure & Safe</h3>
|
|
<p class="mini-feature-text">Your data is protected with industry-leading security.</p>
|
|
</div>
|
|
<div class="mini-feature">
|
|
<div class="mini-feature-icon">
|
|
<i class="fas fa-headset"></i>
|
|
</div>
|
|
<h3 class="mini-feature-title">24/7 Support</h3>
|
|
<p class="mini-feature-text">Round-the-clock support when you need it most.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mini Website CTA -->
|
|
<section class="mini-cta">
|
|
<div class="mini-cta-content">
|
|
<h2 class="mini-cta-title">Ready to Get Started?</h2>
|
|
<p class="mini-cta-text">Join thousands of satisfied customers today.</p>
|
|
<button class="mini-btn mini-btn-primary">Contact Us</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mini Website Footer -->
|
|
<footer class="mini-footer">
|
|
<div class="mini-footer-content">
|
|
<div class="mini-footer-brand">
|
|
<i class="fas fa-code me-2"></i>
|
|
<span>YourBrand</span>
|
|
</div>
|
|
<div class="mini-footer-links">
|
|
<a href="#" class="mini-footer-link">Privacy</a>
|
|
<a href="#" class="mini-footer-link">Terms</a>
|
|
<a href="#" class="mini-footer-link">Support</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
{{ testimonials.testimonials_section(
|
|
title=t('What My Clients Say'),
|
|
subtitle=t('Don\'t just take my word for it - hear from some of the businesses I\'ve helped.'),
|
|
t=t
|
|
) }}
|
|
|
|
<!-- Call to Action -->
|
|
{{ components.cta_section(
|
|
title="Ready to Start Your Project?",
|
|
description="Let's discuss your project and create something amazing together. I offer a free consultation to understand your needs and provide a customized solution.",
|
|
button_text="Get Started",
|
|
button_url="contact",
|
|
t=t
|
|
) }}
|
|
{% endblock %} |