From 7c06fccc81e0e1235e4072108409079ec46f3fe2 Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:12:42 +0000 Subject: [PATCH 1/6] =?UTF-8?q?Making=20notification=20for=20the=20navbar?= =?UTF-8?q?=20=F0=9F=94=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 24 ------------------------ 1 file changed, 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad26d2e5..8a7d2572 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1559,24 +1559,6 @@ "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==", "dev": true }, - "node_modules/@types/stats.js": { - "version": "0.17.3", - "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", - "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==", - "peer": true - }, - "node_modules/@types/three": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@types/three/-/three-0.160.0.tgz", - "integrity": "sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==", - "peer": true, - "dependencies": { - "@types/stats.js": "*", - "@types/webxr": "*", - "fflate": "~0.6.10", - "meshoptimizer": "~0.18.1" - } - }, "node_modules/@types/webxr": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz", @@ -3370,12 +3352,6 @@ "three": ">=0.137" } }, - "node_modules/meshoptimizer": { - "version": "0.18.1", - "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", - "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==", - "peer": true - }, "node_modules/micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", From b74da7d7d1a952a76e1c8f5bc62c833f91135f2c Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:22:43 +0000 Subject: [PATCH 2/6] =?UTF-8?q?dockerized=20the=20application=20?= =?UTF-8?q?=F0=9F=93=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dockerignore | 34 +++++++++++++++++++++++ Dockerfile | 72 ++++++++++++++++++++++++++++++++++++++++++++++++ README.Docker.md | 22 +++++++++++++++ compose.yaml | 51 ++++++++++++++++++++++++++++++++++ 4 files changed, 179 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 README.Docker.md create mode 100644 compose.yaml diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..dc157ff1 --- /dev/null +++ b/.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 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..d24ec9ff --- /dev/null +++ b/Dockerfile @@ -0,0 +1,72 @@ +# syntax=docker/dockerfile:1 + +# Comments are provided throughout this file to help you get started. +# If you need more help, visit the Dockerfile reference guide at +# https://docs.docker.com/go/dockerfile-reference/ + +# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7 + +ARG NODE_VERSION=20.12.1 + +################################################################################ +# Use node image for base image for all stages. +FROM node:${NODE_VERSION}-alpine as base + +# Set working directory for all build stages. +WORKDIR /usr/src/app + + +################################################################################ +# Create a stage for installing production dependecies. +FROM base as deps + +# Download dependencies as a separate step to take advantage of Docker's caching. +# Leverage a cache mount to /root/.npm to speed up subsequent builds. +# Leverage bind mounts to package.json and package-lock.json to avoid having to copy them +# into this layer. +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 + +################################################################################ +# Create a stage for building the application. +FROM deps as build + +# Download additional development dependencies before building, as some projects require +# "devDependencies" to be installed to build. If you don't need this, remove this step. +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 + +################################################################################ +# Create a new stage to run the application with minimal runtime dependencies +# where the necessary files are copied from the build stage. +FROM base as final + +# Use production node environment by default. +ENV NODE_ENV production + +# Run the application as a non-root user. +USER node + +# Copy package.json so that package manager commands can be used. +COPY package.json . + +# Copy the production dependencies from the deps stage and also +# the built application from the build stage into the image. +COPY --from=deps /usr/src/app/node_modules ./node_modules +COPY --from=build /usr/src/app/mascot ./mascot + + +# Expose the port that the application listens on. +EXPOSE 3300 + +# Run the application. +CMD app diff --git a/README.Docker.md b/README.Docker.md new file mode 100644 index 00000000..b74a15fe --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/compose.yaml b/compose.yaml new file mode 100644 index 00000000..f7a767ae --- /dev/null +++ b/compose.yaml @@ -0,0 +1,51 @@ +# Comments are provided throughout this file to help you get started. +# If you need more help, visit the Docker Compose reference guide at +# https://docs.docker.com/go/compose-spec-reference/ + +# Here the instructions define your application as a service called "server". +# This service is built from the Dockerfile in the current directory. +# You can add other services your application may depend on here, such as a +# database or a cache. For examples, see the Awesome Compose repository: +# https://github.com/docker/awesome-compose +services: + server: + build: + context: . + environment: + NODE_ENV: production + ports: + - 3300:3300 + +# The commented out section below is an example of how to define a PostgreSQL +# database that your application can use. `depends_on` tells Docker Compose to +# start the database before your application. The `db-data` volume persists the +# database data between container restarts. The `db-password` secret is used +# to set the database password. You must create `db/password.txt` and add +# a password of your choosing to it before running `docker-compose up`. +# depends_on: +# db: +# condition: service_healthy +# db: +# image: postgres +# restart: always +# user: postgres +# secrets: +# - db-password +# 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 +# volumes: +# db-data: +# secrets: +# db-password: +# file: db/password.txt + From 1a08e63e5cacc6f1d0448bc07ca5c116a3c2f92c Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:05:03 +0000 Subject: [PATCH 3/6] =?UTF-8?q?fixed:=20dockerized=20the=20application=20?= =?UTF-8?q?=F0=9F=93=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Dockerfile | 55 ++++++++++--------------- compose.yaml | 71 ++++++++++++++------------------- package-lock.json | 45 +++++++++++++++++++++ package.json | 1 + src/components/canvas/Stars.tsx | 4 +- 5 files changed, 100 insertions(+), 76 deletions(-) diff --git a/Dockerfile b/Dockerfile index d24ec9ff..846a0ccf 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,72 +1,57 @@ # syntax=docker/dockerfile:1 -# Comments are provided throughout this file to help you get started. -# If you need more help, visit the Dockerfile reference guide at -# https://docs.docker.com/go/dockerfile-reference/ - -# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7 - +# ARG for Node.js version ARG NODE_VERSION=20.12.1 -################################################################################ -# Use node image for base image for all stages. +# Base image FROM node:${NODE_VERSION}-alpine as base -# Set working directory for all build stages. +# Set working directory WORKDIR /usr/src/app - -################################################################################ -# Create a stage for installing production dependecies. +# Install production dependencies FROM base as deps -# Download dependencies as a separate step to take advantage of Docker's caching. -# Leverage a cache mount to /root/.npm to speed up subsequent builds. -# Leverage bind mounts to package.json and package-lock.json to avoid having to copy them -# into this layer. 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 -################################################################################ -# Create a stage for building the application. +# Build application FROM deps as build -# Download additional development dependencies before building, as some projects require -# "devDependencies" to be installed to build. If you don't need this, remove this step. 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 the rest of the source files into the image COPY . . -# Run the build script. + +# Run the build script RUN npm run build -################################################################################ -# Create a new stage to run the application with minimal runtime dependencies -# where the necessary files are copied from the build stage. +# Final image with minimal runtime dependencies FROM base as final -# Use production node environment by default. ENV NODE_ENV production -# Run the application as a non-root user. -USER node +# Create a non-root user to run the application +RUN addgroup -S appgroup && adduser -S appuser -G appgroup +USER appuser -# Copy package.json so that package manager commands can be used. +# Copy package.json COPY package.json . -# Copy the production dependencies from the deps stage and also -# the built application from the build stage into the image. +# Copy production dependencies and built application COPY --from=deps /usr/src/app/node_modules ./node_modules -COPY --from=build /usr/src/app/mascot ./mascot +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 port that the application listens on. +# Expose the application port EXPOSE 3300 -# Run the application. -CMD app +# Command to run the application +CMD ["npm", "start"] # Ensure this command matches your start script in package.json diff --git a/compose.yaml b/compose.yaml index f7a767ae..eefa2ab1 100644 --- a/compose.yaml +++ b/compose.yaml @@ -1,51 +1,42 @@ -# Comments are provided throughout this file to help you get started. -# If you need more help, visit the Docker Compose reference guide at -# https://docs.docker.com/go/compose-spec-reference/ +version: '3.9' # Specify the version of Docker Compose -# Here the instructions define your application as a service called "server". -# This service is built from the Dockerfile in the current directory. -# You can add other services your application may depend on here, such as a -# database or a cache. For examples, see the Awesome Compose repository: -# https://github.com/docker/awesome-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 -# The commented out section below is an example of how to define a PostgreSQL -# database that your application can use. `depends_on` tells Docker Compose to -# start the database before your application. The `db-data` volume persists the -# database data between container restarts. The `db-password` secret is used -# to set the database password. You must create `db/password.txt` and add -# a password of your choosing to it before running `docker-compose up`. -# depends_on: -# db: -# condition: service_healthy -# db: -# image: postgres -# restart: always -# user: postgres -# secrets: -# - db-password -# 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 -# volumes: -# db-data: -# secrets: -# db-password: -# file: db/password.txt + 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 diff --git a/package-lock.json b/package-lock.json index 8a7d2572..ff326020 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@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", @@ -1450,6 +1451,12 @@ "win32" ] }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1559,6 +1566,32 @@ "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==", "dev": true }, + "node_modules/@types/stats.js": { + "version": "0.17.3", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz", + "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==", + "license": "MIT" + }, + "node_modules/@types/three": { + "version": "0.169.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.169.0.tgz", + "integrity": "sha512-oan7qCgJBt03wIaK+4xPWclYRPG9wzcg7Z2f5T8xYTNEF95kh0t0lklxLLYBDo7gQiGLYzE6iF4ta7nXF2bcsw==", + "license": "MIT", + "dependencies": { + "@tweenjs/tween.js": "~23.1.3", + "@types/stats.js": "*", + "@types/webxr": "*", + "@webgpu/types": "*", + "fflate": "~0.8.2", + "meshoptimizer": "~0.18.1" + } + }, + "node_modules/@types/three/node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "license": "MIT" + }, "node_modules/@types/webxr": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz", @@ -1795,6 +1828,12 @@ "vite": "^4.2.0 || ^5.0.0" } }, + "node_modules/@webgpu/types": { + "version": "0.1.49", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.49.tgz", + "integrity": "sha512-NMmS8/DofhH/IFeW+876XrHVWel+J/vdcFCHLDqeJgkH9x0DeiwjVd8LcBdaxdG/T7Rf8VUAYsA8X1efMzLjRQ==", + "license": "BSD-3-Clause" + }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", @@ -3352,6 +3391,12 @@ "three": ">=0.137" } }, + "node_modules/meshoptimizer": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", + "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==", + "license": "MIT" + }, "node_modules/micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", diff --git a/package.json b/package.json index d0cd4789..fdea1241 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@types/react": "^18.2.43", "@types/react-dom": "^18.2.17", "@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", diff --git a/src/components/canvas/Stars.tsx b/src/components/canvas/Stars.tsx index af2601e2..1b137e3d 100644 --- a/src/components/canvas/Stars.tsx +++ b/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(); From b9eb9409e5d189b41fc1f5a6f1b1c121e4176514 Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:12:18 +0000 Subject: [PATCH 4/6] =?UTF-8?q?dockerized=20the=20application=20?= =?UTF-8?q?=F0=9F=93=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- db/password.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 db/password.txt diff --git a/db/password.txt b/db/password.txt new file mode 100644 index 00000000..5a70a13f --- /dev/null +++ b/db/password.txt @@ -0,0 +1 @@ +MNaz+/7kBJCZPf00PlNSQopPPv8sCgZSSh5VSCFCBlPWH6H2l4PblgO2Ii3+4eiyfBkQ3aHaxu7UXYsO% \ No newline at end of file From 319cbd7a6720b93f0362dada7c3925d656fe02df Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Mon, 21 Oct 2024 22:36:20 +0000 Subject: [PATCH 5/6] =?UTF-8?q?Improving=20the=20search=20engine=20optimiz?= =?UTF-8?q?ation=20for=20the=20app=F0=9F=93=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 42 ++++++++++++++++++++++++++ package.json | 2 ++ src/components/sections/About.tsx | 50 +++++++++++++++---------------- src/constants/config.ts | 4 +-- 4 files changed, 70 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index ff326020..e037fbc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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", @@ -23,6 +24,7 @@ "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", @@ -1538,6 +1540,16 @@ "@types/react": "*" } }, + "node_modules/@types/react-helmet": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz", + "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-reconciler": { "version": "0.26.7", "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.26.7.tgz", @@ -3942,6 +3954,27 @@ "loose-envify": "^1.1.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, + "node_modules/react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/react-intersection-observer": { "version": "8.34.0", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz", @@ -4018,6 +4051,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-use-measure": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz", diff --git a/package.json b/package.json index fdea1241..d69f9531 100644 --- a/package.json +++ b/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,6 +27,7 @@ "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", diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx index 2d2d0f7f..ca6632b6 100644 --- a/src/components/sections/About.tsx +++ b/src/components/sections/About.tsx @@ -1,12 +1,13 @@ -import React from "react"; -import Tilt from "react-parallax-tilt"; -import { motion } from "framer-motion"; +import React from 'react'; +import Tilt from 'react-parallax-tilt'; +import { motion } from 'framer-motion'; -import { services } from "../../constants"; -import { SectionWrapper } from "../../hoc"; -import { fadeIn } from "../../utils/motion"; -import { config } from "../../constants/config"; -import { Header } from "../atoms/Header"; +import { services } from '../../constants'; +import { SectionWrapper } from '../../hoc'; +import { fadeIn } from '../../utils/motion'; +import { config } from '../../constants/config'; +import { Header } from '../atoms/Header'; +import { Helmet } from 'react-helmet'; interface IServiceCard { index: number; @@ -15,28 +16,16 @@ interface IServiceCard { } const ServiceCard: React.FC = ({ index, title, icon }) => ( - +
- web-development + web-development -

