About
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historical Timeline Explorer</title>
<script src="/_sdk/element_sdk.js"></script>
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Georgia', serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #e8e8e8;
overflow-x: hidden;
height: 100%;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
min-height: 100%;
}
.header {
text-align: center;
margin-bottom: 60px;
padding: 30px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.header h1 {
font-size: 48px;
margin: 0 0 15px 0;
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: bold;
}
.header p {
font-size: 20px;
margin: 0;
color: #b8b8d1;
font-style: italic;
}
.timeline-container {
position: relative;
padding: 40px 0;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #ffd700 0%, #4a90e2 50%, #e74c3c 100%);
transform: translateX(-50%);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.timeline-event {
position: relative;
margin-bottom: 80px;
display: flex;
align-items: center;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.timeline-event:nth-child(1) { animation-delay: 0.1s; }
.timeline-event:nth-child(2) { animation-delay: 0.2s; }
.timeline-event:nth-child(3) { animation-delay: 0.3s; }
.timeline-event:nth-child(4) { animation-delay: 0.4s; }
.timeline-event:nth-child(5) { animation-delay: 0.5s; }
.timeline-event:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-event.left {
flex-direction: row;
}
.timeline-event.right {
flex-direction: row-reverse;
}
.event-content {
width: 45%;
padding: 25px;
background: rgba(255, 255, 255, 0.08);
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
backdrop-filter: blur(10px);
}
.event-content:hover {
background: rgba(255, 255, 255, 0.12);
transform: scale(1.02);
border-color: rgba(255, 215, 0, 0.3);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.event-marker {
width: 10%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.marker-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: #ffd700;
border: 4px solid #1a1a2e;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
transition: all 0.3s ease;
}
.timeline-event:hover .marker-dot {
transform: scale(1.3);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}
.event-date {
font-size: 18px;
font-weight: bold;
color: #ffd700;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.civilization-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.badge-egypt {
background: rgba(255, 215, 0, 0.2);
color: #ffd700;
border: 1px solid #ffd700;
}
.badge-greece {
background: rgba(74, 144, 226, 0.2);
color: #4a90e2;
border: 1px solid #4a90e2;
}
.badge-rome {
background: rgba(231, 76, 60, 0.2);
color: #e74c3c;
border: 1px solid #e74c3c;
}
.event-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 12px;
color: #ffffff;
}
.event-preview {
font-size: 15px;
line-height: 1.6;
color: #b8b8d1;
margin-bottom: 15px;
}
.expand-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 215, 0, 0.1);
border: 1px solid #ffd700;
border-radius: 8px;
color: #ffd700;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
}
.expand-button:hover {
background: rgba(255, 215, 0, 0.2);
transform: translateY(-2px);
}
.expand-icon {
transition: transform 0.3s ease;
}
.event-content.expanded .expand-icon {
transform: rotate(180deg);
}
.event-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
margin-top: 0;
}
.event-content.expanded .event-details {
max-height: 500px;
margin-top: 20px;
}
.event-details-content {
padding-top: 20px;
border-top: 2px solid rgba(255, 215, 0, 0.2);
}
.detail-section {
margin-bottom: 15px;
}
.detail-label {
font-weight: bold;
color: #ffd700;
font-size: 14px;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.detail-text {
color: #e8e8e8;
line-height: 1.7;
font-size: 15px;
}
.detail-list {
list-style: none;
padding: 0;
margin: 10px 0;
}
.detail-list li {
padding: 8px 0;
padding-left: 25px;
position: relative;
color: #e8e8e8;
line-height: 1.6;
}
.detail-list li:before {
content: "▸";
position: absolute;
left: 0;
color: #ffd700;
font-weight: bold;
}
@media (max-width: 768px) {
.timeline-line {
left: 30px;
}
.timeline-event {
flex-direction: row !important;
padding-left: 60px;
}
.event-content {
width: 100%;
}
.event-marker {
position: absolute;
left: 18px;
width: auto;
}
.header h1 {
font-size: 32px;
}
.header p {
font-size: 16px;
}
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
<script src="https://cdn.tailwindcss.com" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1 id="timeline-title">Ancient Civilisations</h1>
<p id="timeline-subtitle">3000 BCE - 500 CE</p>
</div>
<div class="timeline-container">
<div class="timeline-line"></div>
<div class="timeline-event left" data-event="0">
<div class="event-content">
<div class="event-date"><span>3100 BCE</span> <span class="civilization-badge badge-egypt">Egypt</span>
</div>
<div class="event-title">
Unification of Egypt
</div>
<div class="event-preview">
King Narmer unites Upper and Lower Egypt, establishing the first dynasty and beginning one of history's greatest civilisations.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
Significance
</div>
<div class="detail-text">
The unification marked the beginning of the Pharaonic period, creating a powerful centralised state that would last for over 3,000 years. This event established the foundation for Egyptian culture, religion, and governance.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Key Developments
</div>
<ul class="detail-list">
<li>Creation of the double crown symbolising unified rule</li>
<li>Establishment of Memphis as the capital city</li>
<li>Development of hieroglyphic writing system</li>
<li>Beginning of monumental architecture</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
<div class="timeline-event right" data-event="1">
<div class="event-content">
<div class="event-date"><span>2560 BCE</span> <span class="civilization-badge badge-egypt">Egypt</span>
</div>
<div class="event-title">
Great Pyramid of Giza Built
</div>
<div class="event-preview">
Pharaoh Khufu constructs the Great Pyramid, one of the Seven Wonders of the Ancient World and a testament to Egyptian engineering.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
Engineering Marvel
</div>
<div class="detail-text">
The Great Pyramid stood at 146.5 metres tall and remained the world's tallest man-made structure for over 3,800 years. It required approximately 2.3 million stone blocks, each weighing 2.5 tonnes on average.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Construction Facts
</div>
<ul class="detail-list">
<li>Built over approximately 20 years</li>
<li>Employed tens of thousands of skilled workers</li>
<li>Aligned precisely with cardinal directions</li>
<li>Originally covered in polished white limestone</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
<div class="timeline-event left" data-event="2">
<div class="event-content">
<div class="event-date"><span>776 BCE</span> <span class="civilization-badge badge-greece">Greece</span>
</div>
<div class="event-title">
First Olympic Games
</div>
<div class="event-preview">
The ancient Olympic Games begin in Olympia, Greece, establishing a tradition of athletic competition that continues to this day.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
Cultural Impact
</div>
<div class="detail-text">
The Olympic Games were held every four years and became a unifying force among Greek city-states. During the games, a sacred truce was observed, allowing athletes and spectators to travel safely.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Original Events
</div>
<ul class="detail-list">
<li>Stadion race (short sprint)</li>
<li>Wrestling and boxing competitions</li>
<li>Pentathlon (five combined events)</li>
<li>Chariot racing</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
<div class="timeline-event right" data-event="3">
<div class="event-content">
<div class="event-date"><span>508 BCE</span> <span class="civilization-badge badge-greece">Greece</span>
</div>
<div class="event-title">
Birth of Democracy in Athens
</div>
<div class="event-preview">
Cleisthenes introduces democratic reforms in Athens, creating the world's first known democracy and changing governance forever.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
Revolutionary System
</div>
<div class="detail-text">
Athenian democracy allowed male citizens to participate directly in government decisions. This system introduced concepts like voting, public debate, and civic responsibility that influence modern democracies.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Key Reforms
</div>
<ul class="detail-list">
<li>Creation of the Council of 500</li>
<li>Introduction of ostracism to prevent tyranny</li>
<li>Equal rights for all male citizens</li>
<li>Public assembly (Ekklesia) for decision-making</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
<div class="timeline-event left" data-event="4">
<div class="event-content">
<div class="event-date"><span>27 BCE</span> <span class="civilization-badge badge-rome">Rome</span>
</div>
<div class="event-title">
Roman Empire Established
</div>
<div class="event-preview">
Augustus becomes the first Roman Emperor, transforming Rome from a republic into an empire that would dominate the Mediterranean world.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
Imperial Power
</div>
<div class="detail-text">
Augustus brought stability after decades of civil war, establishing the Pax Romana (Roman Peace) that lasted over 200 years. His reign marked the beginning of Rome's golden age.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Achievements
</div>
<ul class="detail-list">
<li>Expanded and secured empire borders</li>
<li>Reformed taxation and administration</li>
<li>Patronised arts and literature</li>
<li>Built roads, aqueducts, and monuments</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
<div class="timeline-event right" data-event="5">
<div class="event-content">
<div class="event-date"><span>476 CE</span> <span class="civilization-badge badge-rome">Rome</span>
</div>
<div class="event-title">
Fall of Western Roman Empire
</div>
<div class="event-preview">
The last Western Roman Emperor is deposed, marking the end of ancient Rome and the beginning of the Middle Ages in Europe.
</div><button class="expand-button"> <span>Learn More</span> <span class="expand-icon">▼</span> </button>
<div class="event-details">
<div class="event-details-content">
<div class="detail-section">
<div class="detail-label">
End of an Era
</div>
<div class="detail-text">
The fall resulted from a combination of internal decay, economic troubles, and external pressures from Germanic tribes. While the Western Empire fell, the Eastern Roman (Byzantine) Empire continued for another thousand years.
</div>
</div>
<div class="detail-section">
<div class="detail-label">
Contributing Factors
</div>
<ul class="detail-list">
<li>Economic instability and inflation</li>
<li>Military defeats and invasions</li>
<li>Political corruption and instability</li>
<li>Division of the empire</li>
</ul>
</div>
</div>
</div>
</div>
<div class="event-marker">
<div class="marker-dot"></div>
</div>
</div>
</div>
</div>
<script>
const defaultConfig = {
timeline_title: "Ancient Civilisations",
timeline_subtitle: "3000 BCE - 500 CE",
background_color: "#1a1a2e",
surface_color: "#16213e",
text_color: "#e8e8e8",
primary_action_color: "#ffd700",
secondary_action_color: "#4a90e2",
font_family: "Georgia",
font_size: 16
};
async function onConfigChange(config) {
const titleElement = document.getElementById('timeline-title');
const subtitleElement = document.getElementById('timeline-subtitle');
if (titleElement) {
titleElement.textContent = config.timeline_title || defaultConfig.timeline_title;
}
if (subtitleElement) {
subtitleElement.textContent = config.timeline_subtitle || defaultConfig.timeline_subtitle;
}
const backgroundColor = config.background_color || defaultConfig.background_color;
const surfaceColor = config.surface_color || defaultConfig.surface_color;
const textColor = config.text_color || defaultConfig.text_color;
const primaryColor = config.primary_action_color || defaultConfig.primary_action_color;
const secondaryColor = config.secondary_action_color || defaultConfig.secondary_action_color;
const customFont = config.font_family || defaultConfig.font_family;
const baseSize = config.font_size || defaultConfig.font_size;
document.body.style.background = `linear-gradient(135deg, ${backgroundColor} 0%, ${surfaceColor} 100%)`;
document.body.style.color = textColor;
document.body.style.fontFamily = `${customFont}, Georgia, serif`;
const header = document.querySelector('.header');
if (header) {
header.style.background = `rgba(255, 255, 255, 0.05)`;
}
if (titleElement) {
titleElement.style.fontSize = `${baseSize * 3}px`;
titleElement.style.background = `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`;
titleElement.style.webkitBackgroundClip = 'text';
titleElement.style.webkitTextFillColor = 'transparent';
titleElement.style.backgroundClip = 'text';
}
if (subtitleElement) {
subtitleElement.style.fontSize = `${baseSize * 1.25}px`;
subtitleElement.style.color = textColor;
}
const timelineLine = document.querySelector('.timeline-line');
if (timelineLine) {
timelineLine.style.background = `linear-gradient(180deg, ${primaryColor} 0%, ${secondaryColor} 50%, #e74c3c 100%)`;
}
const eventContents = document.querySelectorAll('.event-content');
eventContents.forEach(content => {
content.style.background = 'rgba(255, 255, 255, 0.08)';
});
const eventTitles = document.querySelectorAll('.event-title');
eventTitles.forEach(title => {
title.style.fontSize = `${baseSize * 1.375}px`;
title.style.color = '#ffffff';
});
const eventPreviews = document.querySelectorAll('.event-preview');
eventPreviews.forEach(preview => {
preview.style.fontSize = `${baseSize * 0.9375}px`;
preview.style.color = textColor;
});
const eventDates = document.querySelectorAll('.event-date');
eventDates.forEach(date => {
date.style.fontSize = `${baseSize * 1.125}px`;
date.style.color = primaryColor;
});
const expandButtons = document.querySelectorAll('.expand-button');
expandButtons.forEach(button => {
button.style.background = `rgba(255, 215, 0, 0.1)`;
button.style.borderColor = primaryColor;
button.style.color = primaryColor;
button.style.fontSize = `${baseSize * 0.875}px`;
});
const markerDots = document.querySelectorAll('.marker-dot');
markerDots.forEach(dot => {
dot.style.background = primaryColor;
dot.style.borderColor = backgroundColor;
});
const detailLabels = document.querySelectorAll('.detail-label');
detailLabels.forEach(label => {
label.style.color = primaryColor;
label.style.fontSize = `${baseSize * 0.875}px`;
});
const detailTexts = document.querySelectorAll('.detail-text');
detailTexts.forEach(text => {
text.style.color = textColor;
text.style.fontSize = `${baseSize * 0.9375}px`;
});
const detailListItems = document.querySelectorAll('.detail-list li');
detailListItems.forEach(item => {
item.style.color = textColor;
});
}
function mapToCapabilities(config) {
return {
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => {
config.background_color = value;
window.elementSdk.setConfig({ background_color: value });
}
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (value) => {
config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (value) => {
config.primary_action_color = value;
window.elementSdk.setConfig({ primary_action_color: value });
}
},
{
get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
set: (value) => {
config.secondary_action_color = value;
window.elementSdk.setConfig({ secondary_action_color: value });
}
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (value) => {
config.font_family = value;
window.elementSdk.setConfig({ font_family: value });
}
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (value) => {
config.font_size = value;
window.elementSdk.setConfig({ font_size: value });
}
}
};
}
function mapToEditPanelValues(config) {
return new Map([
["timeline_title", config.timeline_title || defaultConfig.timeline_title],
["timeline_subtitle", config.timeline_subtitle || defaultConfig.timeline_subtitle]
]);
}
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
}
document.querySelectorAll('.expand-button').forEach((button, index) => {
button.addEventListener('click', function(e) {
e.preventDefault();
const eventContent = this.closest('.event-content');
eventContent.classList.toggle('expanded');
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9993ae55f2586792',t:'MTc2MjI1NDc5NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>