joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
968e64a57ef50e742a5e1c30c8b259961eb4c451
insertr/demos/dan-eden-portfolio/index.html
Joakim 12c6ec8048 Replace broken video/image references with CSS placeholders 
- Replace non-working video elements with gradient placeholders showing app previews
- Replace missing images with styled placeholder divs maintaining layout
- Add emoji icons (📱 🎤) for visual appeal without external dependencies
- Maintain responsive design and visual hierarchy
- Keep all content IDs working for Insertr enhancement (40 content elements)
- Reduce demo to 48KB total with no missing media dependencies
2025-09-17 12:28:52 +02:00

185 lines
6.9 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="_next/static/css/53b634381c30ef2d.css" />
<link rel="stylesheet" href="_next/static/css/e0f28746eee6ced7.css" />
<title>Daniel Eden, Designer</title>
<meta name="description" content="The personal site, blog, and portfolio of Daniel Eden, a designer writing and thinking about design systems."/>
<link rel="icon" href="icon.jpeg" type="image/jpeg" sizes="512x512"/>
</head>
<body>
<nav class="styles_skipLink__2dFX9">
<a href="index.html#content">Skip to content</a>
</nav>
<div class="home_root__o7QEV">
<div class="home_intro__8dWW4 undefined">
<p class="home_xxl__iX0Z1">Daniel Eden is a Product Designer at<!-- --> <a href="#meta">Meta Reality Labs</a>
, working on Avatars &amp; Identity, helping people express their full selves in the Metaverse. He spends his time<!-- --> <a href="#">writing</a>
, thinking,<!-- --> <a rel="me" href="#social">posting</a>
, and talking about Design Systems: how they scale, how they break, and the people that maintain them.</p>
</div>
<section class="styles_root__ezqfE">
<div class="styles_card__Zgiwg styles_highlight__PDTTu">
<h2>Ora</h2>
<p>An app about time for iPhone, iPad, and Apple Watch.</p>
<div>
<div class="styles_root__rUjFN" style="aspect-ratio:0.49300441826215025">
<div style="width:1339px;height:2716px;background:#f8f9fa;border:8px solid #333;border-radius:60px;position:relative;margin:0 auto;">
<div style="position:absolute;top:100px;left:100px;right:100px;bottom:100px;background:#000;border-radius:40px;overflow:hidden;"></div>
</div>
<div class="styles_children__D9Nsi" style="padding:5.925%">
<div style="width:589px;height:1278px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;font-weight:500;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);">
<div>
<div style="font-size:24px;margin-bottom:10px;">📱</div>
<div>App Preview</div>
<div style="font-size:12px;opacity:0.8;margin-top:5px;">iOS App Demo</div>
</div>
</div>
</div>
</div>
</div>
<a class="styles_button__OAX5k" href="#">Learn more →</a>
</div>
<div class="styles_card__Zgiwg styles_highlight__PDTTu">
<h2>Solstice</h2>
<p>An app about daylight for iPhone, iPad, Mac, Apple Watch, and Apple Vision Pro.</p>
<div>
<div class="styles_root__rUjFN" style="aspect-ratio:0.49300441826215025">
<div style="width:1339px;height:2716px;background:#f8f9fa;border:8px solid #333;border-radius:60px;position:relative;margin:0 auto;">
<div style="position:absolute;top:100px;left:100px;right:100px;bottom:100px;background:#000;border-radius:40px;overflow:hidden;"></div>
</div>
<div class="styles_children__D9Nsi" style="padding:5.925%">
<div style="width:589px;height:1278px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;font-weight:500;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);">
<div>
<div style="font-size:24px;margin-bottom:10px;">📱</div>
<div>App Preview</div>
<div style="font-size:12px;opacity:0.8;margin-top:5px;">iOS App Demo</div>
</div>
</div>
</div>
</div>
</div>
<a class="styles_button__OAX5k" href="#">Learn more →</a>
</div>
<div class="styles_card__Zgiwg styles_highlight__PDTTu">
<h2>Where We Can Go</h2>
<p>A<!-- --> <a href="https://www.clarityconf.com/session/where-we-can-go">conference talk</a>
<!-- -->and <a href="#">essay</a>
about design systems and design tools.</p>
<div class="styles_stretcher__vQB9_">
<div class="styles_wwcgImage__6T0vh" style="width:698px;height:707px;background:linear-gradient(45deg, #4f46e5 0%, #06b6d4 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:18px;font-weight:600;text-align:center;box-shadow:0 8px 25px rgba(79, 70, 229, 0.3);">
<div><div style="font-size:48px;margin-bottom:20px;">🎤</div><div>"Where We Can Go"</div><div style="font-size:14px;opacity:0.9;margin-top:8px;">Conference Presentation</div></div></div>
<a class="styles_button__OAX5k" href="#">Read the post →</a>
</div>
</div>
<div class="styles_card__Zgiwg styles_highlight__PDTTu">
<h2>Zeitgeist</h2>
<p>An app for <a href="https://vercel.com">Vercel</a>
developers for iPhone, iPad, and Mac.</p>
<div>
<div class="styles_root__rUjFN" style="aspect-ratio:0.49300441826215025">
<div style="width:1339px;height:2716px;background:#f8f9fa;border:8px solid #333;border-radius:60px;position:relative;margin:0 auto;">
<div style="position:absolute;top:100px;left:100px;right:100px;bottom:100px;background:#000;border-radius:40px;overflow:hidden;"></div>
</div>
<div class="styles_children__D9Nsi" style="padding:5.925%">
<div style="width:589px;height:1278px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:20px;display:flex;align-items:center;justify-content:center;color:white;font-size:16px;font-weight:500;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);">
<div>
<div style="font-size:24px;margin-bottom:10px;">📱</div>
<div>App Preview</div>
<div style="font-size:12px;opacity:0.8;margin-top:5px;">iOS App Demo</div>
</div>
</div>
</div>
</div>
</div>
<a class="styles_button__OAX5k" href="#">Learn more →</a>
</div>
</section>
<div>
<table class="styles_root__loSke">
<tbody>
<tr>
<th>2025</th>
<td>
<a href="https://ora.daneden.me">Ora</a>
<p class="small sans meta">iOS App</p>
</td>
</tr>
<tr>
<th>2021</th>
<td>
<a href="https://apps.apple.com/app/solstice/id1547580907">Solstice</a>
<p class="small sans meta">iOS App</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="https://apps.apple.com/gb/app/broadcast-just-tweet/id1574084018">Broadcast</a>
<p class="small sans meta">iOS App</p>
</td>
</tr>
<tr>
<th>2020</th>
<td>
<a href="https://apps.apple.com/app/eventually/id1532457758">Eventually</a>
<p class="small sans meta">iOS App</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="https://apps.apple.com/app/zeitgeist/id1526052028">Zeitgeist</a>
<p class="small sans meta">iOS App</p>
</td>
</tr>
<tr>
<th>2019</th>
<td>
<a href="https://www.clarityconf.com/session/where-we-can-go">Clarity 2019</a>
<p class="small sans meta">“Where We Can Go”</p>
</td>
</tr>
<tr>
<th>2018</th>
<td>
<a href="https://www.loversmagazine.com/interviews/daniel-eden">Lovers Magazine</a>
<p class="small sans meta">Interview</p>
</td>
</tr>
<tr>
<th>2016</th>
<td>
<a href="https://designdetails.fm/episodes/4f977647">Design Details</a>
<p class="small sans meta">Podcast</p>
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="https://www.youtube.com/watch?v=G_58lgdPdw8">One Day Out 2016</a>
<p class="small sans meta">“System Failure”</p>
</td>
</tr>
<tr>
<th>2015</th>
<td>
<a href="https://www.youtube.com/watch?v=zmjfh099zYg">dotCSS 2015</a>
<p class="small sans meta">“Move Slow and Fix Things”</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/$-->
<!--/$-->
<!--/$-->
<!--/$-->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink