Luudi_110 Portfolio Website

A clean, modern, and responsive portfolio website built with PHP, showcasing services as a FiveM Scripter, 3D Asset Creator, and Web Developer.

Features

• 🎨 Dark Theme Design - Inspired by GitHub's modern interface
• 📱 Fully Responsive - Works seamlessly on all devices
• 📧 Contact Form - PHP-powered email functionality with validation
• 🎭 Smooth Animations - Scroll reveals and transition effects
• ⚡ Fast & Lightweight - Minimal dependencies, optimized performance
• 🔒 Secure - Input sanitization, rate limiting, and spam protection

File Structure

luudi110.github.io/
├── index.php           # Main portfolio page
├── contact.php         # Contact form handler
├── css/
│   └── style.css       # All styling
├── js/
│   └── script.js       # Interactive features
└── README.md           # Documentation

Installation

Requirements

• PHP 7.0 or higher
• Web server (Apache, Nginx, etc.) with PHP support
• Email server configured for PHP mail() function

Setup Steps

1. Clone or Download

   git clone https://github.com/Luudi110/luudi110.github.io.git
   cd luudi110.github.io

2. Configure Email Open contact.php and update line 3:

   $to_email = "your-email@example.com"; // Change to your email

3. Customize Content Edit index.php to update:

   • Personal information in the Hero section
   • About section details
   • Services descriptions
   • Project cards with your actual projects
   • Social media links
   • Contact information

4. Deploy

   • Upload files to your web server
   • Ensure PHP has write permissions for contact_log.txt (optional)
   • Test the contact form

Customization Guide

Changing Colors

Edit CSS variables in css/style.css:

:root {
    --bg-primary: #0d1117;      /* Main background */
    --bg-secondary: #161b22;    /* Secondary background */
    --bg-tertiary: #21262d;     /* Cards, inputs */
    --text-primary: #c9d1d9;    /* Main text */
    --text-secondary: #8b949e;  /* Secondary text */
    --accent-primary: #58a6ff;  /* Accent color */
    --accent-secondary: #1f6feb;/* Hover accent */
}

Adding Projects

In index.php, duplicate and modify a project card in the Projects section:

<div class="project-card">
    <div class="project-image">
        <img src="your-image.jpg" alt="Project Name">
        <div class="project-overlay">
            <a href="project-url" class="project-link">
                <i class="fas fa-external-link-alt"></i>
            </a>
        </div>
    </div>
    <div class="project-info">
        <h3>Your Project Title</h3>
        <p>Project description</p>
        <div class="project-tags">
            <span>Tag1</span>
            <span>Tag2</span>
        </div>
    </div>
</div>

Updating Social Links

Find and update social media links in index.php:

<div class="social-links">
    <a href="https://github.com/yourusername" target="_blank">
        <i class="fab fa-github"></i>
    </a>
    <a href="https://discord.gg/yourinvite" target="_blank">
        <i class="fab fa-discord"></i>
    </a>
    <!-- Add more links as needed -->
</div>

Modifying Services

Edit the services section in index.php to reflect your actual offerings. Each service card contains:

• Icon (Font Awesome class)
• Title
• Description
• Feature list

Contact Information

Update contact details in the Contact section of index.php:

<div class="contact-item">
    <i class="fas fa-envelope"></i>
    <div>
        <h4>Email</h4>
        <p>your-email@example.com</p>
    </div>
</div>

PHP Mail Configuration

The contact form uses PHP's mail() function. For production use:

Option 1: Use SMTP (Recommended)

Install PHPMailer:

composer require phpmailer/phpmailer

Update contact.php to use PHPMailer with your SMTP settings.

Option 2: Server Mail Configuration

Ensure your server's mail function is configured correctly:

• Linux: Configure sendmail or postfix
• Windows: Configure SMTP in php.ini
• Shared Hosting: Usually pre-configured

Testing Email

Test the contact form after deployment. Check:

1. Spam folder if emails don't arrive
2. Server error logs for PHP mail issues
3. Rate limiting (60 seconds between submissions)

Features Explained

Security Features

• Input Sanitization: Prevents XSS attacks
• Email Validation: Server-side validation
• Rate Limiting: Prevents spam (session-based)
• Spam Detection: Keyword filtering
• CSRF Protection: Can be added with tokens

Interactive Features

• Mobile Menu: Hamburger navigation for small screens
• Smooth Scrolling: Animated navigation
• Scroll Reveal: Elements animate on scroll
• Form Validation: Client-side validation before submission
• Active Nav Links: Highlights current section

Performance Optimizations

• Minimal Dependencies: Only Font Awesome CDN
• CSS Transitions: Hardware-accelerated animations
• Lazy Loading: Images load as needed (if implemented)
• Optimized CSS: Mobile-first approach

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Troubleshooting

Contact Form Not Sending

1. Check PHP mail() is enabled

   <?php echo (function_exists('mail')) ? 'Mail enabled' : 'Mail disabled'; ?>

2. Check server error logs

   tail -f /var/log/apache2/error.log

3. Test with a simple script

   <?php
   mail('test@example.com', 'Test', 'Test message');
   echo 'Email sent';
   ?>

Mobile Menu Not Working

• Ensure JavaScript is enabled
• Check browser console for errors
• Verify js/script.js is loaded correctly

Styling Issues

• Clear browser cache
• Check that css/style.css is loaded
• Verify no CSS conflicts with other stylesheets

License

This project is open source and available for personal and commercial use.

Credits

• Font Awesome - Icons
• Google Fonts - System fonts fallback
• Placeholder Images - via placeholder.com (replace with your own)

Support

For issues or questions:

• Email: contact@luudi110.com
• Discord: Luudi_110#0000
• GitHub Issues: Create an issue

Future Enhancements

Potential additions:

• Blog section
• Testimonials
• Portfolio filtering
• Dark/Light theme toggle
• Multi-language support
• Admin panel for content management
• Integration with CMS

---

Built with ❤️ by Luudi_110