diff --git a/package.json b/package.json index 71742eb..7e8444b 100644 --- a/package.json +++ b/package.json @@ -10,25 +10,23 @@ "test:watch": "jest --watchAll" }, "dependencies": { - "next": "^14.0.3", - "postcss": "^8.4.34", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-nesting": "^12.0.2", - "postcss-preset-env": "^9.3.0", + "@emotion/cache": "^11.11.0", + "@emotion/react": "^11.11.3", + "@emotion/styled": "^11.11.0", + "@mui/material": "^5.15.9", + "@mui/material-nextjs": "^5.15.9", + "next": "^14.1.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^14.2.1", - "@types/css-mediaquery": "^0", "@types/eslint": "^8", "@types/jest": "^29.5.12", "@types/node": "^20.10.4", - "@types/postcss-flexbugs-fixes": "^5", "@types/react": "^18", "@types/react-dom": "^18", - "css-mediaquery": "^0.1.2", "eslint": "^8.55.0", "eslint-config-next": "^14.0.3", "eslint-plugin-prettier": "^5.0.1", diff --git a/postcss.config.json b/postcss.config.json deleted file mode 100644 index 88ef4a9..0000000 --- a/postcss.config.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "plugins": [ - "postcss-flexbugs-fixes", - "postcss-nesting", - [ - "postcss-preset-env", - { - "autoprefixer": { - "flexbox": "no-2009" - }, - "stage": 3, - "features": { - "custom-properties": true - } - } - ] - ] -} diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index a49f56f..055aa48 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,25 +1,19 @@ -import type { Metadata } from "next"; +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; -export const metadata: Metadata = { - title: "About Me", -}; - -export default function About() { +const About = () => { return ( -
-

About Me

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quae - optio quos dolor, corporis tenetur? Alias fugit doloribus nesciunt eum - perferendis mollitia similique cupiditate ea quaerat. Magnam fugit - cupiditate non! -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem - assumenda laudantium in rem nisi architecto mollitia consequuntur quas - nobis cupiditate, natus laborum, excepturi reprehenderit aspernatur - commodi, explicabo amet aperiam. Pariatur. -

-
+ + About + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum tempore + a praesentium perferendis doloremque, veniam minus quis laborum, numquam + blanditiis sunt ex consectetur asperiores assumenda nisi laboriosam et + tempora quos. + + ); -} +}; + +export default About; diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index d3a3567..5f7947e 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -1,25 +1,18 @@ -import type { Metadata } from "next"; - -export const metadata: Metadata = { - title: "Contact", -}; +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; const Contact = () => { return ( -
-

Contact

- -
+ + Contact + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum tempore + a praesentium perferendis doloremque, veniam minus quis laborum, numquam + blanditiis sunt ex consectetur asperiores assumenda nisi laboriosam et + tempora quos. + + ); }; diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx deleted file mode 100644 index 79e42a3..0000000 --- a/src/app/experience/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { Metadata } from "next"; - -export const metadata: Metadata = { - title: "Experience", -}; - -export default function Experience() { - return ( -
-

Experience

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quae - optio quos dolor, corporis tenetur? Alias fugit doloribus nesciunt eum - perferendis mollitia similique cupiditate ea quaerat. Magnam fugit - cupiditate non! -

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem - assumenda laudantium in rem nisi architecto mollitia consequuntur quas - nobis cupiditate, natus laborum, excepturi reprehenderit aspernatur - commodi, explicabo amet aperiam. Pariatur. -

-
- ); -} diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index 34027f4..0000000 --- a/src/app/globals.css +++ /dev/null @@ -1,137 +0,0 @@ -:root { - --border-radius: 12px; - - --body-font: var(--font-inter); - --heading-font: var(--font-inter); - - --h1-size: 54px; - --h1-height: 108px; - --h2-size: 40px; - --h2-height: 75px; - --h3-size: 40px; - --h4-size: 32px; - --h5-size: 28px; - --h6-size: 22px; - - /* gunmetal */ - --dark-color: #2b303aff; - /* non-photo bule */ - --secondary-color: #48a9a6; - /* lavender blush */ - --light-color: #eee5e9ff; - /* gray */ - --neutral-color: #7c7c7cff; - /* chili red */ - --primary-color: #d64933ff; - - /* SPACING */ - --spacing-xs: 4px; - --spacing-sm: 8px; - --spacing-md: 16px; - --spacing-lg: 32px; - --spacing-xl: 64px; - - --header-height: 60px; - --footer-height: 150px; - - --mobile-breakpoint: 550px; - --tablet-breakpoint: 768px; - --desktop-breakpoint: 1144px; - - --standard-max-width: 1100px; -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -/* https://bootcamp.uxdesign.cc/when-to-use-aria-label-or-screen-reader-only-text-cd778627b43b */ -/* Use components/VisuallyHidden.tsx in practice*/ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: var(--dark-color); - background-color: var(--light-color); - font-family: var(--body-font); -} - -a { - color: inherit; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -h1 { - font-family: var(--heading-font); - font-weight: 600; - font-size: var(--h1-size); - margin: 0; - width: 100%; - letter-spacing: -1px; - line-height: var(--h1-height); -} - -h2 { - font-family: var(--heading-font); - font-weight: 600; - font-size: var(--h2-size); - margin: 0; - width: 100%; -} - -h3 { - font-family: var(--heading-font); - font-weight: 500; - font-size: var(--h3-size); - margin: 0; - width: 100%; -} - -h4 { - font-family: var(--heading-font); - font-weight: 500; - font-size: var(--h4-size); - margin: 0; - width: 100%; - letter-spacing: 0.25px; -} - -h5 { - font-family: var(--heading-font); - font-weight: 500; - font-size: var(--h5-size); - margin: 0; - width: 100%; -} - -h6 { - font-family: var(--heading-font); - font-weight: 500; - font-size: var(--h6-size); - margin: 0; - width: 100%; -} - -h1 { - color: var(--primary-color); -} diff --git a/src/app/layout.module.css b/src/app/layout.module.css deleted file mode 100644 index 48d5398..0000000 --- a/src/app/layout.module.css +++ /dev/null @@ -1,16 +0,0 @@ -@value desktop from './styles/breakpoints.css'; - -.main { - width: 100%; - margin: auto; - padding: 0 var(--spacing-lg); - min-height: calc(100vh - var(--header-height) - var(--footer-height)); - height: calc(100vh - var(--header-height) - var(--footer-height)); -} - -/* desktop and up */ -@media only screen and desktop { - .main { - max-width: var(--standard-max-width); - } -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1a771bf..c323442 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,66 +1,33 @@ -import type { Metadata } from "next"; -import { Inter, Sacramento } from "next/font/google"; -import Header from "components/Header"; -import Footer from "components/Footer"; +import * as React from 'react'; +import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; +import { ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; -import "./globals.css"; -import styles from "./layout.module.css"; +import theme from '@/app/styles/theme'; +import Header from '@/components/Header'; +import Footer from '@/components/Footer'; +import MainContainer from '@/components/MainContainer'; -// https://nextjs.org/docs/app/building-your-application/optimizing/fonts#using-multiple-fonts -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - display: "swap", -}); - -const sacramento = Sacramento({ - subsets: ["latin"], - weight: ["400"], - variable: "--font-sacramento", - display: "swap", -}); - -export const metadata: Metadata = { - title: { - template: "%s | Nichole Frey", - default: "Nichole Frey", // a default is required when creating a template - }, - description: "Full-Stack Web Developer located in Central Florida", - - generator: "Next.js", - applicationName: "Nichole Frey's Portfolio", - // referrer: 'origin-when-cross-origin', - keywords: [ - "Full-Stack", - "Web Developer", - "Next.js", - "React", - "JavaScript", - "TypeScript", - ], - // authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }], - creator: "Nichole Frey", - publisher: "Nichole Frey", -}; - -export default function RootLayout({ - children, -}: { +interface RootLayoutProps { children: React.ReactNode; -}) { +} + +const RootLayout: React.FC = ({ children }) => { return ( - - - - + -
-
{children}
-