Colophon | John.Design

Colophon

Site Technical Specs

// summary

This site is hand made by John Choura with Next.js, TypeScript, Tailwind CSS, and Framer Motion. For now, it's deployed and hosted with Vercel.

// package.json

dependencies: {

@muybuen/type: ^1.1.8
@vgpu/wgsl: 0.6.0
clsx: ^2.1.1
gray-matter: ^4.0.3
motion: ^14.6.0
next: ^16.4.2
next-plausible: ^3.12.5
perfect-freehand: ^1.2.3
react: ^19.3.1
react-dom: ^19.3.1
react-markdown: ^9.1.0
react-syntax-highlighter: ^15.6.6
rehype-raw: ^7.0.0
three: ^0.186.1
vgpu: 0.6.0

}

devDependencies: {

@tailwindcss/postcss: ^4.3.3
@types/node: ^24.19.2
@types/react: ^19.3.0
@types/react-dom: ^19.3.0
@types/react-syntax-highlighter: ^15.5.13
@types/three: ^0.186.0
@typescript-eslint/eslint-plugin: ^8.72.0
@typescript-eslint/parser: ^8.72.0
eslint: ^9.39.5
eslint-config-next: ^16.4.2
postcss: ^8.5.31
tailwindcss: ^4.3.3
typescript: ^5.9.3

}

/* fonts.css */


@font-face {
  font-family: "KUniforma Bold";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/KUniforma-80Bold.woff2") format("woff2");
}

@font-face {
  font-family: "KUniforma Bold Ritalic";
  font-style: italic;
  font-weight: 850;
  font-display: swap;
  src: url("../fonts/KUniforma-85BoldRitalic.woff2") format("woff2");
}

@font-face {
  font-family: "KUniforma Black";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/KUniforma-90Black.woff2") format("woff2");
}

@font-face {
  font-family: "KUniforma Black Ritalic";
  font-style: normal;
  font-weight: 950;
  font-display: swap;
  src: url("../fonts/KUniforma-95BlackRitalic.woff2") format("woff2");
}

@font-face {
  font-family: "PPMondwest";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/PPMondwest-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "MontrealItalic";
  font-style: italic;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/OTNeueMontreal-BookItalicSemiSqueezed.woff2")
    format("woff2");
}

@font-face {
  font-family: "Montreal";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/OTNeueMontreal-BookSemiSqueezed.woff2") format("woff2");
}