Animation-heavy personal portfolio on Next.js: a custom cursor, a page-transition loader, and canvas backgrounds.
canvas-animationscss-modulesdark-themehandcodednextjspersonal-websiteportfolioreact
1import React from "react";
2import Head from "next/head";
3import PropTypes from "prop-types";
4import styles from "@styles/components/page.module.css";
5
6import { strings } from "../site.config";
7
8const Page = (props) => {
9 const baseTitle = strings.title;
10 const defaultDescription = strings.description;
11
12 return (
13 <>
14 <Head>
15 <title>
16 {props.title ? `${props.title} — ${baseTitle}` : baseTitle}
17 </title>
18 <meta
19 name="description"
20 content={props.description ? props.description : defaultDescription}
21 />
22 </Head>
23 <main
24 style={{ gridArea: props.gridArea ? props.gridArea : "main" }}
25 className={styles.main}
26 >
27 {props.children}
28 </main>
29 </>
30 );
31};
32
33Page.propTypes = {
34 title: PropTypes.string,
35 description: PropTypes.string,
36 gridArea: PropTypes.string,
37 children: PropTypes.oneOfType([
38 PropTypes.node,
39 PropTypes.arrayOf(PropTypes.node),
40 ]),
41};
42
43export default Page;