Preston's Portfolio (pjnalls.github.io)
🏡💼🧑💻 My homepage
✔ Current directory is not empty. Please choose how to proceed:
› Ignore files and continue
Scaffolding project in ~/problemesolvers.github.io...
Done. Now run:
npm install
npm run dev
(1️⃣) Run npm i @mantine/core @mantine/hooks react-router react-router-dom from the root of the repo.
(2️⃣) Go to https://mantine.dev/getting-started/ to see how setup Mantine for a React project.
(3️⃣) Refer to https://reactrouter.com/en/main/start/tutorial to see different recipes for setting up routing for your React app.'
(4️⃣) Refer to https://github.com/problemesolvers/problemesolvers.github.io for an example of navigation for a React app using Mantine and React Router.
import { Container, Text } from "@mantine/core";
import { useDocumentTitle } from "@mantine/hooks";
import "../styles/components/About.scss";
function About() {
useDocumentTitle("About | Portfolio");
return (
<Container className="about" size={"xs"}>
<Text ta={"left"}>{/** ... */}</Text>
</Container>
);
}
export default About;⚡️🐞🧑🏫 Follow steps here for how to resolve a common 404 error when deploying a SPA (single-page application) as static content to GitHub Pages
Refer to https://www.npmjs.com/package/vite-plugin-pwa for a "Zero-config PWA Framework-agnostic Plugin for Vite".
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { VitePWA, VitePWAOptions } from "vite-plugin-pwa";
const manifest: VitePWAOptions = {
registerType: "prompt",
includeAssets: ["favicon.ico", "apple-touc-icon.png", "masked-icon.svg"],
manifest: {
name: "Preston's Portfolio",
short_name: "pjnalls.github.io",
start_url: "/",
description:
"🧬🧑💻🔬 Portfolio website of a senior software engineer with experience in iOS, Android, Web, .NET, Angular, React and React Native development 🍎🤖⚛️ ♥️ #OneLove 🌏🌎🌍",
icons: [
{
src: "/assets/pwa/manifest-icon-192.maskable.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/assets/pwa/manifest-icon-512.maskable.png",
sizes: "512x512",
type: "image/png",
},
{
src: "/assets/pwa/apple-icon-180.png",
sizes: "180x180",
type: "image/png",
},
{
src: "/assets/pwa/manifest-icon-512.maskable.png",
sizes: "512x512",
type: "image/png",
},
],
theme_color: "#e9dfff",
background_color: "#190444",
display: "standalone",
scope: "/",
orientation: "portrait",
},
injectRegister: false,
minify: false,
workbox: {},
injectManifest: {},
includeManifestIcons: false,
disable: false,
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), VitePWA(manifest)],
});Note: an asset generator can be used to create the images for your PWA's manifest (e.g., npx pwa-asset-generator)
6. 🏗️ build: add ~/.github/workflows/deploy.yml workflow and the follow code to deploy main with GitHub Actions.
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: "npm"
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: "./dist"
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1