PHP Web Development Website Design

To make the HTML structure I gave you look premium, we’ll use a Modern Dark Mode aesthetic. This includes high-contrast typography, subtle gradients, and “Glassmorphism” (frosted glass) effects.
Create a file named style.css and paste the following code:
/* — Variables & Reset — */
:root {
    –bg-color: #0a0a0c;
    –card-bg: rgba(255, 255, 255, 0.05);
    –accent-color: #007bff; /* PHP Blue */
    –text-main: #f0f0f0;
    –text-dim: #a0a0a0;
    –gradient: linear-gradient(135deg, #007bff, #00d4ff);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(–bg-color);
    color: var(–text-main);
    font-family: ‘Inter’, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* — Navigation — */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 10%;
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -1px;
}

.logo span {
    color: var(–accent-color);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav a {
    text-decoration: none;
    color: var(–text-dim);
    transition: color 0.3s;
    font-weight: 500;
}

nav a:hover {
    color: var(–text-main);
}

/* — Hero Section — */
.hero {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10%;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    max-width: 800px;
}

.highlight {
    background: var(–gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    color: var(–text-dim);
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2.5rem;
}

.btn {
    padding: 1rem 2.5rem;
    background: var(–gradient);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
}

/* — Projects Grid — */
.projects {
    padding: 5rem 10%;
}

.projects h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    background: var(–card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
    border-radius: 20px;
    transition: border 0.3s, transform 0.3s;
}

.card:hover {
    border-color: var(–accent-color);
    transform: scale(1.02);
}

.card h3 {
    margin-bottom: 0.5rem;
}

.tech {
    color: var(–accent-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.card p {
    color: var(–text-dim);
}

/* — Mobile Responsive — */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    nav ul { display: none; } /* Consider adding a burger menu later */
}

Key Design Features I Added:
* Glassmorphism Cards: The project cards use a subtle transparent background and a border that lights up when you hover over them.
* PHP Blue Gradient: I used a sleek blue-to-cyan gradient to reference the PHP color palette but in a modern way.
* Sticky Blur Header: The navigation bar blurs the content behind it as you scroll, a hallmark of modern UI design.
* Responsive Grid: The grid-template-columns: repeat(auto-fit…) ensures that on a phone, your projects stack vertically automatically.
A Quick Tip for Nathan:
Since you’re a PHP dev, you can make the CSS dynamic too! For example, you could use a PHP variable to change the –accent-color based on the time of day or a user’s preference.
To keep the professional look, a Skills Section should be more than just a list. We’ll use a combination of PHP-driven logic (to keep your code clean) and a “Bento Box” or grid-style layout in CSS to highlight your technical stack.
1. Updated PHP Structure (index.php)
Place this section between your Hero and Projects sections. Using an associative array in PHP allows you to add or remove skills in one place without touching the HTML tags.
<section id=”skills” class=”skills-section”>
    <h2>Technical Arsenal</h2>
    <div class=”skills-container”>
        <?php
        $skills = [
            “Backend” => [“PHP 8.x”, “Laravel”, “MySQL”, “REST APIs”],
            “Frontend” => [“HTML5/CSS3”, “JavaScript”, “Responsive Design”],
            “Tools” => [“Git/GitHub”, “Docker”, “Composer”, “Linux VPS”]
        ];

        foreach ($skills as $category => $list) {
            echo “<div class=’skill-category’>”;
            echo “<h3>$category</h3>”;
            echo “<ul>”;
            foreach ($list as $item) {
                echo “<li><span class=’dot’></span> $item</li>”;
            }
            echo “</ul>”;
            echo “</div>”;
        }
        ?>
    </div>
</section>

2. The CSS Enhancement (style.css)
Add these styles to your existing CSS file. This will create a sleek, structured look with a “glow” effect on the category headers.
/* — Skills Section — */
.skills-section {
    padding: 5rem 10%;
    background: linear-gradient(to bottom, var(–bg-color), #111116);
}

.skills-section h2 {
    text-align: center;
    margin-bottom: 4rem;
    font-size: 2.5rem;
}

.skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.skill-category {
    background: var(–card-bg);
    padding: 2rem;
    border-radius: 15px;
    border-bottom: 3px solid var(–accent-color); /* Highlight bar */
}

.skill-category h3 {
    margin-bottom: 1.5rem;
    color: var(–text-main);
    font-size: 1.4rem;
    letter-spacing: 1px;
}

.skill-category ul {
    list-style: none;
}

.skill-category li {
    margin-bottom: 0.8rem;
    color: var(–text-dim);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}

.dot {
    height: 6px;
    width: 6px;
    background-color: var(–accent-color);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(–accent-color);
}

.skill-category:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

3. Visual Layout Idea
Since you are a PHP expert, the skills section acts as your “Proof of Stack.”
Why this works for your brand:
* PHP Automation: By using the foreach loop, you demonstrate that you don’t just “write HTML”—you build systems.
* Clean Hierarchy: Separating Backend, Frontend, and Tools shows potential clients or employers that you understand the full development lifecycle.
* Visual Consistency: The blue “glow” dots match the PHP-inspired accent color we set up earlier.
An Experience Timeline is a great way to show your professional growth. Since you’re a PHP developer, we can use a PHP array to store your milestones. This makes it incredibly easy to update as your career progresses without digging through complex HTML.
1. The PHP Logic (index.php)
Place this code below your Skills section. We’ll use a simple array to hold your history and loop through it to build the vertical timeline.
<section id=”experience” class=”timeline-section”>
    <h2>My Journey</h2>
    <div class=”timeline”>
        <?php
        $experience = [
            [
                “year” => “2024 — Present”,
                “title” => “Senior PHP Developer”,
                “company” => “Freelance / Agency”,
                “desc” => “Architecting scalable backend solutions and custom API integrations.”
            ],
            [
                “year” => “2022 — 2024”,
                “title” => “Full Stack Developer”,
                “company” => “Tech Solutions Inc.”,
                “desc” => “Developed dynamic web applications using PHP, MySQL, and modern JavaScript.”
            ],
            [
                “year” => “2020 — 2022”,
                “title” => “Junior Web Dev”,
                “company” => “Startup Lab”,
                “desc” => “Learned the ropes of LAMP stack and front-end optimization.”
            ]
        ];

        foreach ($experience as $job) {
            echo “<div class=’timeline-item’>”;
            echo ”  <div class=’timeline-dot’></div>”;
            echo ”  <div class=’timeline-date’>{$job[‘year’]}</div>”;
            echo ”  <div class=’timeline-content’>”;
            echo ”    <h3>{$job[‘title’]}</h3>”;
            echo ”    <h4>{$job[‘company’]}</h4>”;
            echo ”    <p>{$job[‘desc’]}</p>”;
            echo ”  </div>”;
            echo “</div>”;
        }
        ?>
    </div>
</section>

2. The CSS Styling (style.css)
This CSS creates a vertical line (the “spine”) and positions your milestones along it.
/* — Timeline Section — */
.timeline-section {
    padding: 8rem 10%;
}

.timeline-section h2 {
    text-align: center;
    margin-bottom: 5rem;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* The Vertical Line */
.timeline::after {
    content: ”;
    position: absolute;
    width: 2px;
    background: var(–card-bg);
    top: 0;
    bottom: 0;
    left: 20px; /* Aligned to the left for mobile-friendly design */
}

.timeline-item {
    padding: 0 0 3rem 50px;
    position: relative;
}

/* The Glowing Dot */
.timeline-dot {
    position: absolute;
    left: 11px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: var(–bg-color);
    border: 3px solid var(–accent-color);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px var(–accent-color);
}

.timeline-date {
    color: var(–accent-color);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.timeline-content {
    background: var(–card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.timeline-content:hover {
    border-left: 4px solid var(–accent-color);
    background: rgba(255, 255, 255, 0.08);
}

.timeline-content h3 {
    margin-bottom: 0.2rem;
}

.timeline-content h4 {
    color: var(–text-dim);
    font-weight: 400;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.timeline-content p {
    color: var(–text-dim);
    font-size: 0.95rem;
}

/* Adjustments for larger screens */
@media (min-width: 768px) {
    /* Optional: You could center the line and zigzag items here */
}

Why this design works for Nathan Legakis:
* Logical Flow: The “glowing spine” guides the user’s eye downward through your history.
* Interactivity: The timeline-content:hover effect gives a nice tactile feel, letting visitors know the site is “alive.”
* Maintenance: If you get a new job or complete a major project, you just add one line to your $experience array in PHP, and the entire UI updates itself.
Would you like to wrap this up with a PHP-powered contact form that actually sends emails, or perhaps a “Live Server Status” footer to