Refactor components for improved readability: standardize import order, enhance formatting, and ensure consistent newline usage across ColorPalette, Contact, FeatureCards, FooterSocial, HeaderSimple, HeroTitle, and Home.page components.

Add FooterSocial component: implement social media links with responsive styling for enhanced footer experience.
Update index.html: change favicon to a new PNG image and update the page title to 'Craig Macfadyen'. Add dark mode icon asset.
2025-04-16 12:17:38 +01:00 · 2025-04-16 12:14:17 +01:00 · 2025-04-16 11:59:27 +01:00 · 2025-04-16 11:58:06 +01:00 · 2025-04-16 11:22:31 +01:00
10 changed files with 104 additions and 23 deletions
--- a/frontend/vite-template-master/index.html
+++ b/frontend/vite-template-master/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/png" href="/src/assets/darkmode-small.png" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
    />
-    <title>Vite + Mantine App</title>
+    <title>Craig Macfadyen</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/vite-template-master/src/assets/darkmode-small.png
+++ b/frontend/vite-template-master/src/assets/darkmode-small.png
--- a/frontend/vite-template-master/src/components/ColorPalette/ColorPalette.story.tsx
+++ b/frontend/vite-template-master/src/components/ColorPalette/ColorPalette.story.tsx
@@ -13,4 +13,4 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

