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:
@@ -1,5 +1,7 @@
|
|||||||
# Mantine Vite template
|
# 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
|
## Features
|
||||||
|
|
||||||
This template comes with the following features:
|
This template comes with the following features:
|
||||||
|
|||||||
@@ -1,42 +1,24 @@
|
|||||||
import { useState } from 'react';
|
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 { useDisclosure } from '@mantine/hooks';
|
||||||
import { MantineLogo } from '@mantinex/mantine-logo';
|
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';
|
||||||
|
|
||||||
const links = [
|
|
||||||
{ link: '/about', label: 'Features' },
|
|
||||||
{ link: '/pricing', label: 'Pricing' },
|
|
||||||
{ link: '/learn', label: 'Learn' },
|
|
||||||
{ link: '/community', label: 'Community' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function HeaderSimple() {
|
export function HeaderSimple() {
|
||||||
const [opened, { toggle }] = useDisclosure(false);
|
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 (
|
return (
|
||||||
<header className={classes.header}>
|
<header className={classes.header}>
|
||||||
<Container size="md" className={classes.inner}>
|
<Container size="md" className={classes.inner}>
|
||||||
<MantineLogo size={28} />
|
<MantineLogo size={28} />
|
||||||
<Group gap={5} visibleFrom="xs">
|
<Group gap={5} visibleFrom="xs">
|
||||||
{items}
|
<Anchor href="#" className={classes.link}>
|
||||||
|
CV
|
||||||
|
</Anchor>
|
||||||
|
<Anchor href="#" className={classes.link}>
|
||||||
|
Blog
|
||||||
|
</Anchor>
|
||||||
</Group>
|
</Group>
|
||||||
|
|
||||||
<Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
|
<Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 200px;
|
padding-top: 120px;
|
||||||
padding-bottom: 120px;
|
padding-bottom: 120px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
||||||
@@ -41,24 +41,3 @@
|
|||||||
font-size: 18px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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 { GithubIcon } from '@mantinex/dev-icons';
|
||||||
import classes from './HeroTitle.module.css';
|
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
|
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!
|
if you have any questions or you'd like to work together!
|
||||||
</Text>
|
</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>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user