tombutcher.work/2025-tombutcher-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Loads of fixes

Browse Source
This commit is contained in:
Tom Butcher 2025-03-25 22:52:10 +00:00
parent 221decc8bc
commit 1eb937ee54
9 changed files with 48 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TurnstileModal.jsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { Modal } from "antd";
import Turnstile from "react-turnstile";

8
src/views/BlogView.jsx
View File

@ -71,7 +71,13 @@ const BlogView = ({ setCurrentView, slug }) => {
className={"tbbutton"}
key="back"
onClick={() => setCurrentView("blogs")}
icon={<ArrowLeftOutlined />}
icon={
<img
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
alt="Back"
style={{ height: "14px", marginBottom: "1px" }}
/>
}
>
Back
</Button>,

22
src/views/BlogsView.jsx
View File

@ -92,7 +92,13 @@ const BlogsView = ({ setCurrentView }) => {
className={"tbbutton"}
key="back"
onClick={() => setCurrentView("index")}
icon={<ArrowLeftOutlined />}
icon={
<img
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
alt="Back"
style={{ height: "14px", marginBottom: "1px" }}
/>
}
>
Back
</Button>,
@ -195,19 +201,5 @@ const BlogsView = ({ setCurrentView }) => {
);
};
// CSS for hover effect
const blogCardStyles = `
.blog-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tbtag {
background: transparent !important;
}
.tbdisabledtag {
background: transparent !important;
}
`;
export default BlogsView;

14
src/views/CVView.jsx
View File

@ -11,7 +11,7 @@ const CVView = ({ setCurrentView }) => {
console.log("Form values:", values);
};
const isMobile = useMediaQuery({ maxWidth: 600 });
const [isEmailFocused, setIsEmailFocused] = useState(false); // Track focus state
return (
<div className="tbview">
<Card
@ -26,7 +26,13 @@ const CVView = ({ setCurrentView }) => {
className={"tbbutton"}
key="back"
onClick={() => setCurrentView("index")}
icon={<ArrowLeftOutlined />}
icon={
<img
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
alt="Back"
style={{ height: "14px", marginBottom: "1px" }}
/>
}
>
Back
</Button>,
@ -60,8 +66,6 @@ const CVView = ({ setCurrentView }) => {
type="email"
placeholder="example@example.com"
style={{ flex: 1 }}
onFocus={() => setIsEmailFocused(true)} // Set focused state to true
onBlur={() => setIsEmailFocused(false)} // Set focused state to false
/>
<Button type="primary" htmlType="submit">
<CloudDownloadOutlined />
@ -95,8 +99,6 @@ const CVView = ({ setCurrentView }) => {
type="email"
placeholder="example@example.com"
style={{ flex: 1 }}
onFocus={() => setIsEmailFocused(true)} // Set focused state to true
onBlur={() => setIsEmailFocused(false)} // Set focused state to false
/>
<Button type="primary" htmlType="submit">
<CloudDownloadOutlined />

13
src/views/ContactView.jsx
View File

@ -9,12 +9,14 @@ const ContactView = ({ setCurrentView }) => {
const [turnstileOpen, setTurnstileOpen] = useState(false);
const [email, setEmail] = useState("");
const handleSubmit = async (token) => {
console.log(token);
if (!token) {
setTurnstileOpen(true); // Open Turnstile modal
return;
}
console.log("Got token", token);
console.log("Got email", email);
try {
const response = await fetch("https://web.tombutcher.work/api/contact", {
method: "POST",
@ -46,7 +48,13 @@ const ContactView = ({ setCurrentView }) => {
className={"tbbutton"}
key="back"
onClick={() => setCurrentView("index")}
icon={<ArrowLeftOutlined />}
icon={
<img
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
alt="Back"
style={{ height: "14px", marginBottom: "1px" }}
/>
}
>
Back
</Button>,
@ -65,6 +73,7 @@ const ContactView = ({ setCurrentView }) => {
name="email"
rules={[{ required: true, message: "Please enter your email" }]}
style={{ marginBottom: "8px" }}
onChange={(e) => setEmail(e.target.value)}
>
<Flex gap="small">
<Input

18
src/views/ExperienceView.jsx
View File

@ -18,7 +18,13 @@ const ExperienceView = ({ setCurrentView }) => {
className={"tbbutton"}
key="back"
onClick={() => setCurrentView("index")}
icon={<ArrowLeftOutlined />}
icon={
<img
src="https://cdn.tombutcher.work/icons/web/w-back.svg"
alt="Back"
style={{ height: "14px", marginBottom: "1px" }}
/>
}
>
Back
</Button>,
@ -30,27 +36,27 @@ const ExperienceView = ({ setCurrentView }) => {
style={{ margin: "0 10%", paddingBottom: "15px" }}
>
<img
src={`https://cdn.tombutcher.work/logos/nucleus-logo.svg`}
src={"https://cdn.tombutcher.work/logos/nucleus-logo.svg"}
alt="Nucleus Logo"
height={"80px"}
/>
<img
src={`https://cdn.tombutcher.work/logos/greeneking-logo.svg`}
src={"https://cdn.tombutcher.work/logos/greeneking-logo.svg"}
alt="Greene King Logo"
height={"60px"}
/>
<img
src={`https://cdn.tombutcher.work/logos/thelondonoffice-logo.svg`}
src={"https://cdn.tombutcher.work/logos/thelondonoffice-logo.svg"}
alt="The London Office Logo"
height={"55px"}
/>
<img
src={`https://cdn.tombutcher.work/logos/revolution-logo.svg`}
src={"https://cdn.tombutcher.work/logos/revolution-logo.svg"}
alt="Revolution Logo"
height={"65px"}
/>
<img
src={`https://cdn.tombutcher.work/logos/istore-logo.svg`}
src={"https://cdn.tombutcher.work/logos/istore-logo.svg"}
alt="Revolution Logo"
height={"40px"}
/>

3
src/views/MainView.jsx
View File

@ -1,11 +1,10 @@
// views/MainView.jsx
import React from "react";
import { Typography, Button, Flex, Space } from "antd";
import { Button, Flex } from "antd";
import { ReactComponent as LogoHorizontal } from "./logo-horizontal.svg";
import { ReactComponent as LogoVertical } from "./logo-vertical.svg";
import { useMediaQuery } from "react-responsive";
const { Paragraph } = Typography;
const MainView = ({ setCurrentView }) => {
const isMobile = useMediaQuery({ maxWidth: 600 });

1
src/views/NotFoundView.jsx
View File

@ -1,6 +1,5 @@
import React from "react";
import { Button, Flex } from "antd";
import { useMediaQuery } from "react-responsive";
const NotFoundView = ({ setCurrentView }) => {
return (

2
src/views/SocialsView.jsx
View File

@ -7,7 +7,7 @@ import { LoadingOutlined } from "@ant-design/icons";
import { useEffect } from "react";
import * as FaIcons from "react-icons/fa6"; // Import all FA6 icons dynamically
const SocialsView = ({ setCurrentView, referrer }) => {
const SocialsView = ({ referrer }) => {
const isMobile = useMediaQuery({ maxWidth: 600 });
const [socials, setSocials] = useState([]);
const [loading, setLoading] = useState(true); // Loading state