apatil/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding MUI theming
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source
This commit is contained in:
apatil 2025-05-05 17:16:43 +01:00
parent e53d66cd59
commit ad88426350
9 changed files with 843 additions and 718 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1409
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@fontsource/roboto": "^5.2.5",
"@mui/icons-material": "^7.0.2", "@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2", "@mui/material": "^7.0.2",
"next": "15.3.1", "next": "15.3.1",
@ -19,13 +20,11 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/eslintrc": "^3", "@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.3.1", "eslint-config-next": "15.3.1",
"tailwindcss": "^4",
"typescript": "^5" "typescript": "^5"
} }
} }

5
postcss.config.mjs
View File

@ -1,5 +0,0 @@
const config = {
plugins: ["@tailwindcss/postcss"],
};
export default config;

30
src/app/globals.css
View File

@ -1,26 +1,4 @@
@import "tailwindcss"; @import '@fontsource/roboto/300.css';
@import '@fontsource/roboto/400.css';
:root { @import '@fontsource/roboto/500.css';
--background: #ffffff; @import '@fontsource/roboto/700.css';
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

45
src/app/layout.tsx
View File

@ -1,17 +1,11 @@
/* eslint-disable @next/next/no-page-custom-font */
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Header from "@/components/Header"; import Header from "@/components/Header";
import { light, dark } from "@/theme/theme";
const geistSans = Geist({ import { ThemeProvider } from "@mui/material/styles";
variable: "--font-geist-sans", import { CssBaseline } from "@mui/material";
subsets: ["latin"], import { useState } from "react";
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "The Coding Grizzly", title: "The Coding Grizzly",
@ -23,13 +17,32 @@ export default function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleTheme = () => {
setIsDarkMode((prevMode) => !prevMode);
};
return ( return (
<html lang="en"> <html lang="en">
<body <head>
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-100 min-h-screen`} <link rel="preconnect" href="https://fonts.googleapis.com" />
> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<Header /> <link
{children} rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<ThemeProvider theme={isDarkMode ? dark : light}>
<CssBaseline />
<Header toggleTheme={toggleTheme} />
{children}
</ThemeProvider>
</body> </body>
</html> </html>
); );

4
src/app/not-found.tsx
View File

@ -1,7 +1,7 @@
export default function Home() { export default function Home() {
return ( return (
<div className="flex items-center justify-center h-screen bg-red-500"> <div>
<h1 className="text-center text-white">Nothing to see here</h1> <h1>Nothing to see here</h1>
</div> </div>
); );
} }

2
src/app/page.tsx
View File

@ -1,6 +1,6 @@
export default function Home() { export default function Home() {
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div>
<h1>Welcome to the den</h1> <h1>Welcome to the den</h1>
<p>Here lives the geek bear who is hungry for bits and bytes. Ravaging through the internet dumpster finding the finest 0s and 1s. He looks for speed and performance</p> <p>Here lives the geek bear who is hungry for bits and bytes. Ravaging through the internet dumpster finding the finest 0s and 1s. He looks for speed and performance</p>
</div> </div>

19
src/components/Header/index.tsx
View File

@ -6,6 +6,7 @@ import MenuIcon from '@mui/icons-material/Menu'
import { import {
AppBar, AppBar,
Box, Box,
Button,
Drawer, Drawer,
IconButton, IconButton,
List, List,
@ -21,14 +22,17 @@ const navItems = [
{ label: 'Info', href: '/info' }, { label: 'Info', href: '/info' },
{ label: 'Music', href: '/music' } { label: 'Music', href: '/music' }
] ]
export default function Header() { export default function Header({ toggleTheme }: { toggleTheme: () => void }) {
const [mobileOpen, setMobileOpen] = React.useState(false) const [mobileOpen, setMobileOpen] = React.useState(false)
const handleDrawerToggle = () => { const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen) setMobileOpen(!mobileOpen)
} }
const drawer = ( const drawer = (
<Box onClick={handleDrawerToggle}> <Box onClick={handleDrawerToggle}>
<Typography variant="h6" className="my-4">Menu</Typography> <Typography variant="h6" >Menu</Typography>
<Button variant="contained" onClick={toggleTheme}>
Toggle Theme
</Button>
<List> <List>
{navItems.map((item) => ( {navItems.map((item) => (
<ListItem key={item.label} disablePadding> <ListItem key={item.label} disablePadding>
@ -42,20 +46,19 @@ export default function Header() {
) )
return ( return (
<> <>
<AppBar position="static" color='transparent' className="bg-black"> <AppBar position="static" color='transparent' >
<Toolbar className="flex justify-between"> <Toolbar >
<IconButton <IconButton
color="inherit" color="inherit"
aria-label="open drawer" aria-label="open drawer"
edge="end" edge="end"
onClick={handleDrawerToggle} onClick={handleDrawerToggle}
className="block md:hidden"
> >
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<Box className="hidden md:flex gap-6"> <Box >
{navItems.map((item) => ( {navItems.map((item) => (
<Link key={item.label} href={item.href} className="text-white hover:text-gray-300"> <Link key={item.label} href={item.href} >
{item.label} {item.label}
</Link> </Link>
))} ))}
@ -63,7 +66,7 @@ export default function Header() {
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Drawer <Drawer
anchor="right" anchor="left"
open={mobileOpen} open={mobileOpen}
onClose={handleDrawerToggle} onClose={handleDrawerToggle}
ModalProps={{ keepMounted: true }} ModalProps={{ keepMounted: true }}

44
src/theme/theme.ts Normal file
View File

@ -0,0 +1,44 @@
// theme.js
import { createTheme } from '@mui/material/styles';
const light = createTheme({
palette: {
mode: 'light',
primary: {
main: '#1976d2', // Blue
},
secondary: {
main: '#dc004e', // Red
},
background: {
default: '#ffffff', // White
paper: '#f5f5f5', // Light Grey
},
text: {
primary: '#000000', // Black
secondary: '#555555', // Dark Grey
},
},
});
const dark = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#90caf9', // Light Blue
},
secondary: {
main: '#f48fb1', // Pink
},
background: {
default: '#121212', // Dark Grey
paper: '#1d1d1d', // Slightly Lighter Grey
},
text: {
primary: '#ffffff', // White
secondary: '#bbbbbb', // Light Grey
},
},
});
export { light, dark };