Merge pull request 'development' (#47) from development into main

Reviewed-on: #47

README.md

@@ -5,7 +5,7 @@ This site contains information relating to my personal situation, however, you a
 ## Screenshots
 
 <p align="center">
-  <img src="assets/images/main_page.png" width="40%">
+  <img src="assets/images/main.png" width="40%">
   <img src="assets/images/light_mode.png" width="40%">
 </p>
 
@@ -25,17 +25,20 @@ Get starting but installing all of the dependencies of the project.
 
 ```bash
 npm install
+
 ```
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
 ```bash
 npm run dev
+
 ```
 
 ```bash
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
+
 ```
 
 ## Building
@@ -45,6 +48,7 @@ To create a production version of the app:
 ```bash
 npm run build
 
+
 ```
 
 You can preview the production build with `npm run preview`.

src/lib/components/Cards/Card.svelte

@@ -9,13 +9,13 @@
             <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
             <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
         </div>
-        <hr class="mb-4 border-1" />
-        <div class="flex-1 flex flex-col justify-center p-5">
+        <hr class="border-1" />
+        <div class="flex-1 flex flex-col justify-center mt-4 mb-8">
             <slot name="content"/>
         </div>
         
-        <hr class="my-4 border-1" />
-        <div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
+        <hr class="border-1" />
+        <div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
             <slot name="footerLeft"/>
             <slot name="footerRight"/>
         </div>

src/lib/components/Collapsible.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let open = false;
+</script>
+
+<div class="w-full">
+    <button
+        type="button"
+        class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
+        on:click={() => open = !open}
+        aria-expanded={open}
+    >
+        <span><slot name="label"/></span>
+        <svg
+            class="w-5 h-5 ml-2 transition-transform duration-200"
+            style="transform: rotate({open ? 90 : 0}deg)"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+    </button>
+    <div
+        class="overflow-hidden transition-all duration-300"
+        style="max-height: {open ? '1000px' : '0'}"
+        aria-hidden={!open}
+    >
+        <div class="pt-2">
+            <slot name="content"/>
+        </div>
+    </div>
+</div>

src/lib/components/Timeline.svelte

@@ -1,40 +1,28 @@
 <script lang="ts">
+    import Collapsible from "./Collapsible.svelte";
+
     export let timelineData: Array<{
         title: string;
         description: string;
         duration: string;
     }>;
-
-    // Track open/closed state for each entry
-    let openStates = timelineData.map(() => false);
-
-    function toggle(index: number) {
-        openStates[index] = !openStates[index];
-    }
-
-    toggle(0); // Open the first entry by default
 </script>
 
 <div class="flex flex-col items-center justify-center">
   <div class="max-w-4xl w-full">
     {#each timelineData as entry, i}
       <div class="relative border-l border-gray-700 pl-8 pb-12">
-        {#if openStates[i]}
+        {#if i == 0}
           <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
         {:else}
           <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
         {/if}
         <p class="text-sm opacity-70">{entry.duration}</p>
-        <button
-          class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
-          on:click={() => toggle(i)}
-          aria-expanded={openStates[i]}
-        >
-        <h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
-        </button>
-        {#if openStates[i]}
-          <p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
-        {/if}
+
+        <Collapsible open={i==0}>
+          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
+          <span slot="content">{@html entry.description}</span>
+        </Collapsible>
       </div>
     {/each}
   </div>

src/main.svelte

@@ -8,6 +8,7 @@
     import GridGallery from "$lib/components/GridGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
     import Timeline from '$lib/components/Timeline.svelte';
+    import Collapsible from '$lib/components/Collapsible.svelte';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,7 +25,7 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="[Experience]">
+    <Section label="[About]">
         <Card>
             <h2 slot="headerLeft">{info.name}</h2>
             <h2 slot="headerRight">{info.job_title}</h2>
@@ -34,7 +35,7 @@
                     alt="Avatar"
                     class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
                 />
-                <p>{@html info.about}</p>
+                <p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
             </div>
             <h3 slot="footerLeft">{@html info.location}</h3>
         </Card>
@@ -46,8 +47,12 @@
             {#each info.skills as skill}
                 <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
                     <h2 slot="headerLeft">{skill.name}</h2>
+                    <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
                     <div slot="content">
-                        {skill.about}
+                        <Collapsible>
+                            <span slot="label" class="text-lg">About {skill.name}</span>
+                            <span slot="content">{skill.about}</span>
+                        </Collapsible>
                         <SkillProgress skillColour={skill.colour} value={skill.competency} />
                     </div>
                     <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>

src/routes/contact/+page.svelte

@@ -26,9 +26,12 @@
     }
 </script>
 
-<Card headerLeft="Contact Me">
+<Card>
+    <div slot="headerLeft">
+        Contact Me
+    </div>
     <!-- Contact Form -->
-     <form class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
+     <form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
         <div class="hidden">
             <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
             <input type="hidden" name="replyTo" value="@">

static/json/me.json

@@ -22,12 +22,12 @@
       "competency": 80
     },
     {
-      "name": "Tailwind CSS",
-      "logo": "devicon-tailwindcss-plain",
-      "colour": "bg-blue-800",
-      "link": "https://tailwindcss.com/",
-      "about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
-      "competency": 60
+      "name" : "Python",
+      "logo": "devicon-python-plain",
+      "colour": "bg-yellow-400",
+      "link": "https://python.org",
+      "about": "Python is a versatile language known for its simplicity and readability, making it ideal for rapid development and data analysis.",
+      "competency": 70
     },
     {
       "name": "Git",
@@ -45,6 +45,54 @@
       "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
       "competency": 100
     },
+    {
+      "name": "Kubernetes",
+      "logo": "devicon-kubernetes-plain",
+      "colour": "bg-blue-600",
+      "link": "https://kubernetes.io",
+      "about": "Kubernetes automates the deployment, scaling, and management of containerized applications, enhancing operational efficiency.",
+      "competency": 40
+    },
+    {
+      "name": "PostgreSQL",
+      "logo": "devicon-postgresql-plain",
+      "colour": "bg-blue-700",
+      "link": "https://postgresql.org",
+      "about": "PostgreSQL is a powerful, open-source relational database known for its robustness and advanced features.",
+      "competency": 70
+    },
+    {
+      "name": "MongoDB",
+      "logo": "devicon-mongodb-plain",
+      "colour": "bg-green-500",
+      "link": "https://mongodb.com",
+      "about": "MongoDB is a NoSQL database that provides flexibility and scalability for modern applications with unstructured data.",
+      "competency": 70
+    },
+    {
+      "name": "Redis",
+      "logo": "devicon-redis-plain",
+      "colour": "bg-red-600",
+      "link": "https://redis.io",
+      "about": "Redis is an in-memory data structure store, used as a database, cache, and message broker for high-performance applications.",
+      "competency": 30
+    },
+    {
+      "name": "JavaScript",
+      "logo": "devicon-javascript-plain",
+      "colour": "bg-yellow-500",
+      "link": "https://javascript.com",
+      "about": "JavaScript is a versatile language that powers dynamic web applications and enhances user interactivity.",
+      "competency": 60
+    },
+    {
+      "name": "Tailwind CSS",
+      "logo": "devicon-tailwindcss-plain",
+      "colour": "bg-blue-800",
+      "link": "https://tailwindcss.com/",
+      "about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
+      "competency": 60
+    },
     {
       "name": "Svelte",
       "logo": "devicon-svelte-plain",
@@ -56,9 +104,14 @@
   ],
   "timeline" : [
     {
-      "duration" : "September 2022 - Present",
-      "title" : "Thales UK - Software Engineer",
-      "description" : "As a software engineering apprentice at Thales UK, I find myself partaking in agile / scrum development methodologies in a strong team of 6 other engineers. The team iterates on a pre-existing system designed for the MOD, written in C++, using internal frameworks to assist."
+      "duration" : "April 2025 - Present",
+      "title" : "Thales UK (DDCC) - Software Engineer",
+      "description" : "As a 3rd year apprentice at Thales UK’s Digital Data Competency Centre, I have taken on responsibility for developing microservices that encapsulate Machine Learning models provided by R&D teams, helping to advance product readiness. These services are primarily written in Python and deployed to Kubernetes clusters for use across the business. Our team also designs and maintains CI/CD pipelines to automate the deployment of both these services and their supporting infrastructure."
+    },
+    {
+      "duration" : "September 2022 - April 2025",
+      "title" : "Thales UK (ISR) - Software Engineer",
+      "description" : "As a software engineering apprentice at Thales UK, Intelligence Surveillance and Reconnaissance, I worked within an agile team of six engineers, contributing to the ongoing development of a C++ system for the MOD. My role involved collaborating closely with colleagues, following Scrum methodologies, and leveraging internal frameworks to enhance and maintain the existing platform."
     },
     {
       "duration" : "September 2022 - Present",