Skip to content

Commit 719a267

Browse files
kylejoekylejoe
committed
Adds images, header and main background image
1 parent 64f28bb commit 719a267

11 files changed

+739
-113
lines changed

‎package.json

+12-4
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,22 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@emotion/react": "^11.11.1",
13+
"@mantine/core": "^6.0.14",
14+
"@mantine/form": "^6.0.14",
15+
"@mantine/hooks": "^6.0.14",
1216
"@types/node": "20.3.1",
1317
"@types/react": "18.2.12",
1418
"@types/react-dom": "18.2.5",
1519
"eslint": "8.42.0",
1620
"eslint-config-next": "13.4.6",
17-
"next": "13.4.6",
18-
"react": "18.2.0",
19-
"react-dom": "18.2.0",
21+
"next": "^13.4.6",
22+
"react": "^18.2.0",
23+
"react-dom": "^18.2.0",
2024
"typescript": "5.1.3"
21-
}
25+
},
26+
"main": "index.js",
27+
"repository": "https://github.com/jwenger100/colchuck-consulting.git",
28+
"author": "kylejoe <[email protected]>",
29+
"license": "MIT"
2230
}

‎public/cc-green-logo.png

42 KB
Loading

‎public/cc-white-logo.png

41.5 KB
Loading

‎public/colchuck-lake.jpeg

135 KB
Loading

‎public/colchuck-mountain.png

48.1 KB
Loading

‎src/app/components/Header.tsx

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import { useState } from "react";
2+
import {
3+
createStyles,
4+
Header,
5+
Container,
6+
Group,
7+
Burger,
8+
Paper,
9+
Transition,
10+
rem,
11+
Image,
12+
} from "@mantine/core";
13+
import { useDisclosure } from "@mantine/hooks";
14+
15+
const HEADER_HEIGHT = rem(60);
16+
17+
const useStyles = createStyles((theme) => ({
18+
root: {
19+
position: "relative",
20+
zIndex: 1,
21+
marginBottom: "0 !important",
22+
},
23+
24+
dropdown: {
25+
position: "absolute",
26+
top: HEADER_HEIGHT,
27+
left: 0,
28+
right: 0,
29+
zIndex: 0,
30+
borderTopRightRadius: 0,
31+
borderTopLeftRadius: 0,
32+
borderTopWidth: 0,
33+
overflow: "hidden",
34+
35+
[theme.fn.largerThan("sm")]: {
36+
display: "none",
37+
},
38+
},
39+
40+
header: {
41+
display: "flex",
42+
justifyContent: "space-between",
43+
alignItems: "center",
44+
height: "100%",
45+
},
46+
47+
links: {
48+
[theme.fn.smallerThan("sm")]: {
49+
display: "none",
50+
},
51+
},
52+
53+
burger: {
54+
[theme.fn.largerThan("sm")]: {
55+
display: "none",
56+
},
57+
},
58+
59+
link: {
60+
display: "block",
61+
lineHeight: 1,
62+
padding: `${rem(8)} ${rem(12)}`,
63+
borderRadius: theme.radius.sm,
64+
textDecoration: "none",
65+
color:
66+
theme.colorScheme === "dark"
67+
? theme.colors.dark[0]
68+
: theme.colors.gray[7],
69+
fontSize: theme.fontSizes.sm,
70+
fontWeight: 500,
71+
72+
"&:hover": {
73+
backgroundColor:
74+
theme.colorScheme === "dark"
75+
? theme.colors.dark[6]
76+
: theme.colors.gray[0],
77+
},
78+
79+
[theme.fn.smallerThan("sm")]: {
80+
borderRadius: 0,
81+
padding: theme.spacing.md,
82+
},
83+
},
84+
85+
linkActive: {
86+
"&, &:hover": {
87+
backgroundColor: theme.fn.variant({
88+
variant: "light",
89+
color: theme.primaryColor,
90+
}).background,
91+
color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
92+
.color,
93+
},
94+
},
95+
}));
96+
97+
interface HeaderResponsiveProps {
98+
links: { link: string; label: string }[];
99+
}
100+
101+
export function HeaderResponsive({ links }: HeaderResponsiveProps) {
102+
const [opened, { toggle, close }] = useDisclosure(false);
103+
const [active, setActive] = useState(links[0].link);
104+
const { classes, cx } = useStyles();
105+
106+
const items = links.map((link) => (
107+
<a
108+
key={link.label}
109+
href={link.link}
110+
className={cx(classes.link, {
111+
[classes.linkActive]: active === link.link,
112+
})}
113+
onClick={(event) => {
114+
event.preventDefault();
115+
setActive(link.link);
116+
close();
117+
}}
118+
>
119+
{link.label}
120+
</a>
121+
));
122+
123+
return (
124+
<Header height={HEADER_HEIGHT} mb={120} className={classes.root}>
125+
<Container className={classes.header}>
126+
<Image
127+
src="/cc-green-logo.png"
128+
height={100}
129+
width={200}
130+
alt="Colchuck Consulting Logo"
131+
/>
132+
133+
<Group spacing={5} className={classes.links}>
134+
{items}
135+
</Group>
136+
137+
<Burger
138+
opened={opened}
139+
onClick={toggle}
140+
className={classes.burger}
141+
size="sm"
142+
/>
143+
144+
<Transition transition="pop-top-right" duration={200} mounted={opened}>
145+
{(styles) => (
146+
<Paper className={classes.dropdown} withBorder style={styles}>
147+
{items}
148+
</Paper>
149+
)}
150+
</Transition>
151+
</Container>
152+
</Header>
153+
);
154+
}

