Remove EditorConfig and ESLint configuration files; refactor transition handling in MyApp component and update styles for improved layout and animations

@@ -1,18 +0,0 @@# EditorConfig is awesome: https://EditorConfig.org# Top-most EditorConfig fileroot = true# Default configuration for all file types[*]charset = utf-8end_of_line = lfindent_style = spaceindent_size = 2insert_final_newline = truetrim_trailing_whitespace = true# Markdown files use trailing whitespace for line breaks[*.md]trim_trailing_whitespace = falseindent_size = 4

@@ -1,30 +0,0 @@module.exports = {  env: {    browser: true,    es6: true,    node: true,  },  extends: [    "eslint:recommended",    "plugin:react/recommended",    "plugin:prettier/recommended",    "plugin:@next/next/recommended",  ],  globals: {    Atomics: "readonly",    SharedArrayBuffer: "readonly",  },  parserOptions: {    ecmaFeatures: {      jsx: true,    },    ecmaVersion: 2018,    sourceType: "module",  },  plugins: ["react", "prettier"],  rules: {    "prettier/prettier": "error",    "react/jsx-uses-react": "error",    "react/jsx-uses-vars": "error",  },};

@@ -12,10 +12,19 @@ import Mouse from "../components/mouse";class MyApp extends App {  constructor(props) {    super(props);    this.transitionNodeRef = createRef();    this.transitionNodeRefs = new Map();  }  getNodeRef(route) {    if (!this.transitionNodeRefs.has(route)) {      this.transitionNodeRefs.set(route, createRef());    }    return this.transitionNodeRefs.get(route);  }  render() {    const { Component, pageProps } = this.props;    const { Component, pageProps, router } = this.props;    const nodeRef = this.getNodeRef(router.route);    return (      <>

@@ -25,13 +34,13 @@ class MyApp extends App {        <Menu />        <TransitionGroup component={null}>          <CSSTransition            key={this.props.router.route}            key={router.route}            appear            timeout={250}            classNames="transition"            nodeRef={this.transitionNodeRef}            nodeRef={nodeRef}          >            <div className="transition" ref={this.transitionNodeRef}>            <div className="transition" ref={nodeRef}>              <Grid>                <Component {...pageProps} />              </Grid>

@@ -44,4 +53,3 @@ class MyApp extends App {}export default MyApp;// Transition classes now provided by globals.css

@@ -33,19 +33,42 @@ button {  top: 0;  left: 0;  right: 0;  min-height: 100vh;  width: 100%;  transition: opacity var(--transition-250);  will-change: opacity;}.transition-enter {.transition-enter,.transition-appear {  opacity: 0;}.transition-enter-active,.transition-enter-done {.transition-appear-active,.transition-enter-done,.transition-appear-done {  opacity: 1;}.transition-exit {  opacity: 1;}.transition-exit-active {.transition-exit-active,.transition-exit-done {  opacity: 0;}@media (prefers-reduced-motion: reduce) {  .transition {    transition: none;  }  .transition-enter,  .transition-appear,  .transition-exit-active,  .transition-exit-done {    opacity: 1;  }}

@@ -42,16 +42,19 @@  grid-template-columns: 50vw 1fr;  grid-template-rows: auto;  grid-template-areas: "left right";  margin-right: 60px;  margin-left: 60px;  transform: translateX(-100vw);  animation: slideUp 750ms 500ms forwards;}@media (max-width: 1023.98px) {  .grid {    margin-right: 0;    margin-left: 0;    grid-template-columns: 1fr;    grid-template-rows: auto auto;    grid-template-areas:      "left"      "right";    margin-top: 60px;  }}

@@ -64,7 +67,13 @@  min-height: 100vh;  display: flex;  align-items: center;  padding-left: 60px;}@media (max-width: 1023.98px) {  .gridLeft {    grid-column: 1;    grid-row: 1;  }}.gridRight {

@@ -74,6 +83,13 @@  align-items: center;}@media (max-width: 1023.98px) {  .gridRight {    grid-column: 1;    grid-row: 2;  }}@media (max-width: 1023.98px) {  .gridLeft,  .gridRight {