lynkos.github.io

macOS Sequoia-inspired personal website.

Home Page

404 Error Page

Features

Note

Additional features are still in development

Current features are actively being optimized and improved

Includes (but is not limited to):

• Resizable and movable windows
  • Supported on both desktop and mobile
  • Click red button in upper-left corner to close window
  • Click green button in upper-left corner to maximize window
• Mail
  • Send me an email directly, without leaving the site!
  • Includes reCAPTCHA to prevent spam
  • Your email and message are required
  • Subject is optional
• iTerm
  • Inspired by terminal (specifically iTerm)
  • Timestamp (i.e. displays date and time when site is loaded)
• Safari
  • Click on any skill to toggle its description
  • Interactive address bar
• Notes
  • View various projects in sidebar
• TextEdit
  • Font family, size, color, and line-height can be changed
  • Font alignment (i.e. left, center, right, justify) can be changed
  • Font style (i.e. bold, italic, underline) can be changed
• Launchpad
  • Apps are draggable/reorderable
  • Apps are searchable (i.e. type in searchbar to filter)
• Calculator
  • Functional calculator
  • Supports basic arithmetic operations, including:
    • Addition (+)
    • Subtraction (−)
    • Multiplication (×)
    • Division (÷)
    • Modulus (%)
• Menubar
  • Real-time Clock (i.e. displays date and time)
  • Click the play icon in the upper-right corner of the menubar to open Music Player and see what I am/was listening to
  • Click the WiFi icon in the upper-right corner of the menubar to open WiFi menu
  • Click any of the tabs in the upper-left corner of the menubar to open its respective dropdown
• Desktop
  • src, about.rtf, profile.jpg, and resume.pdf icons are all draggable
  • Double-click (or tap, if on mobile) about.rtf to open TextEdit (i.e. my about me)
  • Double-click (or tap, if on mobile) profile.jpg or resume.pdf to open Preview
• Preview
  • View my resume (i.e. resume.pdf)
  • View my profile picture (i.e. profile.jpg)
  • Previewed image can be rotated, zoomed into, and zoomed out of
• Trash
  • Clicking the trash icon in the dock opens an "Empty Trash" dialog
  • Clicking "Empty Trash" button will empty the trash (i.e. replace the trash icon with an empty trash icon and produce a sound effect)
• Dock
  • Clicking/opening any unopened app produces a bouncing effect
• Context Menu
  • Right-click anywhere (except menubar) to open context menu
  • Desktop only; not supported on mobile

Requirements

• npm
• Node.js

Installation

1. Enter directory where you want to clone repository (lynkos.github.io)
   • UNIX

     cd ~/path/to/directory

   • Windows

     cd C:\path\to\directory

2. Clone and enter repository

   git clone https://github.com/lynkos/lynkos.github.io.git && cd lynkos.github.io

3. Install dependencies

   npm install

Usage

Start Development Environment

npm run dev

Build Environment

npm run build

Deploy to Production

Note

Refer to gh-pages.yml for full workflow and package.json for build script (i.e. npm run build)

Initial Setup

1. Create prod branch

   git checkout -b prod

2. Push prod branch to remote (i.e. GitHub)

   git push -u origin prod

3. Generate SSH key

   ssh-keygen -t ed25519 -C "$(git config user.email)" -f gh-pages -N ""

4. Go to your repository's "Deploy keys" settings (i.e. https://github.com/YOUR_USERNAME/REPOSITORY_NAME/settings/keys)
5. Click "Add deploy key"
6. Enter ACTIONS_DEPLOY_KEY in "Title" field and paste contents of generated public key (i.e. gh-pages.pub) in "Key" field
7. Check "Allow write access"
8. Click "Add key"
9. Go to your repository's "Actions secrets and variables" settings (i.e. https://github.com/YOUR_USERNAME/REPOSITORY_NAME/settings/secrets/actions)
10. Click "New repository secret"
11. Enter ACTIONS_DEPLOY_KEY in "Name" field and paste contents of generated private key (i.e. gh-pages) in "Secret" field
12. Click "Add secret"
13. Go to your repository's "Pages" settings (i.e. https://github.com/YOUR_USERNAME/REPOSITORY_NAME/settings/pages)
14. Under "Build and deployment", select the following:
    • Source: "Deploy from a branch"
    • Branch: prod and / (root)
15. Click "Save"
16. Make sure that it now says "Your GitHub Pages site is currently being built from the prod branch" under "Branch"

Appendix

Custom Email Form

Note

Any message submitted via the Mail form will be sent to my email.

Follow this section to use your email with the Mail form.

1. Complete the steps in this GitHub repo's README doc
   • You will need to create a new Google Apps Script project and publish it as a web app
