Portfolio Website

Introduction

This documentation provides a comprehensive guide to the Portfolio Website template. It explains how to customize the website, add your own content, and make basic modifications to suit your needs.

Table of Contents

• Introduction
  • Table of Contents
  • File Structure
  • Customizing Content
    • Basic Information
    • Navigation
    • Adding Projects
    • Modifying Skills
  • Contact Form Setup
  • Theme Customization
    • Colors
    • Dark Mode
  • Responsive Design
  • Troubleshooting
    • Images Not Loading
    • Contact Form Not Working
    • Animation Issues

File Structure

The website has the following main files and directories:

• src/index.php - The main PHP (HTML) file containing the website structure
• src/assets/css/styles.css - CSS styles for the website
• src/assets/js/scripts.js - JavaScript functionality
• src/assets/portfolio.json - JSON file containing portfolio projects data
• src/assets/skills.json - JSON file containing skills data
• src/contact-process.php - PHP script for processing contact form submissions
• src/assets/images/ - Directory for storing images

Customizing Content

Basic Information

To customize the basic information on the website:

1. Open src/index.php
2. Update the following sections:
   • Title and meta tags (lines 8-36)
   • Hero section content (lines 180-190)
   • About section content (lines 280-290)
   • Footer copyright information (line 1197)

The year in the footer is automatically updated to the current year using JavaScript.

Navigation

To modify the navigation menu:

1. Desktop navigation is located around line 70
2. Mobile navigation is located around line 150
3. Update the links and text as needed

Adding Projects

Projects are managed through the portfolio.json file:

1. Open src/assets/portfolio.json
2. Each project follows this structure:

   {
     "id": "unique-project-id",
     "title": "Project Title",
     "description": "Detailed description of the project.",
     "images": ["./assets/images/project1.jpg", "./assets/images/project1.jpg"]
   }

3. To add a new project:
   • Create a new JSON object following the structure above
   • Add it to the array in portfolio.json
   • Place the project images in the src/assets/images/ directory

The projects will automatically appear in the Portfolio section of the website.

Modifying Skills

Skills are managed through the skills.json file:

1. Open src/assets/skills.json
2. Each skill follows this structure:

   {
     "name": "Skill Name",
     "percentage": 75
   }

3. To add or modify skills:
   • Update the name and percentage values
   • The percentage determines the fill of the circular progress indicator

Contact Form Setup

The contact form sends messages to a Discord webhook:

1. Open src/contact-process.php
2. Update the Discord webhook URL on line 13:

   $DISCORD_WEBHOOK_URL = 'your-discord-webhook-url';

3. Customize the form fields in index.php if needed (around line 580)

The form collects Discord username, subject, and message, then sends them to the specified Discord channel.

Theme Customization

Colors

The website uses a color scheme defined in Tailwind CSS classes:

1. Primary colors: Classes with primary-400, primary-500, etc.
2. Accent colors: Classes with accent-400, accent-500, etc.
3. Dark/light mode is toggled with the theme button in the navigation

Dark Mode

The website supports automatic dark mode detection and manual toggling:

1. Dark mode preferences are saved in localStorage
2. The toggle functionality is in scripts.js (around line 30)

Responsive Design

The website is fully responsive with different layouts for:

1. Mobile devices (< 768px)
2. Tablets (768px - 1024px)
3. Desktop (> 1024px)

Responsive behavior is handled through Tailwind CSS classes and some JavaScript adjustments in scripts.js.

Troubleshooting

Images Not Loading

1. Check that image paths in portfolio.json are correct
2. Verify that images exist in the specified directory
3. Check browser console for 404 errors

Contact Form Not Working

1. Verify the Discord webhook URL is correct
2. Check server logs for PHP errors
3. Ensure the server supports PHP
4. Test the webhook URL directly

Animation Issues

If animations aren’t working:

1. Check that Motion.js is properly loaded
2. Verify browser compatibility
3. Check browser console for JavaScript errors