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

Add gifs to expertise sections

Browse Source
This commit is contained in:
Craig
2025-03-06 15:51:47 +00:00
parent 206e180948
commit f9c6b607cd
13 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/website/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Craig Macfadyen</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

3
frontend/website/src/App.tsx
View File

@@ -8,7 +8,8 @@ import Navbar04Page from './components/navbar-04/navbar-04';
import Testimonial06 from './components/testimonial-06/testimonial-06'; import Testimonial06 from './components/testimonial-06/testimonial-06';
function App() { function App() {
return ( return (
<div className="App min-h-screen bg-muted rounded-lg"> <div className="App min-h-screen bg-muted rounded-3xl">
<title>Home | Craig Macfadyen</title>
<Navbar04Page /> <Navbar04Page />
<Hero /> <Hero />
<About /> <About />

BIN
frontend/website/src/assets/open-webui.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 372 KiB

BIN
frontend/website/src/assets/output.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

9
frontend/website/src/components/About.tsx
View File

@@ -1,11 +1,12 @@
import React from 'react'; import React from 'react';
import ExpertiseSection from './ExpertiseSection'; import ExpertiseSection from './ExpertiseSection';
import outputGif from '@/assets/output.gif';
import openWebUIGif from '@/assets/open-webui.gif';
const About = () => { const About = () => {
return ( return (
<section id="about" className="about py-20 bg-gray-100"> <section id="about" className="about py-20 bg-gray-100">
<div className="container mx-auto"> <div className="container mx-auto">
<h2 className="text-3xl font-bold mb-4">About</h2>
<p className="text-lg mb-8"> <p className="text-lg mb-8">
You have data, I have the skills to help you understand it. You have data, I have the skills to help you understand it.
</p> </p>
@@ -13,8 +14,7 @@ const About = () => {
title="Computer Vision" 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." 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={[ images={[
{ url: "https://gifs.cc/congratulation/congrats-animation-smiley-2018.gif", alt: "Computer Vision 1" }, { url: outputGif, alt: "Video Segmentation with SAM2." },
{ url: "https://example.com/image2.jpg", alt: "Computer Vision 2" },
]} ]}
viewMoreLink="/computer-vision" viewMoreLink="/computer-vision"
imageOnLeft={true} imageOnLeft={true}
@@ -23,8 +23,7 @@ const About = () => {
title="Natural Language Processing" 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." 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={[ images={[
{ url: "/path/to/nlp-image.jpg", alt: "NLP 1" }, { url: openWebUIGif, alt: "Locally hosted LLM using oLLama and OpenWebUI." },
{ url: "/path/to/nlp-image2.jpg", alt: "NLP 2" },
]} ]}
viewMoreLink="/nlp" viewMoreLink="/nlp"
imageOnLeft={false} imageOnLeft={false}

2
frontend/website/src/components/Contact.tsx
View File

@@ -3,7 +3,7 @@ import { SiLinkedin } from "react-icons/si";
const Contact = () => { const Contact = () => {
return ( return (
<section id="contact" className="contact py-20 bg-gray-100"> <section id="contact" className="contact py-20">
<div className="container mx-auto"> <div className="container mx-auto">
<h2 className="text-3xl font-bold mb-4">Contact Me</h2> <h2 className="text-3xl font-bold mb-4">Contact Me</h2>
<p className="text-lg mb-4"> <p className="text-lg mb-4">

4
frontend/website/src/components/ExpertiseSection.tsx
View File

@@ -26,9 +26,9 @@ const ExpertiseSection: React.FC<ExpertiseSectionProps> = ({
<div className="md:w-2/3 md:px-8"> <div className="md:w-2/3 md:px-8">
<h2 className="text-3xl font-bold mb-4">{title}</h2> <h2 className="text-3xl font-bold mb-4">{title}</h2>
<p className="text-lg mb-4">{content}</p> <p className="text-lg mb-4">{content}</p>
<Button asChild> {/* <Button asChild>
<a href={viewMoreLink}>View More</a> <a href={viewMoreLink}>View More</a>
</Button> </Button> */}
</div> </div>
</div> </div>
</section> </section>

2
frontend/website/src/components/Hero.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"
const Hero = () => { const Hero = () => {
return ( return (
<section id="hero" className="hero py-20"> <section id="hero" className="hero">
<div className="container mx-auto text-center"> <div className="container mx-auto text-center">
<h1 className="text-5xl font-bold mb-4">Craig Macfadyen</h1> <h1 className="text-5xl font-bold mb-4">Craig Macfadyen</h1>
<p className="text-xl mb-8"> <p className="text-xl mb-8">

3
frontend/website/src/components/ImageCarousel.tsx
View File

@@ -27,6 +27,9 @@ const ImageCarousel: React.FC<ImageCarouselProps> = ({ images, delay = 8000 }) =
{images.map((image, index) => ( {images.map((image, index) => (
<CarouselItem key={index}> <CarouselItem key={index}>
<img src={image.url} alt={image.alt} className="rounded-lg shadow-md" /> <img src={image.url} alt={image.alt} className="rounded-lg shadow-md" />
<div className="text-center py-2 rounded-lg bg-white">
{image.alt}
</div>
</CarouselItem> </CarouselItem>
))} ))}
</CarouselContent> </CarouselContent>

2
frontend/website/src/components/navbar-04/nav-menu.tsx
View File

@@ -11,7 +11,7 @@ export const NavMenu = (props: NavigationMenuProps) => (
<NavigationMenuList className="gap-6 space-x-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start"> <NavigationMenuList className="gap-6 space-x-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start">
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<a href="#">Home</a> <a href="/">Home</a>
</NavigationMenuLink> </NavigationMenuLink>
</NavigationMenuItem> </NavigationMenuItem>
{/* <NavigationMenuItem> {/* <NavigationMenuItem>

6
frontend/website/src/components/navbar-04/navbar-04.tsx
View File

@@ -1,4 +1,3 @@
import { Button } from "@/components/ui/button";
import { Logo } from "./logo"; import { Logo } from "./logo";
import { NavMenu } from "./nav-menu"; import { NavMenu } from "./nav-menu";
import { NavigationSheet } from "./navigation-sheet"; import { NavigationSheet } from "./navigation-sheet";
@@ -8,7 +7,6 @@ const Navbar04Page = () => {
return ( return (
<nav className="top-6 inset-x-4 h-16 bg-background border dark:border-slate-700/70 max-w-screen-xl mx-auto rounded-full"> <nav className="top-6 inset-x-4 h-16 bg-background border dark:border-slate-700/70 max-w-screen-xl mx-auto rounded-full">
<div className="h-full flex items-center justify-between mx-auto px-4"> <div className="h-full flex items-center justify-between mx-auto px-4">
<Logo />
{/* Desktop Menu */} {/* Desktop Menu */}
<NavMenu className="hidden md:block" /> <NavMenu className="hidden md:block" />
@@ -25,12 +23,12 @@ const Navbar04Page = () => {
<SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" /> <SiGitea className="w-6 h-6 text-gray-700 dark:text-gray-300" />
</a> </a>
</div> </div>
<Button {/* <Button
variant="outline" variant="outline"
className="hidden sm:inline-flex rounded-full" className="hidden sm:inline-flex rounded-full"
> >
Sign In Sign In
</Button> </Button> */}
{/* Mobile Menu */} {/* Mobile Menu */}
<div className="md:hidden"> <div className="md:hidden">
<NavigationSheet /> <NavigationSheet />

6
frontend/website/src/components/testimonial-06/testimonial-06.tsx
View File

@@ -41,7 +41,7 @@ const Testimonial06 = () => {
}, [api]); }, [api]);
return ( return (
<div className="min-h-screen w-full flex justify-center items-center py-12 px-6"> <div className="w-full flex justify-center items-center px-6">
<div className="w-full"> <div className="w-full">
<h2 className="mb-14 text-5xl md:text-6xl font-bold text-center tracking-tight"> <h2 className="mb-14 text-5xl md:text-6xl font-bold text-center tracking-tight">
Testimonials Testimonials
@@ -58,7 +58,7 @@ const Testimonial06 = () => {
<CarouselPrevious /> <CarouselPrevious />
<CarouselNext /> <CarouselNext />
</Carousel> </Carousel>
<div className="flex items-center justify-center gap-2"> {/* <div className="flex items-center justify-center gap-2">
{Array.from({ length: count }).map((_, index) => ( {Array.from({ length: count }).map((_, index) => (
<button <button
key={index} key={index}
@@ -68,7 +68,7 @@ const Testimonial06 = () => {
})} })}
/> />
))} ))}
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>

2
frontend/website/src/components/ui/button.tsx
View File

@@ -55,4 +55,4 @@ function Button({
) )
} }
export { Button, buttonVariants } export { Button }