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 Document, { Html, Head, Main, NextScript } from "next/document";
3
4import { theme } from "../site.config";
5
6class MyDocument extends Document {
7 render() {
8 return (
9 <Html lang="en">
10 <Head>
11 <meta name="theme-color" content={theme.colors.primary} />
12 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13 <link rel="icon" href="/favicon.ico" />
14 <link rel="manifest" href="/manifest.json" />
15 <script
16 dangerouslySetInnerHTML={{
17 __html: `(function(m,e,t,r,i,c,s){m.collectorQueue = m.collectorQueue || r;
18 m.collectorServer = c; m.collectorId = s; m.collectorScript = e.createElement(t);
19 m.collectorScript.src = c + i; e.head.appendChild(m.collectorScript);
20 })(window,document,'script',[],'/static/collector.js',
21 'https://analytics.bythewood.me','30e69c06-9beb-4283-8919-8c7a686ab013');`,
22 }}
23 />
24 </Head>
25 <body>
26 <Main />
27 <NextScript />
28 </body>
29 </Html>
30 );
31 }
32}
33
34export default MyDocument;