Compare commits
10 Commits
ad7c6f2b65
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
2a701d0291 | ||
|
|
913c40b9ec | ||
|
|
e06ec3d5df | ||
|
|
42174ac9f7 | ||
|
|
30fbe7be35 | ||
|
|
44aa84a127 | ||
|
|
c3375f6cfd | ||
|
|
70228b655f | ||
|
|
3899e37f1e | ||
|
|
7ef669f852 |
@@ -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
BIN
frontend/vite-template-master/src/assets/darkmode-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -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>
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
.section {
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Carousel } from '@mantine/carousel';
|
|
||||||
import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core';
|
|
||||||
import classes from './ExpertiseSection.module.css';
|
|
||||||
|
|
||||||
interface ExpertiseSectionProps {
|
|
||||||
title: string;
|
|
||||||
content: string;
|
|
||||||
images: { url: string; alt: string }[];
|
|
||||||
viewMoreLink: string;
|
|
||||||
imageOnLeft?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
|
|
||||||
title,
|
|
||||||
content,
|
|
||||||
images,
|
|
||||||
viewMoreLink: _viewMoreLink,
|
|
||||||
imageOnLeft = false,
|
|
||||||
}) => {
|
|
||||||
const slides = images.map((image) => (
|
|
||||||
<Carousel.Slide key={image.url}>
|
|
||||||
<Image
|
|
||||||
src={image.url}
|
|
||||||
alt={image.alt}
|
|
||||||
style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
|
|
||||||
/>
|
|
||||||
</Carousel.Slide>
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
<Grid className={classes.section}>
|
|
||||||
<Grid.Col order={imageOnLeft ? 2 : 1} span={{ xs: 6, md: 8 }}>
|
|
||||||
<Stack>
|
|
||||||
<Title>{title}</Title>
|
|
||||||
<Text size="lg">{content}</Text>
|
|
||||||
{/* <Button component="a" href={viewMoreLink}>
|
|
||||||
View More
|
|
||||||
</Button> */}
|
|
||||||
</Stack>
|
|
||||||
</Grid.Col>
|
|
||||||
<Grid.Col order={imageOnLeft ? 1 : 2} span={{ xs: 6, md: 4 }}>
|
|
||||||
<Carousel
|
|
||||||
slideSize={300}
|
|
||||||
align="start"
|
|
||||||
slideGap="md"
|
|
||||||
controlsOffset="xl"
|
|
||||||
controlSize={28}
|
|
||||||
loop
|
|
||||||
withIndicators
|
|
||||||
>
|
|
||||||
{slides}
|
|
||||||
</Carousel>
|
|
||||||
</Grid.Col>
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExpertiseSection;
|
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
.title {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 900;
|
||||||
|
|
||||||
|
@media (max-width: $mantine-breakpoint-sm) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
background-color: var(--mantine-color-blue-filled);
|
||||||
|
width: 45px;
|
||||||
|
height: 2px;
|
||||||
|
margin-top: var(--mantine-spacing-sm);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardTitle {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
background-color: var(--mantine-color-blue-filled);
|
||||||
|
width: 45px;
|
||||||
|
height: 2px;
|
||||||
|
margin-top: var(--mantine-spacing-sm);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import { FaChartLine, FaCode, FaEye, FaLightbulb, FaMessage, FaShield } from 'react-icons/fa6';
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Card,
|
||||||
|
Container,
|
||||||
|
Group,
|
||||||
|
SimpleGrid,
|
||||||
|
Text,
|
||||||
|
Title,
|
||||||
|
useMantineTheme,
|
||||||
|
} from '@mantine/core';
|
||||||
|
import classes from './FeatureCards.module.css';
|
||||||
|
|
||||||
|
const mockdata = [
|
||||||
|
{
|
||||||
|
title: 'Computer Vision',
|
||||||
|
description:
|
||||||
|
'I have experience in building computer vision models for a range of applications, from object detection to image segmentation. If your business works with images, these models can improve your efficiency and accuracy.',
|
||||||
|
icon: FaEye,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Natural Language Processing',
|
||||||
|
description:
|
||||||
|
'Expertise working with LLMs, from training to deployment. These state-of-the-art models are a powerful tool for a range of applications, and can drive your business forward.',
|
||||||
|
icon: FaMessage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
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.',
|
||||||
|
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.',
|
||||||
|
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() {
|
||||||
|
const theme = useMantineTheme();
|
||||||
|
const features = mockdata.map((feature) => (
|
||||||
|
<Card key={feature.title} shadow="md" radius="md" className={classes.card} padding="xl">
|
||||||
|
<feature.icon size={50} color={theme.colors.blue[6]} />
|
||||||
|
<Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
|
||||||
|
{feature.title}
|
||||||
|
</Text>
|
||||||
|
<Text fz="sm" c="dimmed" mt="sm">
|
||||||
|
{feature.description}
|
||||||
|
</Text>
|
||||||
|
</Card>
|
||||||
|
));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container size="lg" py="xl">
|
||||||
|
<Group justify="center">
|
||||||
|
<Badge variant="filled" size="lg">
|
||||||
|
My Expertise
|
||||||
|
</Badge>
|
||||||
|
</Group>
|
||||||
|
|
||||||
|
<Title order={2} className={classes.title} ta="center" mt="sm">
|
||||||
|
What can I bring to your business?
|
||||||
|
</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.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl" mt="50px">
|
||||||
|
{features}
|
||||||
|
</SimpleGrid>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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" />
|
||||||
|
|||||||
@@ -14,9 +14,9 @@ export function HeroTitle() {
|
|||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<Text className={classes.description} c="dimmed">
|
<Text className={classes.description} c="dimmed">
|
||||||
Data Scientist 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>
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { Container } from '@mantine/core';
|
import { Container } from '@mantine/core';
|
||||||
import openWebUIGif from '@/assets/open-webui.gif';
|
|
||||||
import outputGif from '@/assets/output.gif';
|
|
||||||
import { Contact } from '@/components/ContactUs/Contact';
|
import { Contact } from '@/components/ContactUs/Contact';
|
||||||
import ExpertiseSection from '@/components/ExpertiseSection/ExpertiseSection';
|
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';
|
||||||
@@ -12,24 +11,12 @@ export function HomePage() {
|
|||||||
<>
|
<>
|
||||||
<HeaderSimple />
|
<HeaderSimple />
|
||||||
<HeroTitle />
|
<HeroTitle />
|
||||||
<ExpertiseSection
|
<FeaturesCards />
|
||||||
title="Computer Vision"
|
|
||||||
content="Expertise in developing and deploying computer vision models for various applications, including object detection, image classification, and more. Ask me about state-of-the-art real-time models for your business."
|
|
||||||
images={[{ url: outputGif, alt: 'Video Segmentation with SAM2.' }]}
|
|
||||||
viewMoreLink="/computer-vision"
|
|
||||||
imageOnLeft
|
|
||||||
/>
|
|
||||||
<ExpertiseSection
|
|
||||||
title="Natural Language Processing"
|
|
||||||
content="Building NLP models for tasks such as sentiment analysis, text classification, and language generation. If you need a chatbot for your business and care about privacy, or a simple text classification algorithm to understand your data, I can help."
|
|
||||||
images={[{ url: openWebUIGif, alt: 'Locally hosted LLM using oLLama and OpenWebUI.' }]}
|
|
||||||
viewMoreLink="/nlp"
|
|
||||||
imageOnLeft={false}
|
|
||||||
/>
|
|
||||||
<Container mt={20}>
|
<Container mt={20}>
|
||||||
<Testimonial />
|
<Testimonial />
|
||||||
</Container>
|
</Container>
|
||||||
<Contact />
|
<Contact />
|
||||||
|
<FooterSocial />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user