generated from nhcarrigan/template
feat: add client timeline
This commit is contained in:
+238
-5
@@ -311,6 +311,133 @@
|
|||||||
transition: none !important;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -445,15 +572,124 @@
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Client Timeline -->
|
||||||
|
<section class="card fade-in" role="region" aria-labelledby="client-timeline">
|
||||||
|
<h2 id="client-timeline" style="margin-top: 0; text-align: center;">Client History Timeline</h2>
|
||||||
|
<p style="text-align: center; margin-bottom: 2rem;">
|
||||||
|
A journey through the amazing organizations and projects I've had the privilege to work with!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="timeline">
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/deepgram.png" alt="Deepgram avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Developer Experience Engineer</div>
|
||||||
|
<div class="timeline-company">Deepgram</div>
|
||||||
|
<div class="timeline-dates">July 2023 - present</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/freecodecamp.png" alt="freeCodeCamp avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Educational Web Developer and Community Manager</div>
|
||||||
|
<div class="timeline-company">freeCodeCamp</div>
|
||||||
|
<div class="timeline-dates">December 2020 - present</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/nhcarrigan.png" alt="NHCarrigan avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Technomancer</div>
|
||||||
|
<div class="timeline-company">NHCarrigan</div>
|
||||||
|
<div class="timeline-dates">December 2020 - present</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/streamcord.png" alt="Streamcord avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Community Manager and Infrastructure Engineer</div>
|
||||||
|
<div class="timeline-company">Streamcord</div>
|
||||||
|
<div class="timeline-dates">August 2021 - December 2024</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/rythm.png" alt="Rythm avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Senior Integrations Engineer</div>
|
||||||
|
<div class="timeline-company">Rythm</div>
|
||||||
|
<div class="timeline-dates">April 2022 - October 2024</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/bigbadbeaver.png" alt="BigBadBeaver TV avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Twitch Integration Engineer</div>
|
||||||
|
<div class="timeline-company">BigBadBeaver TV</div>
|
||||||
|
<div class="timeline-dates">October 2022 - January 2024</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/tweetshift.png" alt="TweetShift avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Community Manager</div>
|
||||||
|
<div class="timeline-company">TweetShift</div>
|
||||||
|
<div class="timeline-dates">January 2022 - May 2023</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/4c.png" alt="4C avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Community Manager</div>
|
||||||
|
<div class="timeline-company">4C</div>
|
||||||
|
<div class="timeline-dates">May 2022 - November 2022</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<div class="timeline-avatar">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/sema.png" alt="Sema avatar" />
|
||||||
|
</div>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<div class="timeline-role">Community Manager and Open Source Engineer</div>
|
||||||
|
<div class="timeline-company">Sema</div>
|
||||||
|
<div class="timeline-dates">May 2022 - September 2022</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Past Work & Credentials -->
|
||||||
<section class="fade-in" role="region" aria-labelledby="past-work">
|
<section class="fade-in" role="region" aria-labelledby="past-work">
|
||||||
<h2 id="past-work">Past Work & Credentials</h2>
|
<h2 id="past-work">Past Work & Credentials</h2>
|
||||||
<p>
|
<p>
|
||||||
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:
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://resume.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Founder's resume</a> - Explore past organizations we've worked with</li>
|
<li><a href="https://resume.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Founder's resume</a> - Explore past organizations we've worked with</li>
|
||||||
<li><a href="https://testimonials.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Client testimonials</a> - Direct feedback from people we've worked with</li>
|
<li><a href="https://testimonials.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Client testimonials</a> - Direct feedback from people we've worked with</li>
|
||||||
<li><a href="https://sitemap.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Project sitemap</a> - Browse all the products we build</li>
|
|
||||||
<li><a href="https://git.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Open source code</a> - Check out our repositories</li>
|
<li><a href="https://git.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Open source code</a> - Check out our repositories</li>
|
||||||
<li><a href="https://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Our Documentation</a> - Everything about our projects, policies, and how we operate</li>
|
<li><a href="https://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Our Documentation</a> - Everything about our projects, policies, and how we operate</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -471,9 +707,6 @@
|
|||||||
<p>
|
<p>
|
||||||
<strong><i class="fas fa-bullseye" aria-hidden="true"></i> The best way to connect:</strong> Join our public <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" style="font-weight: bold;">Discord community</a> and ask your questions there! It's where the magic happens - real-time support, mentorship discussions, and a genuinely awesome group of people.
|
<strong><i class="fas fa-bullseye" aria-hidden="true"></i> The best way to connect:</strong> Join our public <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" style="font-weight: bold;">Discord community</a> and ask your questions there! It's where the magic happens - real-time support, mentorship discussions, and a genuinely awesome group of people.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
|
||||||
Prefer long-form discussions? We also have a privately-hosted and indexable <a href="https://forum.nhcarrigan.com" target="_blank" rel="noopener noreferrer">forum</a> for deeper conversations.
|
|
||||||
</p>
|
|
||||||
<p>
|
<p>
|
||||||
Need private support? You can <a href="https://forms.nhcarrigan.com/form/HyqoJ9Th5QDiOn_GPLNIRhe1a5ON7mDQf-O_ukM6R4g" target="_blank" rel="noopener noreferrer">submit a general contact request</a>, or <a href="https://forms.nhcarrigan.com/form/uUKZiJSDm6847iDOlpZkD5QF7cAjoTbTm0F4T0EdW0I" target="_blank" rel="noopener noreferrer">schedule a paid meeting</a> for direct 1-on-1 support.
|
Need private support? You can <a href="https://forms.nhcarrigan.com/form/HyqoJ9Th5QDiOn_GPLNIRhe1a5ON7mDQf-O_ukM6R4g" target="_blank" rel="noopener noreferrer">submit a general contact request</a>, or <a href="https://forms.nhcarrigan.com/form/uUKZiJSDm6847iDOlpZkD5QF7cAjoTbTm0F4T0EdW0I" target="_blank" rel="noopener noreferrer">schedule a paid meeting</a> for direct 1-on-1 support.
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user