‎src/app/favicon.ico

-9.26 KB
Binary file not shown.

‎src/app/layout.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import './globals.css'
2-
import { Inter } from 'next/font/google'
1+
import "./globals.css";
2+
import { Inter } from "next/font/google";
33

4-
const inter = Inter({ subsets: ['latin'] })
4+
const inter = Inter({ subsets: ["latin"] });
55

66
export const metadata = {
7-
title: 'Create Next App',
8-
description: 'Generated by create next app',
9-
}
7+
title: "Colchuck Consulting",
8+
description: "The Colchuck Differnce",
9+
};
1010

1111
export default function RootLayout({
1212
children,
1313
}: {
14-
children: React.ReactNode
14+
children: React.ReactNode;
1515
}) {
1616
return (
1717
<html lang="en">
1818
<body className={inter.className}>{children}</body>
1919
</html>
20-
)
20+
);
2121
}

‎src/app/page.module.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.main {
2-
display: flex;
2+
/* display: flex;
33
flex-direction: column;
44
justify-content: space-between;
55
align-items: center;
6-
padding: 6rem;
6+
padding: 6rem; */
77
min-height: 100vh;
88
}
99

@@ -97,7 +97,7 @@
9797

9898
.center::before,
9999
.center::after {
100-
content: '';
100+
content: "";
101101
left: 50%;
102102
position: absolute;
103103
filter: blur(45px);

‎src/app/page.tsx

+15-89
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,21 @@
1-
import Image from 'next/image'
2-
import styles from './page.module.css'
1+
"use client";
2+
3+
import styles from "./page.module.css";
4+
import { HeaderResponsive } from "./components/Header";
5+
import { Image } from "@mantine/core";
6+
7+
const links = [
8+
{ label: "Home", link: "/" },
9+
{ label: "About", link: "/about" },
10+
{ label: "Projects", link: "/projects" },
11+
{ label: "Contact", link: "/contact" },
12+
];
313

414
export default function Home() {
515
return (
616
<main className={styles.main}>
7-
<div className={styles.description}>
8-
<p>
9-
Get started by editing&nbsp;
10-
<code className={styles.code}>src/app/page.tsx</code>
11-
</p>
12-
<div>
13-
<a
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{' '}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className={styles.vercelLogo}
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
30-
31-
<div className={styles.center}>
32-
<Image
33-
className={styles.logo}
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className={styles.grid}>
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className={styles.card}
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2>
50-
Docs <span>-&gt;</span>
51-
</h2>
52-
<p>Find in-depth information about Next.js features and API.</p>
53-
</a>
54-
55-
<a
56-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57-
className={styles.card}
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<h2>
62-
Learn <span>-&gt;</span>
63-
</h2>
64-
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65-
</a>
66-
67-
<a
68-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69-
className={styles.card}
70-
target="_blank"
71-
rel="noopener noreferrer"
72-
>
73-
<h2>
74-
Templates <span>-&gt;</span>
75-
</h2>
76-
<p>Explore the Next.js 13 playground.</p>
77-
</a>
78-
79-
<a
80-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81-
className={styles.card}
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
>
85-
<h2>
86-
Deploy <span>-&gt;</span>
87-
</h2>
88-
<p>
89-
Instantly deploy your Next.js site to a shareable URL with Vercel.
90-
</p>
91-
</a>
92-
</div>
17+
<HeaderResponsive links={links} />
18+
<Image src="/colchuck-lake.jpeg" />
9319
</main>
94-
)
20+
);
9521
}

0 commit comments

Comments
 (0)