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

Adding MUI and app bar to he portfolio
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
apatil 2025-05-02 16:29:00 +01:00
parent e49b9f3821
commit 1cd5130fa7
6 changed files with 907 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.prettierrc.js Normal file
View File

@ -0,0 +1,17 @@
/** @type {import('prettier').Config} */
module.exports = {
arrowParens: 'always',
// Prettier might give an "unknown option" warning, however "editorconfig" is a valid option, see:
// http://json.schemastore.org/prettierrc
// https://prettier.io/docs/en/configuration.html#configuration-schema
editorconfig: true, // see .editorconfig
endOfLine: 'auto', // see .editorconfig
bracketSameLine: false,
jsxSingleQuote: true,
printWidth: 100, // this isn't like max-len, it's a soft target
semi: true,
singleQuote: true,
tabWidth: 2, // see .editorconfig
trailingComma: 'all',
useTabs: false // see .editorconfig
};

810
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@ -3,25 +3,29 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack -p 8080", "dev": "next dev --turbopack --hostname 0.0.0.0 --port 8082",
"build": "next build", "build": "next build",
"start": "next start -p 8080", "start": "next start -p 8080",
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^7.0.2",
"@mui/material": "^7.0.2",
"next": "15.3.1",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0"
"next": "15.3.1"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5", "@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",
"@tailwindcss/postcss": "^4",
"tailwindcss": "^4",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.3.1", "eslint-config-next": "15.3.1",
"@eslint/eslintrc": "^3" "tailwindcss": "^4",
"typescript": "^5"
} }
} }

6
src/app/layout.tsx
View File

@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Header from "@/components/Header";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "The Coding Grizzly",
description: "Generated by create next app", description: "Fun interactive coding platform",
}; };
export default function RootLayout({ export default function RootLayout({
@ -27,6 +28,7 @@ export default function RootLayout({
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
<Header />
{children} {children}
</body> </body>
</html> </html>

7
src/app/not-found.tsx Normal file
View File

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

78
src/components/Header/index.tsx Normal file
View File

@ -0,0 +1,78 @@
'use client'
import React from 'react'
import Link from 'next/link'
import MenuIcon from '@mui/icons-material/Menu'
import {
AppBar,
Box,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
ListItemText,
Toolbar,
Typography
} from '@mui/material'
const navItems = [
{ label: 'Home', href: '/' },
{ label: 'Blog', href: '/blog' },
{ label: 'Info', href: '/info' },
{ label: 'Music', href: '/music' }
]
export default function Header() {
const [mobileOpen, setMobileOpen] = React.useState(false)
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen)
}
const drawer = (
<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<Typography variant="h6" className="my-4">Menu</Typography>
<List>
{navItems.map((item) => (
<ListItem key={item.label} disablePadding>
<ListItemButton sx={{ textAlign: 'center' }} component={Link} href={item.href}>
<ListItemText primary={item.label} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
)
return (
<>
<AppBar position="static" className="bg-gray-900">
<Toolbar className="flex justify-between">
<Typography variant="h6" className="text-white">
My Website
</Typography>
<IconButton
color="inherit"
aria-label="open drawer"
edge="end"
onClick={handleDrawerToggle}
className="block md:hidden"
>
<MenuIcon />
</IconButton>
<Box className="hidden md:flex gap-6">
{navItems.map((item) => (
<Link key={item.label} href={item.href} className="text-white hover:text-gray-300">
{item.label}
</Link>
))}
</Box>
</Toolbar>
</AppBar>
<Drawer
anchor="right"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{ keepMounted: true }}
>
{drawer}
</Drawer>
</>
)
}