Adding prettier, some style improvements, some additions

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 120
+}

package.json

@@ -27,7 +27,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src",
+    "prettier": "prettier --write ./src"
   },
   "eslintConfig": {
     "extends": [
@@ -46,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.8.8"
   }
 }

src/App.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

src/App.tsx

@@ -1,26 +1,28 @@
-import { createTheme, ThemeProvider, CssBaseline } from "@mui/material";
-import { useEffectOnce } from "usehooks-ts";
+import { createTheme, ThemeProvider, CssBaseline } from '@mui/material';
+import { useEffectOnce } from 'usehooks-ts';
 
-import { themeOptions } from "./themes/grayscale";
-import { AppHeader } from "./components/AppHeader";
-import { AppContents } from "./components/AppContents";
-import { appConfig } from "./model/AppData";
+import { themeOptions } from './themes/grayscale';
+import { AppHeader } from './components/AppHeader';
+import { AppContents } from './components/AppContents';
+import { appConfig } from './model/AppData';
 
 const theme = createTheme(themeOptions);
 
 const App = () => {
-    useEffectOnce(() => {
-        const docTitle = document.getElementById('app-title') || { textContent: '' };
-        docTitle.textContent = appConfig.title;
-    });
+  useEffectOnce(() => {
+    const docTitle = document.getElementById('app-title') || {
+      textContent: ''
+    };
+    docTitle.textContent = appConfig.title;
+  });
 
-    return (
-        <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <AppHeader {...appConfig} />
-            <AppContents {...appConfig} />
-        </ThemeProvider>
-    );
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <AppHeader {...appConfig} />
+      <AppContents {...appConfig} />
+    </ThemeProvider>
+  );
 };
 
 export default App;

src/components/AppContents.tsx

@@ -1,11 +1,21 @@
-import { Container } from "@mui/material";
-import { AppConfig } from "../model/AppData.interface";
-import { PortfolioPage } from "./PortfolioPage";
+import { Container } from '@mui/material';
+import { AppConfig } from '../model/AppData.interface';
+import { PortfolioPage } from './PortfolioPage';
 
 export const AppContents = (appConfig: AppConfig) => {
-    return <Container maxWidth="lg" style={{ paddingTop: '30px' }}>
-    {appConfig.sections?.map(section => {
-        return <PortfolioPage key={'page-' + section.id} id={section.id}  title={section.title} backgroundImage={section.backgroundImage} portfolioPageItems={section.portfolioPageItems}/>
-    })}    
-    </Container>;
-}
+  return (
+    <Container maxWidth='lg' style={{ paddingTop: '30px' }}>
+      {appConfig.sections?.map((section) => {
+        return (
+          <PortfolioPage
+            key={'page-' + section.id}
+            id={section.id}
+            title={section.title}
+            backgroundImage={section.backgroundImage}
+            portfolioPageItems={section.portfolioPageItems}
+          />
+        );
+      })}
+    </Container>
+  );
+};

src/components/AppHeader.tsx

