Portfolio Pro Documentation

Requirements

Portfolio Pro has minimal requirements and will work on virtually any web hosting service:

• Any web hosting service that supports HTML, CSS, and JavaScript
• No database required
• No PHP or server-side scripting required
• Modern web browser for viewing (Chrome, Firefox, Safari, Edge)

Upload Process

// Example directory structure after upload
public_html/
├── index.html
├── data.json
├── assets/
│   ├── css/
│   ├── js/
│   ├── images/
│   └── icons/
└── control_panel/

Folder Structure

Understanding the folder structure will help you navigate and customize your portfolio website:

demo1/ (or demo2/, demo3/, etc.)
├── index.html              # Main HTML file
├── data.json               # Content data file
├── assets/
│   ├── css/                # CSS stylesheets
│   │   ├── main.css        # Main stylesheet
│   │   └── theme-toggle.css # Light/dark mode styles
│   ├── js/                 # JavaScript files
│   │   ├── main.js         # Main functionality
│   │   └── animations.js   # Animation scripts
│   ├── images/             # Image files
│   └── icons/              # Icon files
└── control_panel/          # Control panel files
    ├── control_panel.html  # Control panel interface
    └── assets/             # Control panel assets

Accessing the Control Panel

1

Navigate to the Control Panel URL

Access the control panel by navigating to your-website.com/control_panel/control_panel.html in your web browser.

2

Enter Your Password

Enter your control panel password. The default password is 123456.

3

Access the Dashboard

After successful login, you'll be taken to the control panel dashboard where you can manage all aspects of your portfolio.

General Settings

The General Settings section allows you to update basic information about your portfolio:

Content Management

The control panel allows you to manage all content sections of your portfolio:

About Section

Update your profile image and bio text. For the bio, you can use \n to create new paragraphs.

Experience Section

Add, edit, or remove work experience entries. Each entry includes a job title, dates, and description.

Skills & Languages

Update your technical skills and languages spoken using comma-separated lists.

Contact Information

Update your contact information and social media links.

Managing Projects

The Projects section allows you to showcase your work:

Security Settings

The Security section allows you to change your control panel password:

CSS Customization

To customize the visual appearance of your portfolio, you can edit the CSS files:

assets/css/main.css       # Main stylesheet for layout and design
assets/css/theme-toggle.css # Styles for light/dark mode toggle

Here are some common CSS customizations:

/* Changing the primary color */
:root {
    --color-accent: #00c8ff; /* Change to your preferred color */
}

/* Adjusting font sizes */
.hero-title {
    font-size: 3.5rem; /* Adjust as needed */
}

/* Modifying spacing */
.section {
    padding: 6rem 0; /* Adjust top/bottom padding */
}

JavaScript Customization

To modify the functionality of your portfolio, you can edit the JavaScript files:

assets/js/main.js       # Main functionality and content loading
assets/js/animations.js # Animation effects and interactions

Here are some common JavaScript customizations:

// Adding a custom animation
document.addEventListener("DOMContentLoaded", () => {
    // Select the element to animate
    const element = document.querySelector('.your-element');
    
    // Create animation
    gsap.from(element, {
        opacity: 0,
        y: 30,
        duration: 0.8,
        ease: "power3.out"
    });
});

Images & Media

To customize images and media:

1. Place your image files in the assets/images/ directory
2. Place your icon files in the assets/icons/ directory
3. Reference them in the control panel or directly in the HTML/CSS files