WebGL Portfolio Website
Full Stack
Graphics
Table of Contents
About this Project
This project is my second iteration of creating my own portfolio website using skills that I've acquired myself. This projects has more features in regarding an easy to use markdown system, where I can easily write down a post on a markdown file, which will be rendered in html when viewing my website.
Technical Details
For the website, I am using Next13.4 with Typescript. I am using WebGL to construct the worm model using Three.js. Lastly, I am using MathJax to render mathematical formulas in my posts.
package.json:
{
"name": "my-portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@react-three/fiber": "^8.14.5",
"@types/three": "^0.157.0",
"@vercel/analytics": "^1.1.1",
"contentlayer": "^0.3.4",
"date-fns": "^2.30.0",
"maath": "^0.10.4",
"mathjax": "^3.2.2",
"next": "13.5.4",
"next-contentlayer": "^0.3.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rehype-autolink-headings": "^7.0.0",
"rehype-parse": "^9.0.0",
"rehype-pretty-code": "^0.10.1",
"rehype-slug": "^6.0.0",
"rehype-stringify": "^10.0.0",
"remark-breaks": "^4.0.0",
"remark-gfm": "^3.0.1",
"remark-normalize-headings": "^4.0.0",
"remark-toc": "^9.0.0",
"sharp": "^0.32.6",
"shiki": "^0.14.5",
"three": "^0.157.0",
"zustand": "^4.4.3"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@types/mdx": "^2.0.9",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"daisyui": "^3.9.2",
"eslint": "^8",
"eslint-config-next": "13.5.4",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5"
}
}Project Tree Directory:
├── content
│ ├── blogs
│ └── projects
├── public
│ ├── icons
│ ├── mathjax
│ └── posts
│ ├── blogs
│ └── projects
└── src
├── app
│ ├── about
│ ├── blogs
│ │ └── [slug]
│ └── projects
│ └── [slug]
├── components
│ └── MovingSnake
└── stores