Alan Wang's Personal Site

👉 alankrantas.github.io

---

Overview

• A single page application (SPA) with working responsive web design (RWD).
• Built with Svelte (upgraded to Svelte 5 syntax), SvelteKit and Bootstrap.
• Deployed to Github Pages and run Dependabot PR test build using Github Action workflows.

Layout and Components

The site switches between two layouts - "main" and "view".

Main Mode

Index page with large navigation cards.

flowchart TD
  subgraph n0 ["Page (Main Mode)"]
    direction TB
    n1[NameTitle];
    subgraph n2 [Columns];
        subgraph n3 [Column 1];
            direction TB
            n4[ViewItemCard 1];
            n5[ViewItemCard 3];
            n6[...];
            n4-.-n5-.-n6;
        end
        subgraph n7 [Column 2];
            direction TB
            n8[ViewItemCard 2];
            n9[ViewItemCard 4];
            n10[...];
            n8-.-n9-.-n10;
        end
    end
    n11[Footer];
    n1-.-n3;
    n1-.-n7;
    n3-.-n11;
    n7-.-n11;
  end

Loading

By clicking the button on a view card, the app will switch to view mode that shows the corresponding content.

View Mode

Detail page with side navigation bar and content.

flowchart TD
  subgraph n0 ["Page (View Mode)"]
    direction TB
    subgraph n1 [Columns]
        direction LR
        subgraph n2 [Column 1]
            direction TB
            n3[NameTitle];
            subgraph n4 [Nav Btns]
                direction TB
                n5[ViewItemNavBtn 1];
                n6[ViewItemNavBtn 2];
                n7[...];
                n5-.-n6-.-n7;
            end
            n3-.-n4;
        end
        subgraph n8 [Column 2]
            direction TB
            n9[ViewItemHead];
            n10[ViewItemContent];
            n9-.-n10;
        end
    end
    n11[Footer];
    n2-.-n11;
    n8-.-n11;
  end

Loading

The viewer can click the nav bar buttons to switch the view content, or go back to the main mode.

The index page also accepts a view URL parameter to switch to a specific view directly, which makes it useful to be linked elsewhere.

Responsive Layouts

Each mode may have multiple layout and style adjustments based on different inner widths (1200, 992, 768 and 576 px), using one or multiple following options:

1. Svelte template syntax
2. Pure CSS
3. Bootstrap classes

Both main and view mode will be squashed into a single column when the screen width becomes smaller than 992 px.

Some reusable components, like Image and Showcase, has properties to control the component responsive behavior under different inner widths.

---

Local Development

Prerequisites: Node.js, Git and Docker. This repo can be opened in DevContainer/CodeSpace as well.

Install Dependencies

Install Yarn:

npm i -g yarn@latest

Windows users would need to grant permission for Yarn in PowerShell (as Administrator) with Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted.

Then

git clone https://github.com/alankrantas/alankrantas.github.io.git
cd alankrantas.github.io
yarn

List of Actions

Command	Description
yarn upgrade-all	Upgrade all NPM dependencies.
yarn start	Start a local dev server and open http://localhost:3000.
yarn check	Sync SvelteKit files. Run after installation and before build.
yarn lint	Lint files.
yarn format	Format and prettify files.
yarn build	Build a local production at ./build.
yarn serve	Serve the local production and open http://localhost:8080.
yarn pull	Pull commit histories from main branch.
yarn push	Push changes to main branch.
yarn commit	yarn pull + yarn format + yarn commit
yarn docker-build	Build a Docker container image
yarn docker-run	Run the Docker container and open http://localhost:8080.
yarn docker-stop	Stop the Docker container.
yarn docker	yarn docker-build + yarn docker-run