-export const Default: Story = {}; 
+export const Default: Story = {};
--- a/frontend/vite-template-master/src/components/ContactUs/Contact.tsx
+++ b/frontend/vite-template-master/src/components/ContactUs/Contact.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Container, Text, Stack } from '@mantine/core';
+import { Anchor, Container, Stack, Text } from '@mantine/core';
 import classes from './Contact.module.css';

 export function Contact() {
@@ -25,7 +25,11 @@ export function Contact() {
          </Text>
          <Text size="lg">
            LinkedIn:{' '}
-            <Anchor href="https://www.linkedin.com/in/craig-macfadyen-9a2041197" target="_blank" className={classes.link}>
+            <Anchor
+              href="https://www.linkedin.com/in/craig-macfadyen-9a2041197"
+              target="_blank"
+              className={classes.link}
+            >
              linkedin.com/in/craigmacfadyen
            </Anchor>
          </Text>
--- a/frontend/vite-template-master/src/components/FeatureCards/FeatureCards.tsx
+++ b/frontend/vite-template-master/src/components/FeatureCards/FeatureCards.tsx
@@ -1,4 +1,4 @@
-import { FaChartLine, FaEye, FaMessage, FaShield, FaCode } from 'react-icons/fa6';
+import { FaChartLine, FaCode, FaEye, FaLightbulb, FaMessage, FaShield } from 'react-icons/fa6';
 import {
  Badge,
  Card,
@@ -9,7 +9,7 @@ import {
  Title,
  useMantineTheme,
 } from '@mantine/core';
-import classes from "./FeatureCards.module.css";
+import classes from './FeatureCards.module.css';

 const mockdata = [
  {
@@ -27,21 +27,27 @@ const mockdata = [
  {
    title: 'Data Science',
    description:
-      "Sometimes you just need a simple model and some nice graphs. I can help you understand your data and build a model that works for you.",
+      'Sometimes you just need a simple model and some nice graphs. I can help you understand your data and build a model that works for you.',
    icon: FaChartLine,
  },
  {
    title: 'Privacy Focused',
    description:
-      "Your data is valuable and sensitive. All my solutions are built with privacy and security in mind from the ground up, ensuring regulatory compliance and protecting your competitive advantage.",
+      'Your data is valuable and sensitive. All my solutions are built with privacy and security in mind from the ground up, ensuring regulatory compliance and protecting your competitive advantage.',
    icon: FaShield,
  },
  {
    title: 'Open Source',
    description:
-      "Leverage the power and innovation of open source technologies while avoiding vendor lock-in. This approach provides transparency, cost-effectiveness, and ensures your solutions remain maintainable long-term.",
+      'Leverage the power and innovation of open source technologies while avoiding vendor lock-in. This approach provides transparency, cost-effectiveness, and ensures your solutions remain maintainable long-term.',
    icon: FaCode,
  },
+  {
+    title: 'Cutting-Edge Research',
+    description:
+      'I stay continuously updated with the latest advancements in AI research and immediately apply emerging techniques to solve business problems. Your solutions will never be outdated or obsolete.',
+    icon: FaLightbulb,
+  },
 ];

 export function FeaturesCards() {
@@ -71,9 +77,9 @@ export function FeaturesCards() {
      </Title>

      <Text c="dimmed" className={classes.description} ta="center" mt="md">
-        I've worked with a range of businesses, from startups to established companies, and I've 
-        learned a lot about what works and what doesn't. I work across the full Machine Learning stack, from 
-        data collection to model deployment.
+        I've worked with a range of businesses, from startups to established companies, and I've
+        learned a lot about what works and what doesn't. I work across the full Machine Learning
+        stack, from data collection to model deployment.
      </Text>

      <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px">
@@ -81,4 +87,4 @@ export function FeaturesCards() {
      </SimpleGrid>
    </Container>
  );
-}
+}
--- a/frontend/vite-template-master/src/components/FooterSocial/FooterSocial.module.css
+++ b/frontend/vite-template-master/src/components/FooterSocial/FooterSocial.module.css
@@ -0,0 +1,22 @@
+.footer {
+    margin-top: 120px;
+    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  }
+  
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: var(--mantine-spacing-xl);
+    padding-bottom: var(--mantine-spacing-xl);
+  
+    @media (max-width: $mantine-breakpoint-xs) {
+      flex-direction: column;
+    }
+  }
+  
+  .links {
+    @media (max-width: $mantine-breakpoint-xs) {
+      margin-top: var(--mantine-spacing-md);
+    }
+  }
--- a/frontend/vite-template-master/src/components/FooterSocial/FooterSocial.tsx
+++ b/frontend/vite-template-master/src/components/FooterSocial/FooterSocial.tsx
@@ -0,0 +1,46 @@
+import { FaGithub, FaLinkedin } from 'react-icons/fa';
+import { SiGitea } from 'react-icons/si';
+import { ActionIcon, Container, Group, Text } from '@mantine/core';
+import classes from './FooterSocial.module.css';
+
+export function FooterSocial() {
+  return (
+    <div className={classes.footer}>
+      <Container className={classes.inner}>
+        <Text>Craig Macfadyen</Text>
+        <Group gap={0} className={classes.links} justify="flex-end" wrap="nowrap">
+          <ActionIcon
+            component="a"
+            target="_blank"
+            href="https://github.com/cdmacfadyen"
+            size="lg"
+            color="gray"
+            variant="subtle"
+          >
+            <FaGithub size={18} />
+          </ActionIcon>
+          <ActionIcon
+            component="a"
+            target="_blank"
+            href="https://gitea.craigmacfadyen.co.uk"
+            size="lg"
+            color="gray"
+            variant="subtle"
+          >
+            <SiGitea size={18} />
+          </ActionIcon>
+          <ActionIcon
+            component="a"
+            target="_blank"
+            href="https://www.linkedin.com/in/craig-macfadyen-9a2041197/"
+            size="lg"
+            color="gray"
+            variant="subtle"
+          >
+            <FaLinkedin size={18} />
+          </ActionIcon>
+        </Group>
+      </Container>
+    </div>
+  );
+}
--- a/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx
+++ b/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx
@@ -1,6 +1,5 @@
-import { Anchor, Burger, Container, Group } from '@mantine/core';
+import { Burger, Container, Group, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { MantineLogo } from '@mantinex/mantine-logo';
 import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import classes from './HeaderSimple.module.css';

@@ -10,14 +9,16 @@ export function HeaderSimple() {
  return (
    <header className={classes.header}>
      <Container size="md" className={classes.inner}>
-        <MantineLogo size={28} />
+        <Text fw={700} size="lg" style={{ userSelect: 'none', cursor: 'default' }}>
+          Craig Macfadyen
+        </Text>
        <Group gap={5} visibleFrom="xs">
-          <Anchor href="#" className={classes.link}>
+          {/* <Anchor href="#" className={classes.link}>
            CV
          </Anchor>
          <Anchor href="#" className={classes.link}>
            Blog
-          </Anchor>
+          </Anchor> */}
        </Group>

        <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
--- a/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx
+++ b/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx
@@ -14,9 +14,9 @@ export function HeroTitle() {
        </h1>

        <Text className={classes.description} c="dimmed">
-          Machine Learning Engineer with experience in consulting and research. Expertise in Computer Vision
-          and Large Language Models. Take a look at what I can do for your business and get in touch
-          if you have any questions or you'd like to work together!
+          Machine Learning Engineer with experience in consulting and research. Expertise in
+          Computer Vision and Large Language Models. Take a look at what I can do for your business
+          and get in touch if you have any questions or you'd like to work together!
        </Text>
      </Container>
    </div>
--- a/frontend/vite-template-master/src/pages/Home.page.tsx
+++ b/frontend/vite-template-master/src/pages/Home.page.tsx
@@ -1,9 +1,10 @@
 import { Container } from '@mantine/core';
 import { Contact } from '@/components/ContactUs/Contact';
+import { FeaturesCards } from '@/components/FeatureCards/FeatureCards';
+import { FooterSocial } from '@/components/FooterSocial/FooterSocial';
 import { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple';
 import { HeroTitle } from '@/components/HeroTitle/HeroTitle';
 import Testimonial from '@/components/Testimonial/Testimonial';
-import { FeaturesCards } from '@/components/FeatureCards/FeatureCards';

 export function HomePage() {
  return (
@@ -15,6 +16,7 @@ export function HomePage() {
        <Testimonial />
      </Container>
      <Contact />
+      <FooterSocial />
    </>
  );
 }
Author	SHA1	Message	Date
Craig	2a701d0291	Refactor components for improved readability: standardize import order, enhance formatting, and ensure consistent newline usage across ColorPalette, Contact, FeatureCards, FooterSocial, HeaderSimple, HeroTitle, and Home.page components.	2025-04-16 12:17:38 +01:00
Craig	913c40b9ec	Add FooterSocial component: implement social media links with responsive styling for enhanced footer experience.	2025-04-16 12:14:17 +01:00
Craig	e06ec3d5df	Update index.html: change favicon to a new PNG image and update the page title to 'Craig Macfadyen'. Add dark mode icon asset.	2025-04-16 11:59:27 +01:00
Craig	42174ac9f7	Update HeaderSimple component: replace MantineLogo with a custom Text element displaying the name 'Craig Macfadyen' for a personalized header experience.	2025-04-16 11:58:06 +01:00
Craig	30fbe7be35	Add new feature card to FeatureCards component: introduce 'Cutting-Edge Research' card with an icon and description to highlight ongoing advancements in AI research.	2025-04-16 11:22:31 +01:00