2. Use your own reCAPTCHA v2 widget and replace data-sitekey in index.html with your own sitekey
   • You can opt out of and remove reCAPTCHA v2 by making some changes to both index.html and email.js
   • Note that removing reCAPTCHA v2 widget WILL result in a daily influx of bot/spam messages (assuming you've successfully completed Step #1)
3. Modify the code within <form class="gform"> (inclusive) in index.html accordingly

Resources

• actions-gh-pages
• Deploy keys (SSH)
• Creating a branch within your repository
• GitHub Pages Action
• GitHub Actions: Deploy Pages
• Using custom workflows with GitHub Pages
• Configuring a publishing source for your GitHub Pages site
• Writing workflows
• Send Email from a Static HTML Form using Google Apps Mail!
• Deploy Nuxt on GitHub Pages
• Node Version Manager (NVM): GitHub Repository
• GitHub Actions: Cache
• Set up Sass in the best way
• Automatically render reCAPTCHA v2 widget
• Improve page performance lazy loading reCaptcha

Repository Structure

Note

main is used for development

main branch

.
├── .github/
│   ├── workflows/
│   │   └── gh-pages.yml
│   └── dependabot.yml
├── assets/
│   ├── audio/
│   │   └── empty-trash.mp3
│   ├── img/
│   │   ├── apps/
│   │   │   ├── calc.webp
│   │   │   ├── discord.webp
│   │   │   ├── github.svg
│   │   │   ├── iterm.webp
│   │   │   ├── launchpad.webp
│   │   │   ├── mail.webp
│   │   │   ├── notes.webp
│   │   │   ├── preview.webp
│   │   │   ├── safari.webp
│   │   │   ├── spotify.webp
│   │   │   ├── steam.webp
│   │   │   └── text-edit.webp
│   │   ├── favicons/
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon-96x96.png
│   │   │   ├── favicon.ico
│   │   │   ├── favicon.svg
│   │   │   ├── site.webmanifest
│   │   │   ├── web-app-manifest-192x192.png
│   │   │   └── web-app-manifest-512x512.png
│   │   ├── icons/
│   │   │   ├── angles-up-down.svg
│   │   │   ├── control-center.svg
│   │   │   └── terminal.svg
│   │   ├── misc/
│   │   │   ├── 404.webp
│   │   │   ├── demo.webp
│   │   │   ├── mpc.webp
│   │   │   ├── pipeline.webp
│   │   │   └── profile.webp
│   │   └── system/
│   │       ├── blue-folder.webp
│   │       ├── empty-trash.webp
│   │       ├── pdf.webp
│   │       ├── rtf-icon.webp
│   │       └── trash.webp
│   ├── stylesheets/
│   │   └── sass/
│   │       ├── _mixins.sass
│   │       ├── _variables.sass
│   │       ├── 404.sass
│   │       ├── browser.sass
│   │       ├── calculator.sass
│   │       ├── context-menu.sass
│   │       ├── dock.sass
│   │       ├── jquery-ui.sass
│   │       ├── launchpad.sass
│   │       ├── mail.sass
│   │       ├── menubar.sass
│   │       ├── notes.sass
│   │       ├── preflight.sass
│   │       ├── preview.sass
│   │       ├── style.sass
│   │       ├── terminal.sass
│   │       ├── text-edit.sass
│   │       └── trash.sass
│   └── resume.pdf
├── dist/
│   └── lib/
│       └── jquery-ui.js
├── src/
│   ├── components/
│   │   ├── 404.js
│   │   ├── calculator.js
│   │   ├── email.js
│   │   ├── notes.js
│   │   ├── preview.js
│   │   ├── text-edit.js
│   │   └── windows.js
│   └── utilities/
│       ├── context-menu.js
│       ├── particles.js
│       └── timestamp.js
├── .gitignore
├── 404.html
├── index.html
├── LICENSE.md
├── package-lock.json
├── package.json
└── README.md

Note

prod is used for production

prod branch

.
├── assets/
│   ├── audio/
│   │   └── empty-trash.mp3
│   ├── img/
│   │   ├── apps/
│   │   │   ├── calc.webp
│   │   │   ├── discord.webp
│   │   │   ├── github.svg
│   │   │   ├── iterm.webp
│   │   │   ├── launchpad.webp
│   │   │   ├── mail.webp
│   │   │   ├── notes.webp
│   │   │   ├── preview.webp
│   │   │   ├── safari.webp
│   │   │   ├── spotify.webp
│   │   │   ├── steam.webp
│   │   │   └── text-edit.webp
│   │   ├── favicons/
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon-96x96.png
│   │   │   ├── favicon.ico
│   │   │   ├── favicon.svg
│   │   │   ├── site.webmanifest
│   │   │   ├── web-app-manifest-192x192.png
│   │   │   └── web-app-manifest-512x512.png
│   │   ├── icons/
│   │   │   ├── angles-up-down.svg
│   │   │   ├── control-center.svg
│   │   │   └── terminal.svg
│   │   ├── misc/
│   │   │   ├── 404.webp
│   │   │   ├── demo.webp
│   │   │   ├── mpc.webp
│   │   │   └── profile.webp
│   │   └── system/
│   │       ├── blue-folder.webp
│   │       ├── empty-trash.webp
│   │       ├── pdf.webp
│   │       ├── rtf-icon.webp
│   │       └── trash.webp
│   ├── stylesheets/
│   │   └── css/
│   │       ├── 404.css
│   │       ├── browser.css
│   │       ├── calculator.css
│   │       ├── context-menu.css
│   │       ├── dock.css
│   │       ├── jquery-ui.css
│   │       ├── launchpad.css
│   │       ├── mail.css
│   │       ├── menubar.css
│   │       ├── notes.css
│   │       ├── preflight.css
│   │       ├── preview.css
│   │       ├── style.css
│   │       ├── terminal.css
│   │       ├── text-edit.css
│   │       └── trash.css
│   └── resume.pdf
├── dist/
│   ├── components/
│   │   ├── 404.js
│   │   ├── calculator.js
│   │   ├── email.js
│   │   ├── notes.js
│   │   ├── preview.js
│   │   ├── text-edit.js
│   │   └── windows.js
│   ├── lib/
│   │   └── jquery-ui.js
│   └── utilities/
│       ├── context-menu.js
│       ├── particles.js
│       └── timestamp.js
├── 404.html
├── CNAME
├── index.html
├── robots.txt
└── sitemap.xml