adding content and images

Author: JakeCallcut

public/education-one.png

@@ -11,7 +11,7 @@ interface Project {
 export default function ProjectCard({ project }: { project: Project }) {
   return (
   <div className="rounded-2xl shadow-soft p-8 bg-card flex flex-col items-center">
-  <img src={project.image} alt={project.name} className="w-full h-80 object-cover rounded-xl mb-6 border-2 border-primary" />
+  <img src={project.image} alt={project.name} className="w-full aspect-[16/9] object-cover rounded-xl mb-6 border-2 border-primary" />
       <h3 className="text-2xl font-bold mb-2 text-center">{project.name}</h3>
       <p className="text-muted-foreground mb-4 text-center">{project.description}</p>
       <div className="flex flex-wrap gap-2 mb-4 justify-center">

public/education-two.png

@@ -5,6 +5,7 @@ interface ExperienceItem {
   role: string;
   period: string;
   location: string;
+  image?: string;
   bullets: string[];
 }
 
@@ -13,17 +14,30 @@ export default function TimelineItem({ item }: { item: ExperienceItem }) {
     <motion.div initial={{ x: -40, opacity: 0 }} animate={{ x: 0, opacity: 1 }} transition={{ duration: 0.4 }} className="relative pl-8">
       <div className="absolute left-0 top-2 w-4 h-4 bg-primary rounded-full shadow-soft" />
       <div className="bg-card rounded-2xl p-6 shadow-soft">
-        <div className="flex justify-between items-center mb-2">
-          <span className="font-semibold text-lg">{item.company}</span>
-          <span className="text-sm text-muted-foreground">{item.period}</span>
+        <div className="flex flex-col md:flex-row gap-6">
+          {item.image && (
+            <div className="flex-shrink-0">
+              <img 
+                src={item.image} 
+                alt={`${item.company} logo`} 
+                className="w-16 h-16 object-contain rounded-xl border-2 border-primary/20 bg-muted/10" 
+              />
+            </div>
+          )}
+          <div className="flex-1">
+            <div className="flex justify-between items-center mb-2">
+              <span className="font-semibold text-lg">{item.company}</span>
+              <span className="text-sm text-muted-foreground">{item.period}</span>
+            </div>
+            <div className="text-primary font-medium mb-1">{item.role}</div>
+            <div className="text-sm text-muted-foreground mb-2">{item.location}</div>
+            <ul className="list-disc ml-4 text-base">
+              {item.bullets.map((bullet, i) => (
+                <li key={i}>{bullet}</li>
+              ))}
+            </ul>
+          </div>
         </div>
-        <div className="text-primary font-medium mb-1">{item.role}</div>
-        <div className="text-sm text-muted-foreground mb-2">{item.location}</div>
-        <ul className="list-disc ml-4 text-base">
-          {item.bullets.map((bullet, i) => (
-            <li key={i}>{bullet}</li>
-          ))}
-        </ul>
       </div>
     </motion.div>
   );

public/experience-one.png

@@ -24,8 +24,9 @@
       "role": "Developer",
       "period": "2025 — Present",
       "location": "Glasgow, Scotland",
+      "image": "/experience-one.png",
       "bullets": [
-        "Collaborated with a cross-functional team to design and deliver a next-generation NFC product.",
+        "Developed an iOS app that uses NFC tiles and encrypted payloads to trigger custom shortcuts and actions.",
         "Introduced modern DevOps workflows that reduced release friction and improved reliability."
       ]
     },
@@ -34,6 +35,7 @@
       "role": "Software Engineer",
       "period": "2024 — Present",
       "location": "Edinburgh, Scotland",
+      "image": "/experience-two.png",
       "bullets": [
         "Developed software to support healthcare technology used in clinical environments.",
         "Worked closely with engineers and medical staff to ensure safety-critical compliance."
@@ -44,14 +46,24 @@
     {
       "University": "Heriot-Watt University",
       "Programme": "MEng Software Engineering",
+      "grade": "On track for First Class Honours",
       "period": "2022 — 2027",
+      "image": "/education-one.png",
       "location": "Edinburgh, Scotland"
+    },
+    {
+      "University": "Torquay Boys' Grammar School",
+      "Programme": "A Levels: Maths, Physics, Computer Science",
+      "grade": "AAA",
+      "period": "2020 — 2022",
+      "image": "/education-two.png",
+      "location": "Torquay, England"
     }
   ],
   "projects": [
     {
       "name": "Lumina",
-      "description": "A smart lighting system integrating IoT hardware with a mobile app. Lumina enables users to control and automate lighting through a sleek Flutter interface while syncing with Raspberry Pi-powered devices in real time.",
+      "description": "A smart home system integrating IoT hardware with a mobile app. Lumina enables users to control and automate devices through a sleek Flutter interface while syncing with a Raspberry Pi-powered hub in real time.",
       "tech": ["Flutter", "Firebase", "Socket.IO", "Raspberry Pi"],
       "links": {
         "demo": "https://demo.url",

public/experience-two.png

@@ -30,15 +30,31 @@ export default function About() {
         </div>
         <div className="mb-6">
           <h2 className="text-xl font-semibold mb-4">Education</h2>
-          <div className="grid gap-4">
+          <div className="grid gap-6">
             {education.map((edu, idx) => (
-              <div key={idx} className="rounded-2xl bg-card shadow-soft p-4 flex flex-col gap-1">
-                <div className="font-bold text-lg text-primary">{edu.University}</div>
-                <div className="flex flex-wrap gap-2 items-center">
-                  <span className="badge badge-outline">{edu.Programme}</span>
-                  <span className="badge badge-secondary">{edu.period}</span>
+              <div key={idx} className="rounded-2xl bg-card shadow-soft p-6">
+                <div className="flex flex-col md:flex-row gap-4">
+                  {edu.image && (
+                    <div className="flex-shrink-0">
+                      <img 
+                        src={edu.image} 
+                        alt={`${edu.University} logo`} 
+                        className="w-16 h-16 object-contain rounded-xl border-2 border-primary/20 bg-muted/10" 
+                      />
+                    </div>
+                  )}
+                  <div className="flex-1">
+                    <div className="font-bold text-lg text-primary mb-2">{edu.University}</div>
+                    <div className="font-medium text-base mb-2">{edu.Programme}</div>
+                    <div className="flex flex-wrap gap-2 items-center mb-2">
+                      <span className="badge badge-outline">{edu.period}</span>
+                      {edu.grade && (
+                        <span className="badge badge-secondary">{edu.grade}</span>
+                      )}
+                    </div>
+                    <div className="text-sm text-muted-foreground">{edu.location}</div>
+                  </div>
                 </div>
-                <div className="text-sm text-muted-foreground">{edu.location}</div>
               </div>
             ))}
           </div>