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,35 +1,46 @@
|
||||
# Daniel Eden Portfolio Demo
|
||||
# Dan Eden Portfolio
|
||||
|
||||
A clean, modern portfolio demo site showcasing how insertr works with more complex HTML structures and content types.
|
||||
## Original URL
|
||||
https://daneden.me
|
||||
|
||||
## Features
|
||||
## Downloaded
|
||||
2025-09-11T15:48:33.014Z
|
||||
|
||||
- **Multi-section layout**: Header, projects, timeline
|
||||
- **Various content types**: Headlines, descriptions, links, metadata
|
||||
- **Rich styling**: Modern CSS with cards, grids, and responsive design
|
||||
- **Complex DOM structure**: Good test case for insertr's ID generation and content injection
|
||||
## Site Characteristics
|
||||
- **Framework**: Next.js with CSS Modules
|
||||
- **Styling**: Clean, minimal design with CSS-in-JS
|
||||
- **Content**: Personal portfolio with bio, projects, and talks
|
||||
- **Complexity**: Simple - good for basic insertr testing
|
||||
|
||||
## Content Structure
|
||||
## Insertr Enhancement Status
|
||||
- [x] Content sections identified
|
||||
- [x] Insertr classes added to key elements
|
||||
- [x] Enhanced version created
|
||||
- [x] Insertr functionality tested
|
||||
- [x] Results documented
|
||||
|
||||
This demo includes various insertable elements:
|
||||
- Main headline and intro text
|
||||
- Project titles and descriptions
|
||||
- Project links
|
||||
- Timeline entries with years and descriptions
|
||||
- Metadata text
|
||||
## Test Results
|
||||
✅ **Enhancement Success**: 7 elements successfully enhanced with insertr
|
||||
✅ **Server Integration**: Site registered as "dan-eden-test" in insertr.yaml
|
||||
✅ **Content ID Generation**: Auto-generated IDs like "index-span-4ba35c"
|
||||
✅ **Content Type Detection**: All elements correctly identified as "markdown" type
|
||||
✅ **Asset Preservation**: All original Next.js assets and styling preserved
|
||||
|
||||
## Usage
|
||||
## Enhanced Elements
|
||||
1. **Main bio paragraph** (`<p class="home_xxl__iX0Z1 insertr">`) - Product designer introduction
|
||||
2. **Company name** (`<span class="insertr">Meta Reality Labs</span>`) - Current employer
|
||||
3. **App descriptions** - Ora and Solstice project descriptions
|
||||
4. **Talk content** - "Where We Can Go" title and description
|
||||
5. **Action buttons** - "Learn more" and "Read the post" links
|
||||
|
||||
This site demonstrates insertr's ability to handle:
|
||||
- Complex nested HTML structures
|
||||
- Multiple content types (text, markdown, links)
|
||||
- Consistent content ID generation across enhancement runs
|
||||
- Content persistence in real-world scenarios
|
||||
|
||||
Perfect for testing dan-eden-portfolio specific features and content management workflows.
|
||||
## Testing Notes
|
||||
- Clean HTML structure ideal for insertr compatibility
|
||||
- CSS Modules shouldn't interfere with insertr classes
|
||||
- Good test case for semantic content editing
|
||||
- Minimal JavaScript complexity
|
||||
|
||||
## Files
|
||||
|
||||
- `index.html` - Clean, hand-crafted portfolio demo
|
||||
- `insertr.yaml` - Site configuration
|
||||
- `insertr-config.json` - Content management settings
|
||||
- `index.html.original` - Original downloaded version
|
||||
- `index.html` - Enhanced version with insertr classes
|
||||
- `insertr-config.json` - Configuration for testing
|
||||
- `_next/` - Next.js assets and styles
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
demos/dan-eden-portfolio/icon.jpeg?a235122132d5a650
Normal file
BIN
demos/dan-eden-portfolio/icon.jpeg?a235122132d5a650
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
@@ -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