From 0dc593c8170f9164a64ae243c0a085ddd8409e1b Mon Sep 17 00:00:00 2001 From: Craig Date: Thu, 10 Apr 2025 15:04:30 +0100 Subject: [PATCH] Refactor imports and improve layout in various components; update styles for consistency and readability. --- .../ColorSchemeToggle/ColorSchemeToggle.tsx | 4 +- .../src/components/ContactUs/Contact.tsx | 12 ++- .../src/components/ContactUs/ContactIcons.tsx | 8 +- .../components/ContactUs/ContactUs.module.css | 2 +- .../src/components/ContactUs/ContactUs.tsx | 4 +- .../ExpertiseSection/ExpertiseSection.tsx | 26 +++-- .../components/HeaderSimple/HeaderSimple.tsx | 4 +- .../components/HeroTitle/HeroTitle.module.css | 3 +- .../src/components/HeroTitle/HeroTitle.tsx | 9 +- .../components/Testimonial/Testimonial.tsx | 98 +++++++++---------- frontend/vite-template-master/src/main.tsx | 2 + .../src/pages/Home.page.tsx | 50 +++++----- 12 files changed, 116 insertions(+), 106 deletions(-) diff --git a/frontend/vite-template-master/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/frontend/vite-template-master/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx index c409949..f42bb32 100644 --- a/frontend/vite-template-master/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx +++ b/frontend/vite-template-master/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx @@ -1,6 +1,6 @@ -import { ActionIcon, useMantineColorScheme } from '@mantine/core'; -import { TbSun, TbMoon } from 'react-icons/tb'; import cx from 'clsx'; +import { TbMoon, TbSun } from 'react-icons/tb'; +import { ActionIcon, useMantineColorScheme } from '@mantine/core'; import classes from './ColorSchemeToggle.module.css'; export function ColorSchemeToggle() { diff --git a/frontend/vite-template-master/src/components/ContactUs/Contact.tsx b/frontend/vite-template-master/src/components/ContactUs/Contact.tsx index 1b75914..e4de1ab 100644 --- 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 { Container, Stack, Title, Text, Anchor } from '@mantine/core'; +import { Anchor, Container, Stack, Text, Title } from '@mantine/core'; import classes from './Contact.module.css'; export function Contact() { @@ -7,15 +7,19 @@ export function Contact() { Get in Touch - If you'd like to collaborate, have any questions, or just want to say hello, feel free to reach out! + If you'd like to collaborate, have any questions, or just want to say hello, feel free to + reach out! Email: cdmacfadyen@proton.me - LinkedIn: linkedin.com/in/craigmacfadyen + LinkedIn:{' '} + + linkedin.com/in/craigmacfadyen + ); -} \ No newline at end of file +} diff --git a/frontend/vite-template-master/src/components/ContactUs/ContactIcons.tsx b/frontend/vite-template-master/src/components/ContactUs/ContactIcons.tsx index e0aeea9..5babd4e 100644 --- a/frontend/vite-template-master/src/components/ContactUs/ContactIcons.tsx +++ b/frontend/vite-template-master/src/components/ContactUs/ContactIcons.tsx @@ -1,4 +1,4 @@ -import { TbAt, TbMapPin, TbPhone, TbSun } from 'react-icons/tb'; +import { TbAt, TbSun } from 'react-icons/tb'; import { Box, Stack, Text } from '@mantine/core'; import classes from './ContactIcons.module.css'; @@ -25,11 +25,9 @@ function ContactIcon({ icon: Icon, title, description, ...others }: ContactIconP ); } -const MOCKDATA = [ - { title: 'Email', description: 'hello@mantine.dev', icon: TbAt }, -]; +const MOCKDATA = [{ title: 'Email', description: 'hello@mantine.dev', icon: TbAt }]; export function ContactIconsList() { const items = MOCKDATA.map((item, index) => ); return {items}; -} \ No newline at end of file +} diff --git a/frontend/vite-template-master/src/components/ContactUs/ContactUs.module.css b/frontend/vite-template-master/src/components/ContactUs/ContactUs.module.css index b1fa6be..e402a66 100644 --- a/frontend/vite-template-master/src/components/ContactUs/ContactUs.module.css +++ b/frontend/vite-template-master/src/components/ContactUs/ContactUs.module.css @@ -15,7 +15,7 @@ .title { font-family: - Greycliff CF, + "Greycliff CF", var(--mantine-font-family); color: var(--mantine-color-white); line-height: 1; diff --git a/frontend/vite-template-master/src/components/ContactUs/ContactUs.tsx b/frontend/vite-template-master/src/components/ContactUs/ContactUs.tsx index a248e83..071f2aa 100644 --- a/frontend/vite-template-master/src/components/ContactUs/ContactUs.tsx +++ b/frontend/vite-template-master/src/components/ContactUs/ContactUs.tsx @@ -17,7 +17,7 @@ const social = [TbBrandInstagram, TbBrandTwitter, TbBrandYoutube]; export function ContactUs() { const icons = social.map((Icon, index) => ( - + )); @@ -63,4 +63,4 @@ export function ContactUs() { ); -} \ No newline at end of file +} diff --git a/frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.tsx b/frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.tsx index d4d18bf..7a8a4eb 100644 --- a/frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.tsx +++ b/frontend/vite-template-master/src/components/ExpertiseSection/ExpertiseSection.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Button, Text, Title, Container, Stack, Grid, Image, Center } from '@mantine/core'; import { Carousel } from '@mantine/carousel'; +import { Container, Grid, Image, Stack, Text, Title } from '@mantine/core'; import classes from './ExpertiseSection.module.css'; interface ExpertiseSectionProps { @@ -15,19 +15,23 @@ const ExpertiseSection: React.FC = ({ title, content, images, - viewMoreLink, + viewMoreLink: _viewMoreLink, imageOnLeft = false, }) => { const slides = images.map((image) => ( - {image.alt} + {image.alt} )); return ( - + {title} {content} @@ -36,8 +40,16 @@ const ExpertiseSection: React.FC = ({ */} - - + + {slides} @@ -46,4 +58,4 @@ const ExpertiseSection: React.FC = ({ ); }; -export default ExpertiseSection; \ No newline at end of file +export default ExpertiseSection; diff --git a/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx b/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx index 4d4fe7b..7eef3fe 100644 --- a/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx +++ b/frontend/vite-template-master/src/components/HeaderSimple/HeaderSimple.tsx @@ -2,8 +2,8 @@ import { useState } from 'react'; import { Burger, Container, Group } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { MantineLogo } from '@mantinex/mantine-logo'; -import classes from './HeaderSimple.module.css'; import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle'; +import classes from './HeaderSimple.module.css'; const links = [ { link: '/about', label: 'Features' }, @@ -44,4 +44,4 @@ export function HeaderSimple() { ); -} \ No newline at end of file +} diff --git a/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.module.css b/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.module.css index 16980ee..47b3c9c 100644 --- a/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.module.css +++ b/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.module.css @@ -9,6 +9,7 @@ padding-top: 200px; padding-bottom: 120px; width: 80%; + @media (max-width: $mantine-breakpoint-sm) { padding-bottom: 80px; padding-top: 80px; @@ -17,7 +18,7 @@ .title { font-family: - Greycliff CF, + "Greycliff CF", var(--mantine-font-family); font-size: 62px; font-weight: 900; diff --git a/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx b/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx index 9a3e40f..57f58b8 100644 --- a/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx +++ b/frontend/vite-template-master/src/components/HeroTitle/HeroTitle.tsx @@ -5,7 +5,7 @@ import classes from './HeroTitle.module.css'; export function HeroTitle() { return (
- +

{' '} @@ -14,8 +14,9 @@ export function HeroTitle() {

- Data Scientist 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! + Data Scientist 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! @@ -42,4 +43,4 @@ export function HeroTitle() {
); -} \ No newline at end of file +} diff --git a/frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx b/frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx index f116180..37667b4 100644 --- a/frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx +++ b/frontend/vite-template-master/src/components/Testimonial/Testimonial.tsx @@ -1,60 +1,58 @@ -import { Carousel } from '@mantine/carousel'; -import { Card, Text, Avatar, Group, Stack, Title } from '@mantine/core'; import Autoplay from 'embla-carousel-autoplay'; +import { Carousel } from '@mantine/carousel'; +import { Avatar, Card, Group, Stack, Text, Title } from '@mantine/core'; import styles from './Testimonial.module.css'; const testimonials = [ { text: "What set Craig apart was his ability to understand our business challenges and deliver a solution that worked for us. He didn't just build a model, he delivered a system our team could actually use.", - clientName: "Steven Adair", - role: "Director", - business: "Managing Utilities Limited", + clientName: 'Steven Adair', + role: 'Director', + business: 'Managing Utilities Limited', }, ]; - - function TestimonialsCarousel() { - const autoplay = Autoplay(); - - return ( - <> - - Testimonials - - - {testimonials.map((testimonial, index) => ( - - - - {testimonial.text} - - - {testimonial.clientName.charAt(0)} - -
- {testimonial.clientName} - - {testimonial.role}, {testimonial.business} - -
- - - - - ))} - - - ); - } - - export default TestimonialsCarousel; \ No newline at end of file + const autoplay = Autoplay(); + + return ( + <> + + Testimonials + + + {testimonials.map((testimonial, index) => ( + + + + {testimonial.text} + + {testimonial.clientName.charAt(0)} +
+ + {testimonial.clientName} + + + {testimonial.role}, {testimonial.business} + +
+ + + + + ))} + + + ); +} + +export default TestimonialsCarousel; diff --git a/frontend/vite-template-master/src/main.tsx b/frontend/vite-template-master/src/main.tsx index 17f9288..edde126 100644 --- a/frontend/vite-template-master/src/main.tsx +++ b/frontend/vite-template-master/src/main.tsx @@ -1,4 +1,6 @@ import ReactDOM from 'react-dom/client'; import App from './App'; + import '@mantine/carousel/styles.css'; + ReactDOM.createRoot(document.getElementById('root')!).render(); diff --git a/frontend/vite-template-master/src/pages/Home.page.tsx b/frontend/vite-template-master/src/pages/Home.page.tsx index 6abe7c2..a7f84da 100644 --- a/frontend/vite-template-master/src/pages/Home.page.tsx +++ b/frontend/vite-template-master/src/pages/Home.page.tsx @@ -1,13 +1,11 @@ -import { HeroTitle } from '@/components/HeroTitle/HeroTitle'; -import { Welcome } from '../components/Welcome/Welcome'; -import { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple'; -import ExpertiseSection from '@/components/ExpertiseSection/ExpertiseSection'; -import outputGif from '@/assets/output.gif'; -import openWebUIGif from '@/assets/open-webui.gif'; -import Testimonial from '@/components/Testimonial/Testimonial'; import { Container } from '@mantine/core'; -import { ContactUs } from '@/components/ContactUs/ContactUs'; +import openWebUIGif from '@/assets/open-webui.gif'; +import outputGif from '@/assets/output.gif'; import { Contact } from '@/components/ContactUs/Contact'; +import ExpertiseSection from '@/components/ExpertiseSection/ExpertiseSection'; +import { HeaderSimple } from '@/components/HeaderSimple/HeaderSimple'; +import { HeroTitle } from '@/components/HeroTitle/HeroTitle'; +import Testimonial from '@/components/Testimonial/Testimonial'; export function HomePage() { return ( @@ -15,27 +13,23 @@ export function HomePage() { + 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 + /> - - - - + 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} + /> + + + + ); }