VisionPro Portfolio Template

Welcome to the VisionPro portfolio template! This is an exceptionally premium, high-performance, single-page portfolio designed for product designers, developers, and creatives. It is built purely with HTML5, Tailwind CSS (via CDN), and Vanilla JavaScript, requiring zero build tools, node modules, or server setups.

📑 Table of Contents

Features

Quick Start

Structure & Sections

Customization Guide

License & Attribution (REQUIRED)

✨ Features

Zero Dependencies: Runs directly in any modern browser. No npm install required.

Tailwind CSS Integration: Uses Tailwind via CDN with a fully customized theme block for easy color and typography management.

Vanilla JavaScript: Smooth scrolling, scroll reveals (Intersection Observer), dynamic portfolio filtering, and animated counters without heavy libraries.

Premium Typography: Integrates Google Fonts (Sora, Inter, JetBrains Mono).

Responsive Design: Flawlessly adapts to mobile, tablet, and desktop screens.

Accessible: Uses semantic HTML and contrast-compliant colors.

🚀 Quick Start

Download or save the index.html file.

Double-click the file to open it in your preferred web browser.

Edit the content directly in any text editor (VS Code, Sublime, Notepad, etc.).

🏗️ Structure & Sections

The index.html file is logically divided into semantic HTML tags:

<header id="header">: Sticky navigation bar with a mobile hamburger menu.

<section id="hero">: The main landing area with your name, title, call-to-action, and profile image.

<section id="about">: Your biography, location status, and education history.

<section> (Technical Proficiency): Visual progress bars for your tech stack.

<section id="services">: Grid layout detailing the services you offer.

<section id="portfolio">: Filterable masonry-style grid for your projects.

<section> (Testimonials): A Swiper.js powered carousel for client reviews.

<section id="contact">: Contact information and a simulated form.

<footer>: Footer links, social icons, and the required attribution.

🎨 Customization Guide

1. Changing the Color Palette

The colors are managed in the <script> tag inside the <head> where Tailwind is configured. To change the current green palette, modify the hex codes under colors: { vp: { ... } }:

colors: {
    vp: {
        bg: '#FFFFFF',
        sec: '#E6F2DD',      // Background secondary
        primary: '#659287',  // Main accent color
        secondary: '#88BDA4',// Secondary accent
        accent: '#B1D3B9',   // Tertiary/Borders
        heading: '#1A2E29',  // Text heading
        body: '#4A5D58',     // Text body
        border: '#B1D3B9',
    }
}


2. Updating the Portfolio

To add a new project, copy one of the <div class="portfolio-item"> blocks.

Change the data-category attribute (e.g., "web", "app", "design") to dictate how it is filtered.

Update the <img src="..."> with your project screenshot.

3. Contact Form Submission

By default, the contact form includes a front-end simulation showing a loading spinner and a success message. To make it functional, you will need to point the <form> action attribute to a backend service like Formspree, Netlify Forms, or a custom PHP/Node backend.

