Brandon Walowitz | Art & Science

Personal portfolio site. A single, self-contained index.html with a live WebGL shader background, a custom-GLSL morphing 3D object, a cinematic HUD overlay, and a type system built around the "Art & Science" idea (Fraunces serif + JetBrains Mono).

No build step. No dependencies to install. Three.js loads from a CDN at runtime.

Just open index.html in any modern browser. That's it.

If your browser blocks the CDN font/script over file://, run a tiny local server:

# Python 3
python3 -m http.server 8000
# then visit http://localhost:8000

1. On GitHub, click New repository. Name it (e.g. art-and-science). Create it.
2. On the empty repo page, click uploading an existing file.
3. Drag in index.html, README.md, and .nojekyll. Commit.
4. Go to Settings → Pages. Under Build and deployment, set Source: Deploy from a branch, Branch: main / root. Save.
5. Wait ~1 minute. Your site is live at https://YOUR-USERNAME.github.io/art-and-science/.

# from inside this folder
git remote add origin https://github.com/YOUR-USERNAME/art-and-science.git
git branch -M main
git push -u origin main

Then enable Pages as in step 4 above.

The initial commit author is a placeholder. To use your own identity: git config user.name "Your Name" && git config user.email "you@email.com" then git commit --amend --reset-author --no-edit before pushing.

In Settings → Pages → Custom domain, add your domain and follow the DNS steps. GitHub creates a CNAME file for you.

Everything lives in index.html.

The gallery under the client scroll and every individual project page are driven by one array called PROJECTS in projects-data.js.

To add or edit a project: copy one { ... } block in projects-data.js and change its fields. Keep each slug unique, because it becomes the page filename (your-slug.html). Then regenerate the standalone pages:

node generate-project-pages.mjs

project.html is the reusable source template. The generator creates one project HTML file for every entry, while the homepage and project pages share the same external project data.

For images, place files in images/, commit them, and reference them as cover:"images/project/cover.jpg" or shots:[{image:"images/project/01.jpg"}].

The restored archive projects intentionally include more work than the final portfolio may need. Remove an object from projects-data.js and regenerate when you decide to cut a project.

• Background field: bgFrag GLSL: palette + domain-warp amounts.
• 3D object: blobVert controls displacement (disp), blobFrag controls the iridescent fresnel coloring. Mesh detail auto-lowers on mobile in initGL().

• Vanilla HTML/CSS/JS, no framework
• Three.js r128 (CDN) for WebGL + custom shaders
• Graceful fallback to a gradient background if WebGL is unavailable
• Respects prefers-reduced-motion; pauses rendering when the tab is hidden

Built in-house. © Brandon Walowitz, Art & Science.