generated from nhcarrigan/template
feat: add more sections and make it prettier #6
+238
-5
@@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -445,15 +572,124 @@
|
||||
</p>
|
||||
</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">
|
||||
<h2 id="past-work">Past Work & Credentials</h2>
|
||||
<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>
|
||||
<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://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://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Our Documentation</a> - Everything about our projects, policies, and how we operate</li>
|
||||
</ul>
|
||||
@@ -471,9 +707,6 @@
|
||||
<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.
|
||||
</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>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user