Compare commits

...

4 Commits

10 changed files with 99 additions and 24 deletions

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

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>

View File

@@ -1,4 +1,4 @@
import { FaChartLine, FaEye, FaMessage, FaShield, FaCode, FaLightbulb } 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,25 +27,25 @@ 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', title: 'Cutting-Edge Research',
description: 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.", '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, icon: FaLightbulb,
}, },
]; ];
@@ -78,8 +78,8 @@ export function FeaturesCards() {
<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">

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

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

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" />

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>

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