Customise site content

_data/clients.yml

@@ -0,0 +1,21 @@
+- company: WithSecure
+  logo: /assets/clients/withsecure-color.png
+  link: https://withsecure.com
+- company: University of Southampton
+  logo: /assets/clients/uos-color.png
+  link: https://southampton.ac.uk
+- company: Royal Air Force
+  logo: /assets/clients/raf-color.png
+  link: https://raf.mod.uk
+- company: Social Connection Media
+  logo: /assets/clients/social-connection-color.png
+  link: https://social-connection.co.uk
+- company: IKM Network Communcations
+  logo: /assets/clients/ikm-color.png
+  link: https://ikm.co.uk
+- company: Swifts Junior Badminton Club
+  logo: /assets/clients/sjbc-color.png
+  link: https://swiftsjbc.org.uk
+- company: Reading School
+  logo: /assets/clients/rs-color.png
+  link: https://reading-school.co.uk

_data/current-projects.yml

@@ -1,4 +1,8 @@
-- title: Web design
+- title: Cyber Security Consulting
+  icon: /assets/images/cybersec.svg
+  icon_alt: Cyber security
+  description: Providing a variety of security and auditing services to organisations in the UK.
+- title: Web Design
   icon: /assets/images/icon-design.svg
-  icon_alt: design icon
+  icon_alt: Web design
-  description: The most modern and high-quality design made at a professional level.
+  description: Producing high-quality customer-facing sites for a multitude of clients nationally.

_data/experience.yml

