| Server IP : 167.235.67.158 / Your IP : 216.73.217.114 Web Server : Apache System : Linux ubuntu-8gb-nbg1-1 6.8.0-111-generic #111-Ubuntu SMP PREEMPT_DYNAMIC Sat Apr 11 23:16:02 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/iwillruhl/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iwillruhl Motion Designer</title>
<!-- Open Graph / LinkedIn preview -->
<meta property="og:type" content="website">
<meta property="og:title" content="iwillruhl Motion Designer">
<meta property="og:description" content="Animation & Motion Design Showreel">
<meta property="og:image" content="Thumbnail.png">
<meta property="og:url" content="">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="Thumbnail.png">
<link rel="icon" type="image/png" href="favicon-black.png">
<link rel="stylesheet" href="styles.css?v=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet">
</head>
<body>
<!-- Navigation - Cub style minimal -->
<nav class="navbar">
<div class="nav-container">
<a href="#home" class="logo">
<img src="Icon.png" alt="iwillruhl">
</a>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="showreel.html">Showreel</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="hamburger" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero - Full-screen showreel background with button -->
<section id="home" class="hero">
<div class="hero-background hero-showreel-bg">
<iframe src="https://player.vimeo.com/video/1033843967?autoplay=1&loop=1&muted=1&background=1&controls=0"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="hero-overlay"></div>
<div class="hero-cta">
<a href="showreel.html" class="hero-showreel-btn">Animation Showreel</a>
</div>
<div class="scroll-prompt">
<span>Scroll</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</section>
<!-- Category Section: Explainer -->
<section id="work" class="category-section category-explainer">
<div class="container">
<div class="category-intro">
<h2 class="category-heading">
I create <em>explainer</em> animations for brands, educators, and organisations.
</h2>
<div class="click-prompt">
<span>Click to view work</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="project-showcase">
<a href="#" class="project-link" data-project="1">
<h3 class="project-name">Cambridge Little Steps</h3>
</a>
<a href="#" class="project-link" data-project="6">
<h3 class="project-name">Deloitte Explainer Videos</h3>
</a>
<a href="#" class="project-link" data-project="5">
<h3 class="project-name">Cambridge Dictionary</h3>
</a>
</div>
</div>
</section>
<!-- Category Section: Branding -->
<section class="category-section category-branding">
<div class="container">
<div class="category-intro">
<h2 class="category-heading">
I craft <em>branding</em> and motion graphics that bring identities to life.
</h2>
<div class="click-prompt">
<span>Click to view work</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="project-showcase">
<a href="#" class="project-link" data-project="4">
<h3 class="project-name">Seed Creativity</h3>
</a>
</div>
</div>
</section>
<!-- Category Section: Product & Tech -->
<section class="category-section category-product">
<div class="container">
<div class="category-intro">
<h2 class="category-heading">
I create impactful <em>product</em> showcases and tech visuals.
</h2>
<div class="click-prompt">
<span>Click to view work</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="project-showcase">
<a href="#" class="project-link" data-project="2">
<h3 class="project-name">Nokia's Automation Explained Series</h3>
</a>
</div>
</div>
</section>
<!-- Category Section: Interactive -->
<section class="category-section category-interactive">
<div class="container">
<div class="category-intro">
<h2 class="category-heading">
My approach to <em>interactive</em> animation combines storytelling with engaging visuals.
</h2>
<div class="click-prompt">
<span>Click to view work</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="project-showcase">
<a href="#" class="project-link" data-project="3">
<h3 class="project-name">National Space Centre</h3>
</a>
</div>
</div>
</section>
<!-- Featured Work Grid (all projects) -->
<section id="all-work" class="work-section">
<div class="container">
<h2 class="work-section-title">All Work</h2>
<div class="work-grid">
<div class="work-item" data-project="1">
<div class="work-image">
<img src="https://img.youtube.com/vi/pMp9ExdeH8w/maxresdefault.jpg" alt="Cambridge Little Steps"
class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">Cambridge Little Steps</h3>
<p class="work-category">Explainer video</p>
</div>
</div>
</div>
<div class="work-item" data-project="6">
<div class="work-image">
<img src="https://img.youtube.com/vi/KyQsN8TiLU4/maxresdefault.jpg"
alt="Deloitte Explainer Videos" class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">Deloitte Explainer Videos</h3>
<p class="work-category">Explainer Videos</p>
</div>
</div>
</div>
<div class="work-item" data-project="3">
<div class="work-image">
<img src="https://img.youtube.com/vi/1inS6FbVYBE/maxresdefault.jpg" alt="National Space Centre"
class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">National Space Centre</h3>
<p class="work-category">Interactive Animation</p>
</div>
</div>
</div>
<div class="work-item" data-project="4">
<div class="work-image">
<img src="motion-thumbnail.png" alt="Seed Creativity" class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">Seed Creativity</h3>
<p class="work-category">Branding and Motion Graphics</p>
</div>
</div>
</div>
<div class="work-item" data-project="5">
<div class="work-image">
<img src="Cambridge-thumbnail.png" alt="Cambridge Dictionary" class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">Cambridge Dictionary</h3>
<p class="work-category">Graphic & Motion Design</p>
</div>
</div>
</div>
<div class="work-item" data-project="2">
<div class="work-image">
<img src="Nokia-thumbnail.png" alt="Nokia's Automation Explained Series" class="work-thumbnail">
<div class="work-overlay">
<h3 class="work-title">Nokia's Automation Explained Series</h3>
<p class="work-category">Motion Graphics, Video Editing</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="about-content">
<div class="about-image">
<img src="picofme.jpg" alt="Profile picture">
</div>
<div class="about-text">
<h2 class="about-heading">About Me</h2>
<p class="lead">I'm a Worcester, UK based Motion Graphic Designer with 10 years of experience
working across 2D animation, logo idents, branding, explainer content and video editing.</p>
<div class="skills">
<div class="skill-tag">Adobe After Effects</div>
<div class="skill-tag">Adobe Premiere Pro</div>
<div class="skill-tag">Adobe Illustrator</div>
<div class="skill-tag">Adobe Photoshop</div>
<div class="skill-tag">Figma</div>
<div class="skill-tag">Lottie</div>
<div class="skill-tag">RIVE</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<h2 class="contact-heading">Get In Touch</h2>
<p class="contact-intro">Interested in collaborating? Let's talk.</p>
<div class="contact-methods">
<a href="mailto:will@iwillruhl.com" class="contact-link">will@iwillruhl.com</a>
<a href="https://www.linkedin.com/in/iwillruhl/" target="_blank" rel="noopener"
class="contact-link">LinkedIn</a>
</div>
</div>
</section>
<!-- Footer - Cub style -->
<footer class="footer">
<div class="footer-container">
<div class="footer-brand">
<img src="Icon.png" alt="iwillruhl" class="footer-logo">
</div>
<div class="footer-content">
<div class="footer-contact">
<p>Worcester, England, UK</p>
<a href="mailto:will@iwillruhl.com">will@iwillruhl.com</a>
</div>
<div class="footer-links">
<a href="showreel.html">Animation Showreel</a>
<a href="#work">Portfolio</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<p class="footer-copy">© 2026 Motion Designer Portfolio. All rights reserved.</p>
</div>
</footer>
<!-- Project Modal -->
<div class="project-modal" id="projectModal">
<div class="modal-overlay"></div>
<div class="modal-container">
<button class="modal-close" aria-label="Close modal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<div class="modal-content">
<div class="modal-header">
<span class="project-category">Brand Animation</span>
<h1 class="project-title">Project Title</h1>
<p class="project-client">Client: Client Name</p>
</div>
<div class="modal-media">
<div class="media-container">
<div class="media-placeholder">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none">
<path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
</svg>
<p>Add your project video or image here</p>
</div>
</div>
</div>
<div class="modal-details">
<div class="details-grid">
<div class="details-main">
<div class="detail-section">
<h2>Overview</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="detail-section">
<h2>The Challenge</h2>
<p>Describe the challenges and goals for this project.</p>
</div>
<div class="detail-section">
<h2>My Approach</h2>
<p>Explain your creative process and techniques.</p>
</div>
<div class="detail-section">
<h2>The Result</h2>
<p>Share the outcome and impact of the project.</p>
</div>
</div>
<div class="details-sidebar">
<div class="sidebar-section">
<h3>Services</h3>
<ul class="services-list"></ul>
</div>
<div class="sidebar-section">
<h3>Tools Used</h3>
<ul class="tools-list"></ul>
</div>
<div class="sidebar-section">
<h3>Year</h3>
<p>-</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="script.js?v=1"></script>
</body>
</html>