Skip to content

Commit

Permalink
Added vite as dev server.
Browse files Browse the repository at this point in the history 
Added shiny book reveal experiment
  • Loading branch information
@robole
robole committed Nov 21, 2021
1 parent c223021 commit 32f32e1
Show file tree
Hide file tree
Showing 35 changed files with 2,704 additions and 4,178 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
99 changes: 99 additions & 0 deletions black-to-white-disks/original/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Black to White Disks by Bridget Riley</title>
<link rel="stylesheet" href="original.css" />
</head>

<body>
<div class="canvas">
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
</div>
<div class="label">
<h1 class="title">Black to White Disks</h1>
<p class="artist">Bridget Riley</p>
</div>
</body>
</html>
101 changes: 0 additions & 101 deletions black-to-white-disks/original/original.html
View file

This file was deleted.

7 changes: 6 additions & 1 deletion black-to-white-disks/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,13 @@ The original is recreated faithfully in the 'original' folder.

![screenshot](img/screenshot.png)

To see it in action:
- You can run the local dev server with `npm run dev`, and find it at <http://localhost:3000/black-to-white-disks/original/index.html>.

## Remix

![animation](img/screenshot.gif)

Check out the [live demo](https://codepen.io/robjoeol/pen/rNLqZPV).
To see it in action:
- You can check out the [codepen](https://codepen.io/robjoeol/pen/rNLqZPV), or
- You can run the local dev server with `npm run dev`, and find it at <http://localhost:3000/black-to-white-disks/remix/index.html>.
101 changes: 101 additions & 0 deletions black-to-white-disks/remix/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Black to White Disks by Bridget Riley</title>
<link rel="stylesheet" href="remix.css" />
</head>

<body>
<div class="canvas">
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
<div class="disk"></div>
</div>
<div class="label">
<h1 class="title">Black to White Disks</h1>
<p class="artist">Bridget Riley</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
0 black-to-white-disks/remix/remix.js → black-to-white-disks/remix/main.js
View file
File renamed without changes.
Loading

0 comments on commit 32f32e1

Please sign in to comment.