Alex Portfolio Template

Introduction

Thank you for purchasing the Alex Portfolio Template! This is a modern, responsive personal portfolio template built with HTML5, CSS3, and vanilla JavaScript. Perfect for designers, developers, and creative professionals.

Features Include:

• Clean, modern design
• Fully responsive layout
• Dark/Light mode toggle
• Smooth animations & transitions
• Contact form with validation
• Portfolio filtering
• SEO optimized
• Cross-browser compatible

Installation

Quick Start

1. Extract the downloaded ZIP file
2. Open the folder in your code editor
3. Open index.html in a web browser

Using a Local Server

For the best development experience, use a local server:

# Using VS Code Live Server extension
# Or with Python:
python -m http.server 8000

# Or with npm:
npx serve

File Structure

Customization

Changing Colors

Open css/style.css and modify the CSS custom properties:

:root {
    --primary: #7C3AED;      /* Main accent color */
    --primary-dark: #5B21B6; /* Darker shade */
    --primary-light: #A78BFA; /* Lighter shade */
}

Changing Fonts

The template uses Google Fonts (Inter & Outfit). To change:

1. Visit Google Fonts
2. Select your fonts
3. Replace the link in the HTML <head>
4. Update the font-family in CSS

Typing Animation Words

Edit the words array in js/main.js:

const words = [
    'Full Stack Web Designer',
    'Web Developer',
    'UI/UX Designer',
    // Add your own titles here
];

Contact Info

Update contact details in all HTML files:

• Phone number
• Email address
• Location
• Social media links

Features

Dark/Light Mode

The theme toggle saves preference to localStorage. Users' choice persists across page loads.

Portfolio Filter

On portfolio.html, items are filtered using the data-category attribute:

<div class="portfolio-card" data-category="web">
    ...
</div>

Contact Form

The form includes client-side validation. For actual form submission, integrate with:

• Formspree
• Netlify Forms
• EmailJS
• Your own backend

Animations

Elements animate on scroll using Intersection Observer. Add these classes:

Support

If you have questions or need help:

• Review this documentation
• Check the code comments
• Contact support via the marketplace