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
|
||||
|
||||
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:
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user