PHP Parallax Scrolling Portfolio
Create a stunning single-page portfolio with parallax scrolling effects, smooth animations, and PHP-templated sections.
PHPCSSParallaxAnimationPortfolio
Overview
Build a visually impressive single-page portfolio with multi-layer parallax scrolling, fade-in animations on scroll, and PHP-powered dynamic content.
index.php
php
<?php
$skills = [
['name' => 'PHP', 'level' => 90],
['name' => 'JavaScript', 'level' => 85],
['name' => 'CSS/SASS', 'level' => 92],
['name' => 'MySQL', 'level' => 80],
];
$projects = [
['title' => 'E-Commerce Platform', 'desc' => 'Full-stack shopping experience', 'color' => '#6c63ff'],
['title' => 'Social Dashboard', 'desc' => 'Analytics and insights', 'color' => '#ff6b6b'],
['title' => 'Weather App', 'desc' => 'Real-time forecasting', 'color' => '#48dbfb'],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; color: #fff; overflow-x: hidden; }
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); text-align: center; }
.hero h1 { font-size: 4rem; }
.hero p { font-size: 1.3rem; opacity: 0.75; margin-top: 1rem; }
section { padding: 5rem 2rem; background: #0a0a23; }
.fade-in { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.skill-bar { background: #1a1a3e; border-radius: 8px; margin: 0.8rem 0; overflow: hidden; }
.skill-fill { height: 30px; border-radius: 8px; display: flex; align-items: center; padding-left: 12px; font-size: 0.85rem; transition: width 1.5s ease; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }
.project-card { padding: 2rem; border-radius: 16px; transition: transform 0.3s; }
.project-card:hover { transform: translateY(-8px); }
</style>
</head>
<body>
<div class="hero">
<div><h1>John Developer</h1><p>Full-Stack PHP Developer & Designer</p></div>
</div>
<section>
<div class="fade-in">
<h2 style="text-align:center;font-size:2.5rem;margin-bottom:2rem">Skills</h2>
<?php foreach ($skills as $skill): ?>
<div class="skill-bar">
<div class="skill-fill" data-width="<?= $skill['level'] ?>%" style="width:0;background:linear-gradient(90deg,#6c63ff,#48dbfb)">
<?= $skill['name'] ?> — <?= $skill['level'] ?>%
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<section style="background:#111">
<div class="fade-in">
<h2 style="text-align:center;font-size:2.5rem;margin-bottom:1rem">Projects</h2>
<div class="projects-grid">
<?php foreach ($projects as $p): ?>
<div class="project-card" style="background:<?= $p['color'] ?>22;border:1px solid <?= $p['color'] ?>44">
<h3 style="color:<?= $p['color'] ?>"><?= $p['title'] ?></h3>
<p style="opacity:0.7;margin-top:0.5rem"><?= $p['desc'] ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<script>
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); e.target.querySelectorAll('.skill-fill').forEach(bar => { bar.style.width = bar.dataset.width; }); } });
}, { threshold: 0.15 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
</body>
</html>Technologies
- PHP — dynamic content rendering - CSS — parallax scrolling, fade animations, skill bars - Intersection Observer API — scroll-triggered animations
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!