Module 1 Project: Build a Personal Bio Page with Dynamic Content

Project Overview

Time to put your skills into action! You'll build a professional bio page that showcases everything you've learned. This isn't just another boring "About Me" page - it's a dynamic, interactive experience that changes based on time, user interaction, and server-side logic.

Your bio page will feature:

Think of this as your digital business card on steroids. Ready to impress?

Project Requirements

Core Features (Must Have)

  1. Personal Information Section
  1. Dynamic Time-Based Elements
  1. Skills Showcase
  1. Contact Information
  1. Interactive Features

Bonus Features (Nice to Have)

Technical Requirements

PHP Concepts to Implement

File Structure

bio-project/
├── index.php          # Main bio page
├── config.php         # Configuration settings
├── functions.php      # Reusable functions
├── process.php        # Form processing
├── download-vcard.php # vCard generator
├── assets/
│   ├── style.css      # Styling
│   ├── script.js      # JavaScript enhancements
│   └── images/        # Profile photo, icons
├── languages/
│   ├── en.php         # English translations
│   └── es.php         # Spanish translations
└── logs/
    └── visits.log     # Visit tracking

Code Quality Standards

Step-by-Step Development Guide

Phase 1: Setup and Configuration

Start with config.php to centralize your settings:

<?php
// Personal information
define('FULL_NAME', 'Your Name');
define('BIRTH_DATE', '1995-07-15');
define('EMAIL', '[email protected]');
define('LOCATION', 'San Francisco, CA');
define('TIMEZONE', 'America/Los_Angeles');
define('PROFESSION', 'Web Developer');

// Social media links
define('SOCIAL_LINKS', [
    'github' => 'https://github.com/yourusername',
    'linkedin' => 'https://linkedin.com/in/yourusername',
    'twitter' => 'https://twitter.com/yourusername'
]);

// Office hours (24-hour format)
define('OFFICE_START', 9);
define('OFFICE_END', 17);

Phase 2: Core Functions

Create functions.php with reusable utilities:

<?php
function calculateAge($birthDate) {
    // Calculate age from birth date
}

function getTimeBasedGreeting() {
    // Return appropriate greeting
}

function isOfficeHours() {
    // Check if currently in office hours
}

function obfuscateEmail($email) {
    // Protect email from scrapers
}

function validateSocialUrl($platform, $url) {
    // Ensure social URLs are valid
}

function incrementVisitCounter() {
    // Update visit count in cookie
}

function getRandomQuote() {
    // Return random inspirational quote
}

Phase 3: Main Page Structure

Build your index.php with proper organization:

<?php
require_once 'config.php';
require_once 'functions.php';

// Initialize variables
// Handle theme switching
// Process language selection
// Track visits

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo FULL_NAME; ?> - Personal Bio</title>
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>
    <!-- Header with greeting and theme switcher -->

    <!-- Main bio section -->

    <!-- Skills showcase -->

    <!-- Contact section -->

    <!-- Footer with visit counter -->
</body>
</html>

Phase 4: Interactive Features

Implement theme switching without page reload:

// Theme handler
if (isset($_GET['theme'])) {
    $theme = $_GET['theme'];
    setcookie('theme', $theme, time() + (86400 * 30), '/');
    header('Location: index.php');
    exit;
}

$currentTheme = $_COOKIE['theme'] ?? 'light';

Phase 5: Contact Form

Create a working contact form with validation:

// In process.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
    $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
    $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING);

    // Validate inputs
    // Send email or save to file
    // Redirect with success message
}

Phase 6: vCard Generator

Build download-vcard.php for contact downloads:

<?php
require_once 'config.php';

header('Content-Type: text/vcard');
header('Content-Disposition: attachment; filename="contact.vcf"');

echo "BEGIN:VCARD\n";
echo "VERSION:3.0\n";
echo "FN:" . FULL_NAME . "\n";
echo "EMAIL:" . EMAIL . "\n";
// Add more vCard fields
echo "END:VCARD\n";

Design Guidelines

Visual Design

Responsive Design

User Experience

Testing Checklist

Before considering your project complete:

Functionality Tests

Cross-Browser Testing

Edge Cases

Security Checks

Submission Guidelines

Your completed project should include:

  1. All PHP files properly organized
  2. Assets folder with CSS and any images
  3. README.md with:
  1. Screenshots showing:

Grading Rubric

Functionality (40%)

Code Quality (30%)

Design/UX (20%)

Creativity (10%)

Common Pitfalls to Avoid

  1. Hardcoding dates - Use PHP's date functions
  2. Storing sensitive data in cookies - Only store preferences
  3. Not escaping output - Always use htmlspecialchars()
  4. Ignoring mobile users - Test responsive design
  5. Overcomplicating - Start simple, add features gradually
  6. Not testing edge cases - What if cookies are disabled?
  7. Poor error handling - Guide users when things go wrong

Inspiration and Examples

Look at these for inspiration (but don't copy):

Remember: This is YOUR bio page. Make it reflect your personality!

Getting Help

Stuck? Try these steps:

  1. Check PHP documentation - php.net has great examples
  2. Review lesson examples - Similar code patterns exist there
  3. Break the problem down - Solve one feature at a time
  4. Use var_dump() - Debug variables to understand what's happening
  5. Test incrementally - Don't write 100 lines before testing

Extension Ideas

Once you complete the basic requirements, consider adding:

Final Tips

Ready to build something awesome? Your bio page awaits!

Project Deadline and Submission

Recommended timeline:

Remember: A working project with basic features is better than an incomplete project with ambitious goals. Start simple, iterate, and improve!

Good luck! 🚀