Skip to content

Commit 5568d93

Browse files
johnpatekjohnpatek
committed
save point
1 parent 4e8c4f1 commit 5568d93

8 files changed

Lines changed: 114 additions & 420 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 337 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.jsx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,47 @@
11
import { Content, Theme } from '@carbon/react'
22
import {
3-
Navigate,
4-
Outlet,
5-
RouterProvider,
6-
createHashRouter,
3+
Navigate,
4+
Outlet,
5+
RouterProvider,
6+
createHashRouter,
77
} from 'react-router-dom'
88
import AppHeader from './components/AppHeader'
99
import AppContent from './components/AppContent'
1010
import Home from './content/Home'
1111
import Projects from './content/Projects'
1212
import Contact from './content/Contact'
13+
import { enable } from '@carbon/feature-flags';
1314
import { useState } from 'react'
1415

1516
const AppLayout = () => {
16-
const defaultDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
17-
const [darkMode, setDarkMode] = useState(defaultDarkMode);
17+
const defaultDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
18+
const [darkMode, setDarkMode] = useState(defaultDarkMode);
1819

19-
return (
20-
<Theme theme={darkMode ? 'g100' : 'g10'}>
21-
<AppHeader darkMode={darkMode} setDarkMode={setDarkMode} />
22-
<AppContent><Outlet /></AppContent>
23-
</Theme>
24-
);
20+
enable('enable-tile-contrast');
21+
22+
return (
23+
<Theme theme={darkMode ? 'g100' : 'g10'}>
24+
<AppHeader darkMode={darkMode} setDarkMode={setDarkMode} />
25+
<AppContent><Outlet /></AppContent>
26+
</Theme>
27+
);
2528
};
2629

2730
const router = createHashRouter([
28-
{
29-
path: '/',
30-
element: <AppLayout />,
31-
children: [
32-
{ index: true, element: <Home /> },
33-
{ path: 'projects', element: <Projects /> },
34-
{ path: 'contact', element: <Contact /> },
35-
{ path: '*', element: <Navigate to="/" replace /> },
36-
],
37-
},
31+
{
32+
path: '/',
33+
element: <AppLayout />,
34+
children: [
35+
{ index: true, element: <Home /> },
36+
{ path: 'projects', element: <Projects /> },
37+
{ path: 'contact', element: <Contact /> },
38+
{ path: '*', element: <Navigate to="/" replace /> },
39+
],
40+
},
3841
])
3942

4043
function App() {
41-
return <RouterProvider router={router} />
44+
return <RouterProvider router={router} />
4245
}
4346

4447
export default App

‎src/assets/projects.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,10 @@
1313
"name" : "sigfn",
1414
"description" : "C++ library for handling signals.",
1515
"documentation" : "https://maxtek6.github.io/docs/sigfn"
16+
},
17+
{
18+
"name" : "threadpool",
19+
"description" : "Header-only C++ threadpool.",
20+
"documentation" : "https://maxtek6.github.io/docs/threadpool"
1621
}
1722
]

