lynkos.github.io

Personal website inspired by macOS Sequoia and macOS Sonoma.

Home Page

404 Error Page

Features

Important

Mail app (aka email functionality aka contact form) is currently disabled and will be re-enabled after I troubleshoot, debug, + fix the server-side script

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
• Cursors
  • Default: Default cursor
  • Pointer: Hover over links
  • Text: Hover over input fields
  • Crosshair: Hover over preview image

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. Only clone main branch (to avoid cloning unneeded branches) from repository

   git clone --single-branch -b main https://github.com/lynkos/lynkos.github.io.git

3. Enter repository

   cd lynkos.github.io

4. 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

All mail-related files have been removed from this branch (see Line #99 in gh-pages.yml) till the "Mail" app (aka contact form) is fixed

prod branch

.
├── assets/
│   ├── audio/
│   │   └── empty-trash.mp3
│   ├── img/
│   │   ├── apps/
│   │   │   ├── calc.webp
│   │   │   ├── discord.webp
│   │   │   ├── github.svg
│   │   │   ├── iterm.webp
│   │   │   ├── launchpad.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
│   │       ├── 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
│   │   ├── 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