- {title} -

+

{title}
@@ -44,12 +33,21 @@ const ServiceCard: React.FC = ({ index, title, icon }) => ( ); const About = () => { + const { p, h2, content } = config.sections.about; + return ( <> + + + {h2} - {p} + + + +
{config.sections.about.content} @@ -64,4 +62,4 @@ const About = () => { ); }; -export default SectionWrapper(About, "about"); +export default SectionWrapper(About, 'about'); diff --git a/src/constants/config.ts b/src/constants/config.ts index b17d4e52..b5698f9d 100644 --- a/src/constants/config.ts +++ b/src/constants/config.ts @@ -65,8 +65,8 @@ export const config: TConfig = { }, sections: { about: { - p: "Introduction", - h2: "Overview.", + p: "About me", + h2: "Introduction", content: `I'm a skilled software developer with experience in TypeScript and JavaScript, and expertise in frameworks like React, Node.js, and Three.js. I'm a quick learner and collaborate closely with clients to From aa8b350d941bc589936e482b3487da36ae9990fe Mon Sep 17 00:00:00 2001 From: Mastech <82134715+abudusamad@users.noreply.github.com> Date: Mon, 21 Oct 2024 22:52:09 +0000 Subject: [PATCH 6/6] =?UTF-8?q?Improving=20the=20search=20engine=20optimiz?= =?UTF-8?q?ation=20for=20the=20app=F0=9F=93=B2=20for=20the=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 12 +--- src/components/sections/Contact.tsx | 105 +++++++++++++++------------- 2 files changed, 60 insertions(+), 57 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0c4f9cd5..16d06954 100644 --- a/src/App.tsx +++ b/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 (
diff --git a/src/components/sections/Contact.tsx b/src/components/sections/Contact.tsx index caea94f8..8a56866a 100644 --- a/src/components/sections/Contact.tsx +++ b/src/components/sections/Contact.tsx @@ -7,6 +7,7 @@ import { SectionWrapper } from "../../hoc"; import { slideIn } from "../../utils/motion"; import { config } from "../../constants/config"; import { Header } from "../atoms/Header"; +import { Helmet } from "react-helmet"; const INITIAL_STATE = Object.fromEntries( Object.keys(config.contact.form).map((input) => [input, ""]) @@ -66,57 +67,67 @@ const Contact = () => { }; return ( -
- -
- -
+ + + {config.contact.h2} - {config.contact.p} + + + + +
+ - {Object.keys(config.contact.form).map((input) => { - const { span, placeholder } = - config.contact.form[input as keyof typeof config.contact.form]; - const Component = input === "message" ? "textarea" : "input"; +
- return ( - - ); - })} - - - + {Object.keys(config.contact.form).map(input => { + const { span, placeholder } = + config.contact.form[input as keyof typeof config.contact.form]; + const Component = input === 'message' ? 'textarea' : 'input'; + + return ( + + ); + })} + + + - - - -
+ + + +
+ ); };