Enhance README with project overview; update HeaderSimple component to include CV and Blog links; adjust HeroTitle styles and remove unused buttons for cleaner layout.

This commit is contained in:
Craig
2025-04-15 15:13:03 +01:00
parent ed105c3857
commit 8ed8764b5d
4 changed files with 11 additions and 70 deletions

View File

@@ -1,5 +1,7 @@
# Mantine Vite template
The project is a well-structured, modern React application with a clean design and strong technical foundation. It effectively showcases Craig Macfadyen's professional expertise but would benefit from completing the missing features and addressing the navigation structure. The use of Mantine provides a solid UI foundation, and the component architecture supports maintainability and future expansion.
## Features
This template comes with the following features:

View File

@@ -1,42 +1,24 @@
import { useState } from 'react';
import { Burger, Container, Group } from '@mantine/core';
import { Burger, Container, Group, Anchor } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { MantineLogo } from '@mantinex/mantine-logo';
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
import classes from './HeaderSimple.module.css';
const links = [
{ link: '/about', label: 'Features' },
{ link: '/pricing', label: 'Pricing' },
{ link: '/learn', label: 'Learn' },
{ link: '/community', label: 'Community' },
];
export function HeaderSimple() {
const [opened, { toggle }] = useDisclosure(false);
const [active, setActive] = useState(links[0].link);
const items = links.map((link) => (
<a
key={link.label}
href={link.link}
className={classes.link}
data-active={active === link.link || undefined}
onClick={(event) => {
event.preventDefault();
setActive(link.link);
}}
>
{link.label}
</a>
));
return (
<header className={classes.header}>
<Container size="md" className={classes.inner}>
<MantineLogo size={28} />
<Group gap={5} visibleFrom="xs">
{items}
<Anchor href="#" className={classes.link}>
CV
</Anchor>
<Anchor href="#" className={classes.link}>
Blog
</Anchor>
</Group>
<Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />

View File

@@ -6,7 +6,7 @@
.inner {
position: relative;
padding-top: 200px;
padding-top: 120px;
padding-bottom: 120px;
width: 80%;
@@ -40,25 +40,4 @@
@media (max-width: $mantine-breakpoint-sm) {
font-size: 18px;
}
}
.controls {
margin-top: calc(var(--mantine-spacing-xl) * 2);
@media (max-width: $mantine-breakpoint-sm) {
margin-top: var(--mantine-spacing-xl);
}
}
.control {
height: 54px;
padding-left: 38px;
padding-right: 38px;
@media (max-width: $mantine-breakpoint-sm) {
height: 54px;
padding-left: 18px;
padding-right: 18px;
flex: 1;
}
}

View File

@@ -1,4 +1,4 @@
import { Button, Container, Group, Text } from '@mantine/core';
import { Container, Group, Text } from '@mantine/core';
// import { GithubIcon } from '@mantinex/dev-icons';
import classes from './HeroTitle.module.css';
@@ -18,28 +18,6 @@ export function HeroTitle() {
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!
</Text>
<Group className={classes.controls}>
<Button
size="xl"
className={classes.control}
variant="gradient"
gradient={{ from: 'blue', to: 'cyan' }}
>
Get started
</Button>
<Button
component="a"
href="https://github.com/mantinedev/mantine"
size="xl"
variant="default"
className={classes.control}
// leftSection={<GithubIcon size={20} />}
>
GitHub
</Button>
</Group>
</Container>
</div>
);