‎src/components/AppContent.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ function AppContent({ children, ...props }) {
55
<Content
66
style={{
77
display: 'flex',
8-
justifyContent: 'center',
9-
alignItems: 'center',
108
minHeight: 'calc(100vh - 3rem)',
119
}}
1210
{...props}>

‎src/components/ProjectTile.jsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,47 @@
1-
import { Column, Grid, Link, Stack, Tile } from '@carbon/react';
2-
import {Code, Doc} from '@carbon/react/icons';
1+
import { Column, Grid, Link, Stack, Tile, TileGroup } from '@carbon/react';
2+
import { Code, Doc } from '@carbon/react/icons';
33

44
function LinkStack({ projectLink, documentation }) {
55
return (
6-
<Stack orientation='horizontal'>
7-
<Link href={projectLink} target='_blank' rel='noopener noreferrer'>
8-
<Code size={24}/>
9-
</Link>
10-
{documentation && (
11-
<Link href={documentation} target='_blank' rel='noopener noreferrer'>
12-
<Doc size={24}/>
6+
<Grid>
7+
<Column span={1} />
8+
<Column span={1}>
9+
<Link href={projectLink} target='_blank' rel='noopener noreferrer'>
10+
<Code size={24} />
1311
</Link>
14-
)}
15-
</Stack>
12+
</Column>
13+
<Column span={1}>
14+
{documentation && (
15+
<Link href={documentation} target='_blank' rel='noopener noreferrer'>
16+
<Doc size={24} />
17+
</Link>
18+
)}
19+
</Column>
20+
<Column span={1} />
21+
</Grid>
1622
)
1723
}
1824

1925
function ProjectTile({ name, description, documentation }) {
2026
const projectLink = `https://github.com/maxtek6/${name}`;
2127
return (
2228
<Tile className='project-tile'>
23-
<Grid>
24-
<Column span={3}>
25-
<h3>{name}</h3>
26-
</Column>
27-
<Column span={1}>
29+
<Column span={4}>
30+
<Stack gap={3}>
31+
<Grid>
32+
<Column span={2}>
33+
<h3>{name}</h3>
34+
</Column>
35+
<Column span={2} />
36+
</Grid>
37+
<Grid style={{ minHeight: '48px' }}>
38+
<Column span={4}>
39+
<p>{description}</p>
40+
</Column>
41+
</Grid>
2842
<LinkStack projectLink={projectLink} documentation={documentation} />
29-
</Column>
30-
</Grid>
31-
<Grid>
32-
<Column span={4}>
33-
<p>{description}</p>
34-
</Column>
35-
</Grid>
43+
</Stack>
44+
</Column>
3645
</Tile>
3746
)
3847
}

‎src/content/Contact.jsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { Content, Modal, Grid, Column } from '@carbon/react';
2+
import { Modal, Grid, Column, UnorderedList, Layer, ListItem, Stack } from '@carbon/react';
33
import ContactForm from '../components/ContactForm';
44

55
function Contact() {
@@ -26,31 +26,42 @@ function Contact() {
2626

2727
return (
2828
<Grid fullWidth>
29+
<Column sm={0} md={1} lg={2} xlg={2} max={2}/>
2930
<Column
30-
sm={4} // mobile: full width (4-column grid)
31-
md={8} // tablet: full width
32-
lg={8} // desktop: half width (2 columns total)
31+
sm={4}
32+
md={4}
33+
lg={6}
34+
xlg={6}
35+
max={6} // max width: full width (4-column grid)
3336
>
34-
<h3>How can we help you?</h3>
35-
<p>Whether you are an open source developer looking for guidance, or a business seeking consulting services, we're here to assist you. We offer expertise in the following areas:</p>
36-
<ul>
37-
<li>Backend development in C, C++, and Go</li>
38-
<li>CMake build systems</li>
39-
<li>CI/CD integration</li>
40-
<li>Embedded systems</li>
41-
</ul>
37+
<Stack>
38+
<h3>How can we help you?</h3>
39+
<p>Whether you are an open source developer looking for guidance, or a business seeking consulting services, we're here to assist you. We offer expertise in the following areas:</p>
40+
<UnorderedList>
41+
<ListItem>Backend development in C, C++, and Go</ListItem>
42+
<ListItem>CMake build systems</ListItem>
43+
<ListItem>CI/CD integration</ListItem>
44+
<ListItem>Embedded systems</ListItem>
45+
</UnorderedList>
46+
</Stack>
4247
</Column>
4348
<Column
44-
sm={4} // mobile: full width (4-column grid)
45-
md={8} // tablet: full width
46-
lg={8} // desktop: half width (2 columns total)
49+
sm={4}
50+
md={4}
51+
lg={4}
52+
xlg={4}
53+
max={4}
4754
>
48-
49-
<ContactForm
50-
onSubmitSuccess={handleSubmitSuccess}
51-
onSubmitError={handleSubmitError}
52-
/>
55+
<Layer>
56+
<Layer>
57+
<ContactForm
58+
onSubmitSuccess={handleSubmitSuccess}
59+
onSubmitError={handleSubmitError}
60+
/>
61+
</Layer>
62+
</Layer>
5363
</Column>
64+
<Column sm={0} md={1} lg={2} xlg={2} max={2}/>
5465
<Modal
5566
open={isModalOpen}
5667
modalHeading={modalHeading}

‎src/content/Projects.jsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import projects from '../assets/projects.json';
22
import ProjectTile from '../components/ProjectTile';
3-
import { Column, Content, Grid } from '@carbon/react';
4-
import AppContent from '../components/AppContent';
3+
import { Column, Grid } from '@carbon/react';
54

65
function Projects() {
76
return (
8-
<Grid condensed>
9-
{projects.map(({ name, description, documentation }) => (
10-
<Column span={4}>
11-
<ProjectTile
12-
name={name}
13-
description={description}
14-
documentation={documentation}
15-
/>
16-
</Column>
17-
))}
18-
</Grid>
7+
<Grid>
8+
<Column sm={0} md={2} lg={2} xlg={2} max={2} />
9+
<Column sm={4} md={4} lg={12} xlg={12} max={12}>
10+
<Grid sm={4} md={4} lg={12} xlg={12} max={12}>
11+
{projects.map(({ name, description, documentation }) => (
12+
<ProjectTile name={name} description={description} documentation={documentation} />
13+
))}
14+
</Grid>
15+
</Column>
16+
<Column sm={0} md={2} lg={2} xlg={2} max={2} />
17+
</Grid >
1918
);
2019
}
2120

‎src/index.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
@use '@carbon/styles/scss/spacing' as *;
88

99
.project-tile {
10-
margin-bottom: $spacing-03;
11-
}
10+
min-height: 144px;
11+
margin-bottom: $spacing-01;
12+
//border: 1px solid theme.$border-strong-01;
13+
}

0 commit comments

Comments
 (0)