craig/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: craig:44aa84a127f2004c57994ea86f67161483ce0640
Branches Tags
craig:main craig:shadcn
...
compare: craig:main
Branches Tags
craig:main craig:shadcn

5 Commits
44aa84a127 ... main

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
10 changed files with 104 additions and 23 deletions
Expand all files Collapse all files

4
frontend/vite-template-master/index.html
View File

@@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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 <meta
name="viewport" name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
/> />
<title>Vite + Mantine App</title> <title>Craig Macfadyen</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
frontend/vite-template-master/src/assets/darkmode-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
frontend/vite-template-master/src/components/ColorPalette/ColorPalette.story.tsx
View File

@@ -13,4 +13,4 @@ const meta = {
export default meta; export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Default: Story = {}; export const Default: Story = {};

8
frontend/vite-template-master/src/components/ContactUs/Contact.tsx
View File

@@ -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'; import classes from './Contact.module.css';
export function Contact() { export function Contact() {
@@ -25,7 +25,11 @@ export function Contact() {
</Text> </Text>
<Text size="lg"> <Text size="lg">
LinkedIn:{' '} 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 linkedin.com/in/craigmacfadyen
</Anchor> </Anchor>
</Text> </Text>

24
frontend/vite-template-master/src/components/FeatureCards/FeatureCards.tsx
View File

@@ -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 { import {
Badge, Badge,
Card, Card,
@@ -9,7 +9,7 @@ import {
Title, Title,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import classes from "./FeatureCards.module.css"; import classes from './FeatureCards.module.css';
const mockdata = [ const mockdata = [
{ {
@@ -27,21 +27,27 @@ const mockdata = [
{ {
title: 'Data Science', title: 'Data Science',
description: 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, icon: FaChartLine,
}, },
{ {
title: 'Privacy Focused', title: 'Privacy Focused',
description: 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, icon: FaShield,
}, },
{ {
title: 'Open Source', title: 'Open Source',
description: 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, 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() { export function FeaturesCards() {
@@ -71,9 +77,9 @@ export function FeaturesCards() {
</Title> </Title>
<Text c="dimmed" className={classes.description} ta="center" mt="md"> <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 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 learned a lot about what works and what doesn't. I work across the full Machine Learning
data collection to model deployment. stack, from data collection to model deployment.
</Text> </Text>
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px"> <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px">
@@ -81,4 +87,4 @@ export function FeaturesCards() {
</SimpleGrid> </SimpleGrid>
</Container> </Container>
); );
} }

22
frontend/vite-template-master/src/components/FooterSocial/FooterSocial.module.css Normal file
View File

@@ -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);
}
}

46
frontend/vite-template-master/src/components/FooterSocial/FooterSocial.tsx Normal file
View File

@@ -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>
);
}

11
frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx
View File

@@ -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 { useDisclosure } from '@mantine/hooks';
import { MantineLogo } from '@mantinex/mantine-logo';
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle'; import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
import classes from './HeaderSimple.module.css'; import classes from './HeaderSimple.module.css';
@@ -10,14 +9,16 @@ export function HeaderSimple() {
return ( return (
<header className={classes.header}> <header className={classes.header}>
<Container size="md" className={classes.inner}> <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"> <Group gap={5} visibleFrom="xs">
<Anchor href="#" className={classes.link}> {/* <Anchor href="#" className={classes.link}>
CV CV
</Anchor> </Anchor>
<Anchor href="#" className={classes.link}> <Anchor href="#" className={classes.link}>
Blog Blog
</Anchor> </Anchor> */}
</Group> </Group>
<Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" /> <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />

6
frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx
View File

@@ -14,9 +14,9 @@ export function HeroTitle() {
</h1> </h1>
<Text className={classes.description} c="dimmed"> <Text className={classes.description} c="dimmed">
Machine Learning Engineer with experience in consulting and research. Expertise in Computer Vision Machine Learning Engineer with experience in consulting and research. Expertise in
and Large Language Models. Take a look at what I can do for your business and get in touch Computer Vision and Large Language Models. Take a look at what I can do for your business
if you have any questions or you'd like to work together! and get in touch if you have any questions or you'd like to work together!
</Text> </Text>
</Container> </Container>
</div> </div>

4
frontend/vite-template-master/src/pages/Home.page.tsx
View File

@@ -1,9 +1,10 @@
import { Container } from '@mantine/core'; import { Container } from '@mantine/core';
import { Contact } from '@/components/ContactUs/Contact'; 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 { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple';
import { HeroTitle } from '@/components/HeroTitle/HeroTitle'; import { HeroTitle } from '@/components/HeroTitle/HeroTitle';
import Testimonial from '@/components/Testimonial/Testimonial'; import Testimonial from '@/components/Testimonial/Testimonial';
import { FeaturesCards } from '@/components/FeatureCards/FeatureCards';
export function HomePage() { export function HomePage() {
return ( return (
@@ -15,6 +16,7 @@ export function HomePage() {
<Testimonial /> <Testimonial />
</Container> </Container>
<Contact /> <Contact />
<FooterSocial />
</> </>
); );
} }