Optimize dan-eden-portfolio demo for production use
- Remove all Next.js JavaScript framework dependencies (~1.9MB) - Strip social media tracking and analytics scripts - Preserve visual design with essential CSS files only (24KB) - Keep video elements with local file references instead of external Mux streams - Reduce HTML from 30KB minified to 5.5KB formatted (82% reduction) - Maintain responsive design and content structure for realistic demo - Ensure compatibility with Insertr content editing system
This commit is contained in:
@@ -1,180 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Daniel Eden, Designer - Portfolio Demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.intro {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.projects {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.project {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.project h3 {
|
||||
margin-top: 0;
|
||||
color: #2563eb;
|
||||
}
|
||||
.timeline {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.timeline-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.year {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
min-width: 60px;
|
||||
}
|
||||
.event {
|
||||
flex: 1;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.event a {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
.event a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.meta {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Daniel Eden, Designer</h1>
|
||||
<p class="intro">A Product Designer at Meta Reality Labs, working on Avatars & Identity, helping people express their full selves in the Metaverse. Passionate about Design Systems: how they scale, how they break, and the people that maintain them.</p>
|
||||
</header>
|
||||
|
||||
<section class="projects">
|
||||
<div class="project">
|
||||
<h3>Ora</h3>
|
||||
<p>An app about time for iPhone, iPad, and Apple Watch. Clean, minimal interface for tracking time zones and world clocks.</p>
|
||||
<a href="https://ora.daneden.me">Learn more →</a>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<h3>Solstice</h3>
|
||||
<p>An app about daylight for iPhone, iPad, Mac, Apple Watch, and Apple Vision Pro. Beautiful visualizations of sunrise, sunset, and daylight hours.</p>
|
||||
<a href="https://apps.apple.com/app/solstice/id1547580907">Learn more →</a>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<h3>Where We Can Go</h3>
|
||||
<p>A conference talk and essay about design systems and design tools. Exploring the future of design tooling and systematic design.</p>
|
||||
<a href="https://daneden.me/blog/2019/where-we-can-go">Read the post →</a>
|
||||
</div>
|
||||
|
||||
<div class="project">
|
||||
<h3>Zeitgeist</h3>
|
||||
<p>An app for Vercel developers for iPhone, iPad, and Mac. Monitor deployments, manage projects, and stay connected to your development workflow.</p>
|
||||
<a href="https://apps.apple.com/app/zeitgeist/id1526052028">Learn more →</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="timeline">
|
||||
<h2>Timeline</h2>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year">2025</div>
|
||||
<div class="event">
|
||||
<a href="https://ora.daneden.me">Ora</a>
|
||||
<div class="meta">iOS App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year">2021</div>
|
||||
<div class="event">
|
||||
<a href="https://apps.apple.com/app/solstice/id1547580907">Solstice</a>
|
||||
<div class="meta">iOS App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year"></div>
|
||||
<div class="event">
|
||||
<a href="https://apps.apple.com/gb/app/broadcast-just-tweet/id1574084018">Broadcast</a>
|
||||
<div class="meta">iOS App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year">2020</div>
|
||||
<div class="event">
|
||||
<a href="https://apps.apple.com/app/eventually/id1532457758">Eventually</a>
|
||||
<div class="meta">iOS App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year"></div>
|
||||
<div class="event">
|
||||
<a href="https://apps.apple.com/app/zeitgeist/id1526052028">Zeitgeist</a>
|
||||
<div class="meta">iOS App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year">2019</div>
|
||||
<div class="event">
|
||||
<a href="https://www.clarityconf.com/session/where-we-can-go">Clarity 2019</a>
|
||||
<div class="meta">"Where We Can Go"</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item">
|
||||
<div class="year">2018</div>
|
||||
<div class="event">
|
||||
<a href="https://www.loversmagazine.com/interviews/daniel-eden">Lovers Magazine</a>
|
||||
<div class="meta">Interview</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<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 & 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">
|
||||
<img alt="" width="1339" height="2716" class="styles_bezel___vGQl" style="color:transparent" src="placeholder-image.jpg"/>
|
||||
<div class="styles_children__D9Nsi" style="padding:5.925%">
|
||||
<figure>
|
||||
<video src="demo-video.mp4" autoPlay="" playsInline="" loop="" width="589" height="1278" poster="demo-poster.jpg" muted="" preload="auto">
|
||||
</video>
|
||||
</figure>
|
||||
</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">
|
||||
<img alt="" width="1339" height="2716" class="styles_bezel___vGQl" style="color:transparent" src="placeholder-image.jpg"/>
|
||||
<div class="styles_children__D9Nsi" style="padding:5.925%">
|
||||
<figure>
|
||||
<video src="demo-video.mp4" autoPlay="" playsInline="" loop="" width="589" height="1278" poster="demo-poster.jpg" muted="" preload="auto">
|
||||
</video>
|
||||
</figure>
|
||||
</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_">
|
||||
<figure class="styles_wwcgImage__6T0vh">
|
||||
<img alt="Daniel Eden presenting “Where We Can Go” at Clarity Conference 2019" width="698" height="707" class="" style="color:transparent" sizes="(max-width: 800px) 680px, 100vw" src="placeholder-image.jpg"/>
|
||||
</figure>
|
||||
<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">
|
||||
<img alt="" width="1339" height="2716" class="styles_bezel___vGQl" style="color:transparent" src="placeholder-image.jpg"/>
|
||||
<div class="styles_children__D9Nsi" style="padding:5.925%">
|
||||
<figure>
|
||||
<video src="demo-video.mp4" autoPlay="" playsInline="" loop="" width="589" height="1278" poster="demo-poster.jpg" muted="" preload="auto">
|
||||
</video>
|
||||
</figure>
|
||||
</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
Block a user