@@ -1,57 +1,75 @@
-import React from "react";
-import { AppBar, Toolbar, Avatar, Typography, IconButton, Button, Menu, MenuItem, useTheme, useMediaQuery } from "@mui/material";
-import { Menu as MenuIcon } from "@mui/icons-material";
-import { SocialIcons } from "./SocialIcons";
-import { AppHeaderConfig } from "../model/AppData.interface";
+import React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Avatar,
+  Typography,
+  IconButton,
+  Button,
+  Menu,
+  MenuItem,
+  useTheme,
+  useMediaQuery
+} from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { SocialIcons } from './SocialIcons';
+import { AppHeaderConfig } from '../model/AppData.interface';
 
 export const AppHeader = (props: AppHeaderConfig) => {
+  const theme = useTheme();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+  console.log(isSmallScreen);
 
-    const theme = useTheme();
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-    console.log(isSmallScreen);
+  const handleMenuButtonClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
 
-    const handleMenuButtonClick = (event: React.MouseEvent<HTMLElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
 
-    const handleMenuClose = () => {
-        setAnchorEl(null);
-    };
+  const scrollToSection = (sectionId: string) => {
+    const section = document.getElementById(sectionId);
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth' });
+      handleMenuClose();
+    }
+  };
 
-    const scrollToSection = (sectionId: string) => {
-        const section = document.getElementById(sectionId);
-        if (section) {
-            section.scrollIntoView({ behavior: "smooth" });
-            handleMenuClose();
-        }
-    };
-
-    return <AppBar position="static">
-        <Toolbar>
-            <div style={{ flexGrow: 1, display: 'flex', gap: '8px' }}>
-                <Avatar alt='Picture of Fulano de Tal' src={props.avatarImage} />
-                <Typography variant="h6" >
-                    {props.title}
-                </Typography>
-                <SocialIcons {...props.social} />
-            </div>
-            {isSmallScreen ? (
-                <IconButton onClick={handleMenuButtonClick} size="large" edge="end" color="inherit" aria-label="menu">
-                    <MenuIcon />
-                </IconButton>
-            ) : (<div style={{ display: 'flex', flexGrow: 1, gap: '4px' }}>
-                {props.sections?.map(section => <Button key={'buttons' + section.id} variant="contained" onClick={() => scrollToSection(section.id)} >{section.title}</Button>)}
-            </div>)}
-            <Menu
-                id="menu-appbar"
-                anchorEl={anchorEl}
-                open={!!anchorEl}
-                onClose={handleMenuClose}
-                MenuListProps={{ 'aria-labelledby': 'basic-button' }}
-            >
-                {props.sections?.map(section => <MenuItem onClick={() => scrollToSection(section.id)}>{section.title}</MenuItem>)}
-            </Menu>
-        </Toolbar>
-    </AppBar>;
-}
+  return (
+    <AppBar position='sticky'>
+      <Toolbar>
+        <div style={{ flexGrow: 1, display: 'flex', gap: '8px' }}>
+          <Avatar alt='Picture of Fulano de Tal' src={props.avatarImage} />
+          <Typography variant='h6'>{props.title}</Typography>
+          <SocialIcons {...props.social} />
+        </div>
+        {isSmallScreen ? (
+          <IconButton onClick={handleMenuButtonClick} size='large' edge='end' color='inherit' aria-label='menu'>
+            <MenuIcon />
+          </IconButton>
+        ) : (
+          <div style={{ display: 'flex', flexGrow: 1, gap: '4px' }}>
+            {props.sections?.map((section) => (
+              <Button key={'buttons' + section.id} variant='contained' onClick={() => scrollToSection(section.id)}>
+                {section.title}
+              </Button>
+            ))}
+          </div>
+        )}
+        <Menu
+          id='menu-appbar'
+          anchorEl={anchorEl}
+          open={!!anchorEl}
+          onClose={handleMenuClose}
+          MenuListProps={{ 'aria-labelledby': 'basic-button' }}
+        >
+          {props.sections?.map((section) => (
+            <MenuItem onClick={() => scrollToSection(section.id)}>{section.title}</MenuItem>
+          ))}
+        </Menu>
+      </Toolbar>
+    </AppBar>
+  );
+};

src/components/DefaultImages.tsx

@@ -1,24 +1,24 @@
-import mathDark2 from "../assets/ai-generated/math-dark-2.jpg";
-import mathDark1 from "../assets/ai-generated/math-dark-1.jpg";
-import music from "../assets/ai-generated/music.jpg";
-import math from "../assets/ai-generated/math.jpg";
-import networks from "../assets/ai-generated/networks.jpg";
-import signals from "../assets/ai-generated/sginals.jpg";
-import signalsDark from "../assets/ai-generated/signals-dark.jpg";
-import universe from "../assets/ai-generated/universe.jpg";
-import education from "../assets/ai-generated/education.jpg";
+import mathDark2 from '../assets/ai-generated/math-dark-2.jpg';
+import mathDark1 from '../assets/ai-generated/math-dark-1.jpg';
+import music from '../assets/ai-generated/music.jpg';
+import math from '../assets/ai-generated/math.jpg';
+import networks from '../assets/ai-generated/networks.jpg';
+import signals from '../assets/ai-generated/sginals.jpg';
+import signalsDark from '../assets/ai-generated/signals-dark.jpg';
+import universe from '../assets/ai-generated/universe.jpg';
+import education from '../assets/ai-generated/education.jpg';
 
-import avatar from '../assets/avatar.png'
+import avatar from '../assets/avatar.png';
 
 export class DefaultImages {
-    static MathDark2 = mathDark2;
-    static MathDark1 = mathDark1;
-    static Music = music;
-    static Education = education;
-    static Math = math;
-    static Networks = networks;
-    static Signals = signals;
-    static SignalsDark = signalsDark;
-    static Universe = universe;
-    static Avatar = avatar;
+  static MathDark2 = mathDark2;
+  static MathDark1 = mathDark1;
+  static Music = music;
+  static Education = education;
+  static Math = math;
+  static Networks = networks;
+  static Signals = signals;
+  static SignalsDark = signalsDark;
+  static Universe = universe;
+  static Avatar = avatar;
 }