Docker

.dockerignore

@@ -0,0 +1,34 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.next
+**/.cache
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/charts
+**/docker-compose*
+**/compose.y*ml
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+**/build
+**/dist
+LICENSE
+README.md

Dockerfile

@@ -0,0 +1,57 @@
+# syntax=docker/dockerfile:1
+
+# ARG for Node.js version
+ARG NODE_VERSION=20.12.1
+
+# Base image
+FROM node:${NODE_VERSION}-alpine as base
+
+# Set working directory
+WORKDIR /usr/src/app
+
+# Install production dependencies
+FROM base as deps
+
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci --omit=dev
+
+# Build application
+FROM deps as build
+
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci
+
+# Copy the rest of the source files into the image
+COPY . .
+
+# Run the build script
+RUN npm run build
+
+# Final image with minimal runtime dependencies
+FROM base as final
+
+ENV NODE_ENV production
+
+# Create a non-root user to run the application
+RUN addgroup -S appgroup && adduser -S appuser -G appgroup
+USER appuser
+
+# Copy package.json
+COPY package.json .
+
+# Copy production dependencies and built application
+COPY --from=deps /usr/src/app/node_modules ./node_modules
+COPY --from=build /usr/src/app/dist ./dist  
+
+# Copy any static files (like index.html and others) if needed
+COPY --from=build /usr/src/app/public ./public
+
+# Expose the application port
+EXPOSE 3300
+
+# Command to run the application
+CMD ["npm", "start"]  # Ensure this command matches your start script in package.json

README.Docker.md

@@ -0,0 +1,22 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:3300.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)

compose.yaml

@@ -0,0 +1,42 @@
+version: '3.9'  # Specify the version of Docker Compose
+
+services:
+  server:
+    build:
+      context: .
+    environment:
+      NODE_ENV: production
+      # Include additional environment variables here as needed
+    ports:
+      - 3300:3300
+    healthcheck:
+      test: ["CMD-SHELL", "curl --fail http://localhost:3300/health || exit 1"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  db:
+    image: postgres
+    restart: always
+    user: postgres
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: example
+      POSTGRES_PASSWORD_FILE: /run/secrets/db-password
+    expose:
+      - 5432
+    healthcheck:
+      test: ["CMD", "pg_isready"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    secrets:
+      - db-password
+
+volumes:
+  db-data:
+
+secrets:
+  db-password:
+    file: db/password.txt

db/password.txt

@@ -0,0 +1 @@
+MNaz+/7kBJCZPf00PlNSQopPPv8sCgZSSh5VSCFCBlPWH6H2l4PblgO2Ii3+4eiyfBkQ3aHaxu7UXYsO%                                                                                         

package.json

@@ -18,6 +18,7 @@
     "maath": "^0.10.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-parallax-tilt": "^1.7.212",
     "react-router-dom": "^6.22.1",
     "react-vertical-timeline-component": "^3.6.0",
@@ -26,7 +27,9 @@
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-vertical-timeline-component": "^3.3.6",
+    "@types/three": "^0.169.0",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 
 import {
   About,
@@ -10,17 +10,9 @@ import {
   Tech,
   Works,
   StarsCanvas,
-} from "./components";
-import { useEffect } from "react";
-import { config } from "./constants/config";
+} from './components';
 
 const App = () => {
-  useEffect(() => {
-    if (document.title !== config.html.title) {
-      document.title = config.html.title;
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <div className="bg-primary relative z-0">

src/components/canvas/Stars.tsx

@@ -2,7 +2,9 @@ import { useState, useRef, Suspense } from "react";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Points, PointMaterial, Preload } from "@react-three/drei";
 import { random } from "maath";
-import { TypedArray } from "three";
+import { TypedArray } from "three";  
+import * as THREE from 'three';      // Ensure this import is present
+
 
 const Stars = (props: any) => {
   const ref = useRef<THREE.Points>();