This website is heavily inspired from the game Arknights.

In particular, the Lonetrail story chapter. I REALLY liked it.

From this project, I learned a lot about UI/UX. Everything on this page was designed to be simple and straight-forward, even these blog posts.

I learned that great design is invisible. If colors and animations hinder the user, then they should be revised.

• I wanted to use specific colors I got from Arknights, but the color contrast would fail to meet the WCAG AAA web accessibility guideline.
• I wanted to add some intro animations, but that would force the user to wait each time and hinder their experience.

This entire website is statically generated. I used some vanilla JavaScript to handle interactions (dark mode, music player, carousels). This site also supports a minimum viewport width of 280 px.

For one of my most impactful projects, I needed to migrate a legacy WAMP app over to Laravel.

It was pretty difficult as I needed to:

• Support both projects in production
• Sync sessions across the projects
• Deal with 2 “Users” database tables
• Migrate from Apache to Windows Server IIS
• Add LDAP-binding login with Active Directory
• Resolve Laravel’s database model limitations
• Create a CSS design system for both projects

From this project, I got a lot of practice in:

• Understanding legacy PHP and JavaScript code
• Redesigning pages to be more clear, intuitive, and responsive
• Rewriting frontend and backend logic to be simpler and modular
• Creating flow chart diagrams to plan logic before implementation
• Discussing plans with a client and following up with them

I find that being open to new things helped me in unique ways:

• Reframing sewing practice as an investment rather than a waste of fabric helped me practice more
• I discovered Anki by chance one day, and it became helpful years later when studying for the ACT
• Asking friends for feedback on my web designs or Discord bots helped me iterate features
• Understanding different perspectives helped me decide to specialize in webdev first
• Connecting life experience helps me make mnemonics when studying Chinese

I also have a little workflow for learning new topics:

1. ChatGPT as a primer for background information
2. Quick guides (documentation, websites)
3. Multiple Youtube videos (different perspectives!)
4. Applying what I’ve learned so far
5. ChatGPT as a quick helper
6. Longer guides for more complex topics

(I thought it would be cool to show off this blog CSS)

H1

H2

H3

H4

H5

H6

This is a paragraph.

Italic text using asterisks Italic text using underscores

Bold text using asterisks Bold text using underscores

Bold and italic text using asterisks Bold and italic text using underscores

Blockquote

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

Column 1	Column 2
Row 1 Col 1	Row 1 Col 2
Row 2 Col 1	Row 2 Col 2

Strikethrough

Checklist:

• Item 1: Checked
• Item 2: Unchecked

Unorganized list:

• Item 1
  • Nested item 1
    • Nested x2 item
• Item 2

• Item 3

• Item 4

Organized list:

1. First item
2. Second item
   1. Subitem
   2. Subitem
3. Third item

Inline code

// PasswordResetLinkController.php
<?php
namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Password;
use Inertia\Inertia;
use Inertia\Response;

class PasswordResetLinkController extends Controller
{
    /**
     * Show the password reset link request page.
     */
    public function create(Request $request): Response
    {
        return Inertia::render('auth/forgot-password', [
            'status' => $request->session()->get('status'),
        ]);
    }

    /**
     * Handle an incoming password reset link request.
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'email' => 'required|email',
        ]);

        Password::sendResetLink(
            $request->only('email')
        );

        return back()->with('status', __('A reset link will be sent if the account exists.'));
    }
}

Parent Dir/
├── Child Dir 1/
├── Child Dir 2/
├── Child Dir 3/
└── Child Dir 4/

Website link