@@ -1,5 +1,46 @@
+- job_title: Software Engineer
+  company: Freelance
+  start_year: 2021
+  end_year: Present
+  description: |
+    Recent projects have included [Parandum](https://parandum.mgrove.uk) (a vocabulary learning platform), the [Reading School Alumni Society website](https://alumni.reading-school.co.uk) (with a brief to make the most of the limited features available), and a website for Reading School's students [to publish news articles on](https://youngreporter.mgrove.uk), as part of the BBC Young Reporter programme -- as well as numerous internal systems for other organisations. I also develop websites for a marketing company.
+- job_title: Cyber Security Intern
+  company: WithSecure
+  start_year: 2023
+  end_year: 2023
+  description: |
+    First undertaking class-leading training in various aspects of cyber security - from web applications to networks - I completed a research project focusing on automating the identification of attack paths and potential privilege escalation in IBM's mainframe operating system, z/OS. This culminated in presenting my findings (and the tool I had developed) to the company's global consulting team, building on the knowledge I gained from consulting workshops I also attended.
 - job_title: Student Ambassador
   company: University of Southampton
   start_year: 2022
   end_year: Present
+  description: |
+    Supporting the university's Widening Participation and Social Mobility, and outreach teams with local initiatives with nearby primary and secondary schools, engaging students and supporting their academic and social development - and promoting the university on the wider national stage.
+- job_title: Digital Impact Officer
+  company: BRECcIA Research Project, University of Southampton
+  start_year: 2022
+  end_year: 2023
+  description: |
+    Software development focusing on the completion of relationship mapping software for use in both research and corporate environments. This is open-source software deployed through Docker and built with Django, principally aiming to increase the efficacy of collaborations across departments and organisations. This web app and its documentation are available [on GitHub](https://github.com/Southampton-RSG/breccia-mapper).
+- job_title: Section Officer
+  company: Combined Cadet Force
+  start_year: 2023
+  end_year: Present
   description: 
+- job_title: Technical Lead
+  company: Swifts Junior Badminton Club
+  start_year: 2022
+  end_year: Present
+  description: |
+    In this position I have overhauled both [the website](https://swiftsjbc.org.uk) and backend systems of this charity, including managing SEO for the website and migrating many offline processes to a centrally-managed CRM. I am also the point of contact for all technical assistance in the organisation, and have been the change manager during migration to the organisation's new systems. This has involved liaising with staff and club members, and ensuring ease of use for all.
+- job_title: Officer Cadet
+  company: Southampton University Air Squadron
+  start_year: 2022
+  end_year: 2024
+  description: 
+- job_title: Hospitality
+  company: CH&CO
+  start_year: 2022
+  end_year: Present
+  description: |
+    Assisting with the running of match days and corporate events at Southampton Football Club and related entities.

_data/portfolio.yml

@@ -1,9 +1,33 @@
+- title: Home Assistant Pi Pico W Dashboard
+  date: 2024
+  link: https://github.com/mgrove36/home-assistant-pi-pico-w-dashboard
+  tag: Software Engineering
+  image: /assets/images/hass-pico-dashboard-banner.jpg
+  image_alt: Pi Pico W with Home Assistant dashboard
+- title: Java Distributed Filesystem
+  date: 2024
+  link: https://github.com/mgrove36/comp2207-cw
+  tag: Software Engineering
+  image: /assets/images/java-dstore-banner.png
+  image_alt: Distributed filesystem implemented with Java
 - title: BRECcIA Network Mapper
   date: 2023
   link: https://github.com/southampton-rsg/breccia-mapper
   tag: Web Development
   image: /assets/images/breccia-graph.png
   image_alt: BRECcIA Network Mapper graph
+- title: Haskell labs
+  date: 2023
+  link: https://github.com/mgrove36/comp2209-labs
+  tag: Software Engineering
+  image: /assets/images/haskell-banner.jpg
+  image_alt: Haskell icon
+- title: ECS Chat
+  date: 2023
+  link: https://github.com/mgrove36/comp1206-ecschat
+  tag: Software Engineering
+  image: /assets/images/ecschat-banner.png
+  image_alt: ECS Chat window with chat open
 - title: Parandum
   date: 2020
   link: https://github.com/mgrove36/parandum
@@ -22,3 +46,9 @@
   tag: Web Development
   image: /assets/images/bbc-young-reporter-banner.png
   image_alt: BBC Young Reporter website
+- title: Reading School Alumni Society website
+  date: 2020
+  link: https://alumni.reading-school.co.uk
+  tag: Web Development
+  image: /assets/images/rs-alumni-banner.png
+  image_alt: Reading School Alumni Society website

_data/testimonials.yml

@@ -0,0 +1,10 @@
+- title: Hobbies
+  icon: /assets/testimonials/run.svg
+  icon_alt: Hobbies
+  content: |
+    I love running, aviation, and flying -- fuelled by a successful career as an RAF cadet. During this time I reached the rank of Cadet Warrant Officer and, at the Royal International Air Tattoo, was the first CCF cadet to earn "Best Cadet" in its 30+ year history. I was also awarded a highly selective flying scholarship, and the position of Lord-Lieutenant's Cadet: an aide to the monarch's representative in Berkshire, representing the county's cadets, in 2021/22. Now furthering this interest as an Officer Cadet at Southampton University Air Squadron, I also volunteer as staff at a cadet unit.
+- title: Volunteering
+  icon: /assets/testimonials/volunteering.svg
+  icon_alt: Volunteering
+  content: |
+    I have historically volunteered with several organisations and societies, most recently as Vice President at Southampton University Cyber Security Society - organising weekly sessions and liaising with students, staff, and industry partners to ensure the success of the society. I also volunteer with the Jon Egging Trust: a charity that aims to inspire underprivileged young people to reach their full potentials.

_includes/about.md

@@ -1,9 +1,5 @@
-I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
+A cyber security & software engineer with a special interest in application and network security, I am currently studying MEng Computer Science with Cyber Security at the University of Southampton. I am also an ex- RAF Cadet Warrant Officer and Lord-Lieutenant’s Cadet, where I represented all cadets in Berkshire; currently an Officer Cadet at Southampton University Air Squadron and Service Instructor in the Combined Cadet Force.
-I enjoy
-turning complex problems into simple, beautiful and intuitive designs.
 
-My job is to build your website so that it is functional and user-friendly but at the same time attractive.
+I love running and flying - fuelled by a successful career as an RAF cadet. During this time I reached the rank of Cadet Warrant Officer and, at the Royal International Air Tattoo, was the first CCF cadet to earn "Best Cadet" in its 30+ year history. I was also awarded a highly selective flying scholarship, and the position of Lord-Lieutenant's Cadet: an aide to the monarch's representative in Berkshire, representing the county's cadets, in 2021/22. Now furthering this interest as an Officer Cadet at Southampton University Air Squadron, I also volunteer as staff at a cadet unit.
-Moreover, I
+
-add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
+I have historically volunteered with several organisations and societies, most recently as Vice President at Southampton University Cyber Security Society - organising weekly sessions and liaising with students, staff, and industry partners to ensure the success of the society. I also volunteer with the Jon Egging Trust: a charity that aims to inspire underprivileged young people to reach their full potentials.
-across your
-message and identity in the most creative way. I created web design for many famous brand companies.

_subpages/01-about.md

@@ -30,7 +30,7 @@ permalink: /
         <h4 class="h4 service-item-title">{{ service-item.title }}</h4>
 
         <p class="service-item-text">
-            {{ service-item.description }}
+            {{ service-item.description | markdownify }}
         </p>
         </div>
 
@@ -48,97 +48,27 @@ permalink: /
 
 <section class="testimonials">
 
-    <h3 class="h3 testimonials-title">Testimonials</h3>
+    <h3 class="h3 testimonials-title">What Else?</h3>
 
     <ul class="testimonials-list has-scrollbar">
 
+    {% for testimonial in site.data.testimonials %}
     <li class="testimonials-item">
         <div class="content-card" data-testimonials-item>
 
         <figure class="testimonials-avatar-box">
-            <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
+            <img src="{{ testimonial.icon }}" alt="{{ testimonial.icon_alt }}" width="60" data-testimonials-avatar>
         </figure>
 
-        <h4 class="h4 testimonials-item-title" data-testimonials-title>Daniel lewis</h4>
+        <h4 class="h4 testimonials-item-title" data-testimonials-title>{{ testimonial.title }}</h4>
 
         <div class="testimonials-text" data-testimonials-text>
-            <p>
+            {{ testimonial.content | markdownify }}
-            Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-            lot of experience
-            and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-            consectetur adipiscing
-            elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-            </p>
-        </div>
-
-        </div>
-    </li>
-
-    <li class="testimonials-item">
-        <div class="content-card" data-testimonials-item>
-
-        <figure class="testimonials-avatar-box">
-            <img src="./assets/images/avatar-2.png" alt="Jessica miller" width="60" data-testimonials-avatar>
-        </figure>
-
-        <h4 class="h4 testimonials-item-title" data-testimonials-title>Jessica miller</h4>
-
-        <div class="testimonials-text" data-testimonials-text>
-            <p>
-            Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-            lot of experience
-            and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-            consectetur adipiscing
-            elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-            </p>
-        </div>
-
-        </div>
-    </li>
-
-    <li class="testimonials-item">
-        <div class="content-card" data-testimonials-item>
-
-        <figure class="testimonials-avatar-box">
-            <img src="./assets/images/avatar-3.png" alt="Emily evans" width="60" data-testimonials-avatar>
-        </figure>
-
-        <h4 class="h4 testimonials-item-title" data-testimonials-title>Emily evans</h4>
-
-        <div class="testimonials-text" data-testimonials-text>
-            <p>
-            Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-            lot of experience
-            and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-            consectetur adipiscing
-            elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-            </p>
-        </div>
-
-        </div>
-    </li>
-
-    <li class="testimonials-item">
-        <div class="content-card" data-testimonials-item>
-
-        <figure class="testimonials-avatar-box">
-            <img src="./assets/images/avatar-4.png" alt="Henry william" width="60" data-testimonials-avatar>
-        </figure>
-
-        <h4 class="h4 testimonials-item-title" data-testimonials-title>Henry william</h4>
-
-        <div class="testimonials-text" data-testimonials-text>
-            <p>
-            Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-            lot of experience
-            and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-            consectetur adipiscing
-            elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-            </p>
         </div>
 
         </div>
     </li>
+    {% endfor %}
 
     </ul>
 
@@ -161,27 +91,15 @@ permalink: /
 
     <div class="modal-img-wrapper">
         <figure class="modal-avatar-box">
-        <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
+        <img src="/assets/images/cybersec.svg" alt="" width="80" data-modal-img>
         </figure>
-
-        <img src="./assets/images/icon-quote.svg" alt="quote icon">
     </div>
 
     <div class="modal-content">
 
-        <h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
+        <h4 class="h3 modal-title" data-modal-title></h4>
 
-        <time datetime="2021-06-14">14 June, 2021</time>
+        <div data-modal-text></div>
-
-        <div data-modal-text>
-        <p>
-            Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
-            lot of experience
-            and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
-            consectetur adipiscing
-            elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
-        </p>
-        </div>
 
     </div>
 
@@ -196,45 +114,17 @@ permalink: /
 
 <section class="clients">
 
-    <h3 class="h3 clients-title">Clients</h3>
+    <h3 class="h3 clients-title">Clients & Employers</h3>
 
     <ul class="clients-list has-scrollbar">
 
+    {% for client in site.data.clients %}
     <li class="clients-item">
-        <a href="#">
+        <a target="_blank" href="{{ client.link }}">
-        <img src="./assets/images/logo-1-color.png" alt="client logo">
+        <img src="{{ client.logo }}" alt="{{ client.company }}">
-        </a>
-    </li>
-
-    <li class="clients-item">
-        <a href="#">
-        <img src="./assets/images/logo-2-color.png" alt="client logo">
-        </a>
-    </li>
-
-    <li class="clients-item">
-        <a href="#">
-        <img src="./assets/images/logo-3-color.png" alt="client logo">
-        </a>
-    </li>
-
-    <li class="clients-item">
-        <a href="#">
-        <img src="./assets/images/logo-4-color.png" alt="client logo">
-        </a>
-    </li>
-
-    <li class="clients-item">
-        <a href="#">
-        <img src="./assets/images/logo-5-color.png" alt="client logo">
-        </a>
-    </li>
-
-    <li class="clients-item">
-        <a href="#">
-        <img src="./assets/images/logo-6-color.png" alt="client logo">
         </a>
     </li>
+    {% endfor %}
 
     </ul>
 

_subpages/02-resume.md

@@ -23,7 +23,7 @@ permalink: /resume
         <span>{{ education-item.start_year }} — {{ education-item.end_year }} ({{ education-item.grade }})</span>
         
         <p class="timeline-text">
-            {{ education-item.description }}
+            {{ education-item.description | markdownify }}
         </p>
 
     </li>
@@ -54,7 +54,7 @@ permalink: /resume
 
         {% if experience-item.description %}
         <p class="timeline-text">
-        {{ experience-item.description }}
+        {{ experience-item.description | markdownify }}
         </p>
         {% endif %}
 

assets/css/style.css

@@ -53,6 +53,11 @@
     hsl(45, 100%, 72%), 
     hsl(35, 100%, 68%)
   );
+  --text-gradient-primary: linear-gradient(
+    to right, 
+    var(--primary-color), 
+    var(--secondary-color)
+  );
 
   /* solid */
 
@@ -109,6 +114,12 @@
   --transition-1: 0.25s ease;
   --transition-2: 0.5s ease-in-out;
 
+  /**
+   * theme color
+   */
+  --primary-color: #ff6e75;
+  --secondary-color: #f74851;
+
 }
 
 
@@ -131,6 +142,15 @@ li { list-style: none; }
 
 img, ion-icon, a, button, time, span { display: block; }
 
+article a {
+  display: inline;
+  color: var(--primary-color);
+}
+
+article img path {
+  fill: white;
+}
+
 button {
   font: inherit;
   background: none;
@@ -147,11 +167,11 @@ input, textarea {
 }
 
 ::selection {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   color: var(--smoky-black);
 }
 
-:focus { outline-color: var(--orange-yellow-crayola); }
+:focus { outline-color: var(--secondary-color); }
 
 html { font-family: var(--ff-poppins); }
 
@@ -173,6 +193,7 @@ article {
   padding: 15px;
   box-shadow: var(--shadow-1);
   z-index: 1;
+  color: var(--light-gray);
 }
 
 .separator {
@@ -192,7 +213,7 @@ article {
   justify-content: center;
   align-items: center;
   font-size: 16px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   box-shadow: var(--shadow-1);
   z-index: 1;
 }
@@ -251,7 +272,7 @@ article.active {
   left: 0;
   width: 30px;
   height: 3px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 3px;
 }
 
@@ -266,7 +287,7 @@ article.active {
 }
 
 .has-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--orange-yellow-crayola);
+  background: var(--secondary-color);
   border-radius: 5px;
 }
 
@@ -361,7 +382,7 @@ main {
   right: -15px;
   border-radius: 0 15px;
   font-size: 13px;
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   background: var(--border-gradient-onyx);
   padding: 10px;
   box-shadow: var(--shadow-2);
@@ -486,7 +507,7 @@ main {
 .navbar-link:hover,
 .navbar-link:focus { color: var(--light-gray-70); }
 
-.navbar-link.active { color: var(--orange-yellow-crayola); }
+.navbar-link.active { color: var(--secondary-color); }
 
 
 
@@ -590,9 +611,11 @@ main {
   left: 0;
   transform: translate(15px, -25px);
   background: var(--bg-gradient-onyx);
-  border-radius: 14px;
   box-shadow: var(--shadow-1);
 }
+.testimonials-avatar-box, .testimonials-avatar-box img {
+  border-radius: 14px;
+}
 
 .testimonials-item-title { margin-bottom: 7px; }
 
@@ -732,7 +755,7 @@ main {
 .clients-list {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   gap: 15px;
   margin: 0 -15px;
   padding: 25px;
@@ -797,7 +820,7 @@ main {
 }
 
 .timeline-list span {
-  color: var(--vegas-gold);
+  color: var(--primary-color);
   font-weight: var(--fw-400);
   line-height: 1.6;
 }
@@ -819,7 +842,7 @@ main {
   left: -33px;
   height: 6px;
   width: 6px;
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   border-radius: 50%;
   box-shadow: 0 0 0 4px var(--jet);
 }
@@ -863,7 +886,7 @@ main {
 }
 
 .skill-progress-fill {
-  background: var(--text-gradient-yellow);
+  background: var(--text-gradient-primary);
   height: 100%;
   border-radius: inherit;
 }
@@ -981,7 +1004,7 @@ main {
   --scale: 0.8;
 
   background: var(--jet);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1106,7 +1129,7 @@ main {
   transition: var(--transition-1);
 }
 
-.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
+.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
 
 .blog-text {
   color: var(--light-gray);
@@ -1165,7 +1188,7 @@ main {
 
 .form-input::placeholder { font-weight: var(--fw-500); }
 
-.form-input:focus { border-color: var(--orange-yellow-crayola); }
+.form-input:focus { border-color: var(--secondary-color); }
 
 textarea.form-input {
   min-height: 100px;
@@ -1183,7 +1206,7 @@ textarea.form-input::-webkit-resizer { display: none; }
   position: relative;
   width: 100%;
   background: var(--border-gradient-onyx);
-  color: var(--orange-yellow-crayola);
+  color: var(--secondary-color);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1424,6 +1447,9 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .testimonials-avatar-box {
     transform: translate(30px, -30px);
+  }
+  
+  .testimonials-avatar-box, .testimonials-avatar-box img {
     border-radius: 20px;
   }
 
@@ -1620,7 +1646,7 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .filter-item button:hover { color: var(--light-gray-70); }
 
-  .filter-item button.active { color: var(--orange-yellow-crayola); }
+  .filter-item button.active { color: var(--secondary-color); }
 
   /* portfolio and blog grid */
 

assets/images/cybersec.svg

@@ -0,0 +1,8 @@
+<svg fill="url(#paint1_linear)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>17-web security</title><g id="_17-web_security" data-name="17-web security"><path d="M45,40H3a3,3,0,0,1-3-3V11A3,3,0,0,1,3,8H6v2H3a1,1,0,0,0-1,1V37a1,1,0,0,0,1,1H45a1,1,0,0,0,1-1V11a1,1,0,0,0-1-1H42V8h3a3,3,0,0,1,3,3V37A3,3,0,0,1,45,40Z"/><rect x="15" y="39" width="2" height="4"/><path d="M13,47H11V45a3,3,0,0,1,3-3H24v2H14a1,1,0,0,0-1,1Z"/><rect x="31" y="39" width="2" height="4"/><path d="M37,47H35V45a1,1,0,0,0-1-1H29V42h5a3,3,0,0,1,3,3Z"/><rect x="9" y="46" width="30" height="2"/><path d="M40,36H8a3,3,0,0,1-3-3V3A3,3,0,0,1,8,0H40a3,3,0,0,1,3,3V33A3,3,0,0,1,40,36ZM8,2A1,1,0,0,0,7,3V33a1,1,0,0,0,1,1H40a1,1,0,0,0,1-1V3a1,1,0,0,0-1-1Z"/><rect x="6" y="6" width="36" height="2"/><rect x="9" y="3" width="2" height="2"/><rect x="13" y="3" width="2" height="2"/><rect x="17" y="3" width="2" height="2"/><rect x="1" y="30" width="5" height="2"/><rect x="42" y="30" width="5" height="2"/><path d="M30,32H18a3,3,0,0,1-3-3V23a3,3,0,0,1,3-3H30a3,3,0,0,1,3,3v6A3,3,0,0,1,30,32ZM18,22a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1H30a1,1,0,0,0,1-1V23a1,1,0,0,0-1-1Z"/><path d="M29,22H19a1,1,0,0,1-1-1V16a6,6,0,0,1,12,0v5A1,1,0,0,1,29,22Zm-9-2h8V16a4,4,0,0,0-8,0Z"/><path d="M24,27a2,2,0,1,1,2-2A2,2,0,0,1,24,27Zm0-2h0Z"/><rect x="23" y="25" width="2" height="4"/><rect x="9" y="10" width="2" height="2"/><rect x="13" y="10" width="2" height="2"/><rect x="9" y="14" width="2" height="2"/><rect x="37" y="14" width="2" height="2"/><rect x="37" y="10" width="2" height="2"/><rect x="33" y="10" width="2" height="2"/></g>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>

assets/testimonials/run.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="-4 -4 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 22V16.9612C14 16.3537 13.7238 15.7791 13.2494 15.3995L11.5 14M11.5 14L13 7.5M11.5 14L10 13M13 7.5L11 7M13 7.5L15.0426 10.7681C15.3345 11.2352 15.8062 11.5612 16.3463 11.6693L18 12M10 13L11 7M10 13L9.40011 16.2994C9.18673 17.473 8.00015 18.2 6.85767 17.8573L4 17M11 7L8.10557 8.44721C7.428 8.786 7 9.47852 7 10.2361V12M14.5 3.5C14.5 4.05228 14.0523 4.5 13.5 4.5C12.9477 4.5 12.5 4.05228 12.5 3.5C12.5 2.94772 12.9477 2.5 13.5 2.5C14.0523 2.5 14.5 2.94772 14.5 3.5Z" stroke="url(#paint1_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>

assets/testimonials/volunteering.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" ?>
+<svg fill="url(#paint1_linear)" width="800px" height="800px" viewBox="-10 -10 70 70" xmlns="http://www.w3.org/2000/svg">
+<g id="Solid">
+<path d="M46.79248,24.23a4.05389,4.05389,0,0,0-5.689-.14l-7.69872,6.84a5.25608,5.25608,0,0,1,.58993,2.43,5.39055,5.39055,0,0,1-3.4794,5.02l-6.46895,2.43a1.00694,1.00694,0,0,1-1.27975-.59.98322.98322,0,0,1,.57986-1.28l6.46895-2.43A3.38021,3.38021,0,0,0,31.995,33.36,3.45753,3.45753,0,0,0,28.63555,30H9.99866A1.99982,1.99982,0,0,0,7.999,28H3.99966A1.99982,1.99982,0,0,0,2,30V46a1.99986,1.99986,0,0,0,1.99966,2H7.999a1.99986,1.99986,0,0,0,1.99967-2H14.048l1.24979.51A19.61328,19.61328,0,0,0,37.924,40.87l9.10846-11.01A4.20182,4.20182,0,0,0,46.79248,24.23ZM12.99816,44H9.99866V32h2.9995ZM30.41809,2a8.59142,8.59142,0,0,0-5.42194,1.9082A8.59147,8.59147,0,0,0,19.5742,2a8.68822,8.68822,0,0,0-8.66651,8.68945c0,9.14258,13.03,16.85059,13.58463,17.17481a1.00289,1.00289,0,0,0,1.00765,0C26.05456,27.54,39.08461,19.832,39.08461,10.68945A8.68822,8.68822,0,0,0,30.41809,2Zm-1.772,18.6571a.98319.98319,0,0,1-.65022.2229.99554.99554,0,0,1-.65047-1.7423c3.70153-3.1709,5.74025-6.17188,5.74025-8.44825A2.68158,2.68158,0,0,0,30.41809,8a1,1,0,0,1,0-2,4.68337,4.68337,0,0,1,4.66719,4.68945C35.08528,14.3681,31.584,18.13953,28.64605,20.6571Z"/>
+</g>
+<defs>
+<linearGradient id="paint1_linear" x1="0" y1="0" x2="36.1781" y2="36.4484" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#f74851"/>
+<stop offset="1" stop-color="#ff6e75"/>
+</linearGradient>
+</defs>
+</svg>