diff --git a/site/index.html b/site/index.html index 4ee6d0f..10835bb 100644 --- a/site/index.html +++ b/site/index.html @@ -311,6 +311,133 @@ transition: none !important; } } + + /* Timeline styles */ + .timeline { + position: relative; + padding: 2rem 0; + margin: 2rem 0; + } + + .timeline::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 3px; + background: linear-gradient(to bottom, #5865F2, #4752C4); + transform: translateX(-50%); + } + + .timeline-item { + position: relative; + margin: 2rem 0; + display: flex; + align-items: center; + width: 100%; + } + + .timeline-item:nth-child(odd) { + flex-direction: row; + } + + .timeline-item:nth-child(even) { + flex-direction: row-reverse; + } + + .timeline-content { + background: white; + border: 2px solid #e0e0e0; + border-radius: 12px; + padding: 1.5rem; + width: calc(50% - 3rem); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + } + + .timeline-content:hover { + transform: translateY(-4px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); + border-color: #5865F2; + } + + .timeline-item:nth-child(odd) .timeline-content { + margin-right: auto; + margin-left: 0; + } + + .timeline-item:nth-child(even) .timeline-content { + margin-left: auto; + margin-right: 0; + } + + .timeline-avatar { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 80px; + border-radius: 50%; + border: 4px solid white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + background: white; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .timeline-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .timeline-role { + font-weight: bold; + font-size: 1.1rem; + color: #1a1a1a; + margin-bottom: 0.5rem; + } + + .timeline-company { + font-size: 1rem; + color: #5865F2; + font-weight: 600; + margin-bottom: 0.5rem; + } + + .timeline-dates { + font-size: 0.9rem; + color: #666; + font-style: italic; + } + + @media (max-width: 768px) { + .timeline::before { + left: 2rem; + } + + .timeline-item { + flex-direction: row !important; + } + + .timeline-content { + width: calc(100% - 6rem); + margin-left: 4rem !important; + margin-right: 0 !important; + } + + .timeline-avatar { + left: 2rem; + transform: translateX(-50%); + width: 60px; + height: 60px; + } + }
@@ -445,15 +572,124 @@ + ++ A journey through the amazing organizations and projects I've had the privilege to work with! +
+ +- Curious about the work we've done and the people we've helped? Here's the proof: + Curious to know more about the work we've done and the people we've helped? Here's the proof:
The best way to connect: Join our public Discord community and ask your questions there! It's where the magic happens - real-time support, mentorship discussions, and a genuinely awesome group of people.
-- Prefer long-form discussions? We also have a privately-hosted and indexable forum for deeper conversations. -
Need private support? You can submit a general contact request, or schedule a paid meeting for direct 1-on-1 support.