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: {

  • @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");
}