PaperPixel Template

📊 XP Progress / Skill Bars

What it does: The colored progress bar that automatically "fills up" when a visitor scrolls down to it, representing your skill level or experience points (XP).

Where to find the files:

• Visual style: assets/css/pixel-theme.css (search for .xp-bar)
• Action script: assets/js/modules/xp-bar.js

How to change the percentage (Adjust Skill):

1. Open the HTML file where you want to change the skill percentage (for example, about.html or index.html).
2. Search for the code containing data-xp-value, for example:
   <div class="xp-bar__fill xp-bar__fill--green" data-xp-value="95"></div>
3. Change the number 95 inside data-xp-value="..." to any percentage number you want between 0 and 100 (e.g., data-xp-value="80" for 80% full).
4. Save the file and refresh your browser. The bar will automatically fill to that new percentage value when you scroll down to it!

How to change the label text:

1. Open the HTML file (e.g., about.html).
2. Locate the level text, e.g., <span class="xp-bar__level pixel-text">HTML / CSS</span>.
3. Change HTML / CSS to whatever skill title you want (like PHOTOSHOP or WRITING).
4. To change the sub-label, find the text 9,500 / 10,000 XP (or LVL 99) and replace it with any numbers or text you want.

How to turn it OFF completely:
Open assets/js/main.js in any editor, find the line that says initXpBars(); and type two forward slashes in front of it like this: // initXpBars();. Save the file. The skill bars will still appear on the page but will stay static without animating.

🔊 Retro Click Sound Effects

What it does: Plays a soft, classic 8-bit arcade click sound wave whenever a visitor clicks on buttons, links, polaroid cards, or decoration elements.

Where to find the files:

• Action script: assets/js/modules/sound.js

How it works for visitors:
Sound is muted by default so it does not disturb people. A visitor can click the speaker button (🔇 / 🔊) in the top-right corner to turn sounds on or off. The site remembers their choice.

How to turn it OFF completely:
Open assets/js/main.js, find the line that says initSound(); and type two forward slashes in front of it: // initSound();. The sound icon will disappear from the header, and no clicks will play sounds.

🎵 8-bit Music Sequencer Player

What it does: A mini music player box on the About page that synthesizes a looping retro background melody when clicked.

Where to find the files:

• Action script: assets/js/modules/music-player.js

How to change the melody (tune notes):

1. Open the file assets/js/modules/music-player.js.
2. Look for the line that says:
   const melody = [659.25, 830.61, 987.77, 880.00, 830.61, 739.99, 659.25, 622.25];
3. These numbers are sound frequencies in Hertz (Hz). You can replace them with different numbers to change the notes (for example, 440.00 is note A4, 523.25 is note C5, and 261.63 is note C4).
4. You can add more numbers to make the tune longer or remove numbers to make it shorter. Save the file and reload the about page to listen to your custom tune.

How to turn it OFF completely:
Open assets/js/main.js, find the line initMusicPlayer(); and comment it out: // initMusicPlayer();.

📌 Draggable Scrapbook Stickers

What it does: Allows visitors to click-and-drag or tap-and-drag sticker badges, notes, and polaroids anywhere on the screen.

Where to find the files:

• Action script: assets/js/modules/draggable.js

How to make any element draggable:
Simply add the class name draggable-sticker to any HTML element, for example:
<div class="draggable-sticker">⭐</div>.
That item will now be instantly draggable by touch screen or mouse pointer!

How to turn it OFF completely:
Open assets/js/main.js, find the line initDraggable(); and comment it out: // initDraggable();.

🌙 Dark / Light Theme Mode

What it does: Allows visitors to toggle the website theme between Chalkboard Dark mode and Cream Light mode. It remembers their choice using browser cookies (localStorage).

Where to find the files:

• Visual styles: assets/css/dark-mode.css
• Action script: assets/js/modules/theme-toggle.js

How to turn it OFF completely:
Open assets/js/main.js, find initThemeToggle(); and comment it out: // initThemeToggle();. Also remove the button with the ID theme-toggle-btn from the header in your HTML files.

📈 Animated Statistics Counters

What it does: Automatically counts up numbers from zero to your target statistical value with a smooth retro animation once the counter element is scrolled into view.

Where to find the files:

• Action script: assets/js/modules/counter.js

How to customize statistics values:

1. Open the HTML file containing the counters (like about.html).
2. Find the code block with class="stat-counter", e.g.:
   <div class="stat-counter" data-target="15" data-suffix="+" data-prefix="">
3. Change data-target="15" to whatever number you want the counter to reach.
4. Change data-prefix or data-suffix to add symbols (like $, %, +) before or after the number.

How to turn it OFF completely:
Open assets/js/main.js, find initCounters(); and comment it out: // initCounters();.

📂 Portfolio Filtering & Modal Popup

What it does: Handles the category filter tabs on the portfolio page, and opens a pop-up description screen (Modal) when you click a project.

Where to find the files:

• Action script: assets/js/modules/portfolio.js

How to add a new project and connect the modal details:

1. Open portfolio.html.
2. Copy an existing project card container (with the class portfolio-item).
3. Look for the button tag inside it:
   <button class="project-card-btn" data-title="..." data-tech="..." data-desc="..." data-img="...">
4. Simply replace the attributes:
   • data-title: Your project's name.
   • data-tech: List of technologies used (like HTML, CSS, React).
   • data-desc: The description paragraph shown inside the popup modal.
   • data-img: The path to the preview screenshot image.
5. Save the file. The popup modal will automatically show these custom texts and images when clicked!

How to turn it OFF completely:
Open assets/js/main.js, find initPortfolio(); and comment it out: // initPortfolio();.

✉️ Contact Form Auto-Fill & Spam Shield

What it does: Detects if a user chose a pricing plan tier, pre-fills the message box with a relevant request, validates inputs, and filters out malicious bots using a hidden input filter (Honeypot field).

Where to find the files:

• Action script: assets/js/modules/form.js

How it protects your mailbox from spam bots:
The contact form has a hidden field that human visitors cannot see, but automatic spam bots will try to fill out. If the form is submitted with this hidden field filled, it prevents the message from being sent, filtering out spam silently.

How to turn it OFF completely:
Open assets/js/main.js, find initForm(); and comment it out: // initForm();.