John.Design

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 Netlify.

// package.json

dependencies: {

@liveblocks/client: ^2.9.1
@liveblocks/react: ^2.9.1
@muybuen/type: ^1.1.6
@react-three/drei: ^9.46.1
@react-three/fiber: ^8.9.1
@react-three/postprocessing: ^2.7.0
clsx: ^1.2.1
date-fns: ^2.29.3
eslint: 8.27.0
framer-motion: ^11.2.5
framer-motion-3d: ^11.2.5
fs: ^0.0.1-security
gray-matter: ^4.0.3
html-react-parser: ^3.0.4
next: ^14.2.5
perfect-freehand: ^1.2.0
postprocessing: ^6.29.1
r3f-perf: ^6.6.0
react: ^18.3.1
react-dom: ^18.3.1
react-markdown: ^9.0.1
react-syntax-highlighter: ^15.5.0
rehype-raw: ^7.0.0
rss-parser: ^3.12.0
three: ^0.146.0
typescript: 4.8.4

}

devDependencies: {

@netlify/plugin-nextjs: ^5.6.0
@types/node: 18.11.9
@types/react: 18.0.25
@types/react-dom: 18.0.8
@types/react-syntax-highlighter: ^15.5.11
@types/three: ^0.146.0
autoprefixer: ^10.4.13
eslint-config-next: ^14.2.5
postcss: ^8.4.18
tailwindcss: ^3.4.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");
}