Adding a Testimonials Section to Your Jekyll Portfolio

Creating a testimonials section on your Jekyll portfolio can significantly enhance its credibility and showcase your satisfied clients or colleagues. Although Jekyll is a static site generator, you can still add dynamic-looking testimonials using simple HTML and CSS techniques within your Markdown files. This guide will walk you through the process of adding an effective testimonials section.

Why Add Testimonials to Your Portfolio?

Testimonials serve as social proof, demonstrating your expertise and reliability. They help potential clients or employers trust your skills and experience. Including authentic feedback can differentiate your portfolio from others and make it more engaging.

How to Add a Testimonials Section

Follow these simple steps to incorporate testimonials into your Jekyll site:

• Design a testimonials layout using HTML and CSS.
• Add the testimonials section to your Jekyll page or layout.
• Customize the content with your clients' feedback.

Creating the Testimonials HTML

Insert the following HTML snippet into your Jekyll Markdown file where you want the testimonials to appear:

<div class="testimonials">
  <div class="testimonial">
    <p class="quote">"Working with [Your Name] was a fantastic experience. Highly recommended!"</p>
    <p class="author">- Jane Doe, CEO of Company</p>
  </div>
  <div class="testimonial">
    <p class="quote">"An exceptional developer who delivered on time and exceeded expectations."</p>
    <p class="author">- John Smith, Freelance Client</p>
  </div>
</div>

Adding CSS for Styling

You can include the following CSS in your assets/css/style.css file or within a <style> tag in your layout:

.testimonials {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.testimonial {
  padding: 1em;
  border-left: 4px solid #007acc;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.quote {
  font-style: italic;
  margin-bottom: 0.5em;
}
.author {
  text-align: right;
  font-weight: bold;
}

Tips for Effective Testimonials

To make your testimonials impactful:

• Use real names and photos if possible.
• Keep testimonials concise and specific.
• Update them regularly to keep your portfolio fresh.

Adding a testimonials section is a simple yet powerful way to enhance your Jekyll portfolio. With a little HTML and CSS, you can showcase positive feedback that builds trust and credibility with visitors.