Skip to content

Commit 3e5757d

Browse files
zesamerizesameri
committed
Add alhambra.html and associated styles/scripts for new pattern visualization
- Introduced a new HTML file, alhambra.html, featuring a canvas-based visualization inspired by the Alhambra. - Added specific CSS styles in alhambra.css to manage the layout and appearance of the canvas elements. - Updated index.html to include a link to the new alhambra page. - Implemented JavaScript functionality to handle pattern switching between triangle and grid canvases, enhancing user interaction.
1 parent 78471e7 commit 3e5757d

File tree

9 files changed

+170
-72
lines changed

9 files changed

+170
-72
lines changed

‎alhambra.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72294820-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
gtag('config', 'UA-72294820-1');
11+
</script>
12+
<title>alhambra - zesameri</title>
13+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">
15+
<meta name="author" content="kvitka">
16+
<meta name="theme-color" content="#222">
17+
<!-- Styles -->
18+
<link href="./css/main.css" rel="stylesheet">
19+
<link href="./css/crumple.css" rel="stylesheet">
20+
<link href="./css/font.css" rel="stylesheet">
21+
<link href="./css/mobile.css" rel="stylesheet">
22+
<link href="./css/alhambra.css" rel="stylesheet">
23+
<!-- Webpage Icon -->
24+
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
25+
<!-- Fonts -->
26+
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
27+
</head>
28+
<body>
29+
<canvas id="triangleCanvas"></canvas>
30+
<canvas id="gridCanvas"></canvas>
31+
32+
<div class="content-wrapper">
33+
<section class="hero">
34+
<div class="top-bar">
35+
<h1 class="header">
36+
<a class="simple-link" href="./index.html"> zesameri </a>
37+
<a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
38+
</h1>
39+
</div>
40+
<div class="bio">
41+
<p>
42+
I visited the Nasrid Palaces of the Alhambra this past summer.
43+
After staying up late to secure an early ticket,
44+
I woke before dawn to climb to the estate’s entrance.
45+
It felt sacred, like a reaching to Allah.
46+
As a child, I wanted to become a mosaicist,
47+
shaping glass squares into flowing forms.
48+
I rekindled that wonder through reconstructing these patterns.
49+
Now I have begun to grasp the centuries of geometry behind them.
50+
My digital version lacks character, but deconstructing these patterns,
51+
I start to feel their logic and devotion.
52+
53+
</p>
54+
</div>
55+
</section>
56+
<footer class="footer" id="footer">
57+
<a href="./index.html">home</a>
58+
<a data-pattern="triangle">triangles</a>
59+
<a data-pattern="grid">grid</a>
60+
</footer>
61+
</div>
62+
63+
<div class="crumple" aria-hidden="">
64+
<div class="crumple__rect"></div>
65+
<div class="shapes-container">
66+
<div class="circle-one"></div>
67+
<div class="circle-two"></div>
68+
<div class="circle-three"></div>
69+
<div class="circle-four"></div>
70+
</div>
71+
</div>
72+
73+
<script>
74+
// Pattern controller for alhambra page
75+
const footerLinks = document.querySelectorAll('.footer a[data-pattern]');
76+
const triangleCanvas = document.getElementById('triangleCanvas');
77+
const gridCanvas = document.getElementById('gridCanvas');
78+
79+
// Load triangle pattern
80+
const triangleScript = document.createElement('script');
81+
triangleScript.src = './tiles/js/triangle.js';
82+
83+
// Load grid pattern
84+
const gridScript = document.createElement('script');
85+
gridScript.src = './tiles/js/grid.js';
86+
87+
document.body.appendChild(triangleScript);
88+
document.body.appendChild(gridScript);
89+
90+
// Handle pattern switching
91+
footerLinks.forEach(link => {
92+
link.addEventListener('mouseenter', (e) => {
93+
const pattern = e.target.dataset.pattern;
94+
95+
if (pattern === 'triangle') {
96+
triangleCanvas.classList.add('visible');
97+
} else if (pattern === 'grid') {
98+
gridCanvas.classList.add('visible');
99+
}
100+
101+
document.querySelector('.bio').style.display = 'none';
102+
});
103+
104+
link.addEventListener('mouseleave', () => {
105+
triangleCanvas.classList.remove('visible');
106+
gridCanvas.classList.remove('visible');
107+
document.querySelector('.bio').style.display = 'block';
108+
});
109+
});
110+
</script>
111+
</body>
112+
</html>

‎css/alhambra.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* Alhambra page specific styles */
2+
3+
#triangleCanvas {
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
width: 100vw;
8+
height: 100vh;
9+
z-index: 2;
10+
opacity: 0;
11+
transition: opacity 0.8s ease;
12+
pointer-events: none;
13+
}
14+
15+
#gridCanvas {
16+
position: fixed;
17+
z-index: 2;
18+
opacity: 0;
19+
transition: opacity 0.8s ease;
20+
pointer-events: none;
21+
top: 50%;
22+
left: 50%;
23+
transform: translate(-50%, -50%) rotate(-45deg);
24+
}
25+
26+
#triangleCanvas.visible, #gridCanvas.visible {
27+
opacity: 1;
28+
}
29+
30+
31+
.bio {
32+
transition: all 0.3s ease;
33+
}
34+

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ <h1 class="header">
5959
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">muze</a>
6060
<a class="footer__link--linkedin" href="https://www.linkedin.com/in/merhoo/" target="_blank" rel="noopener noreferrer">work</a>
6161
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">trash</a>
62+
<a class="footer__link--alhambra" href="./alhambra.html">alhambra</a>
6263
<a class="footer__link--writings" href="./writings.html">writing</a>
6364
</footer>
6465
</div>

‎tiles/css/grid.css‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎tiles/css/triangle.css‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎tiles/js/grid.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

2-
const canvas = document.getElementById('canvas');
3-
const ctx = canvas.getContext('2d');
2+
const gridCanvasEl = document.getElementById('gridCanvas');
3+
const gridCtx = gridCanvasEl.getContext('2d');
44

55
const CONFIG = {
66
squareSize: 50,
@@ -14,14 +14,14 @@ const CONFIG = {
1414

1515
function resizeCanvas() {
1616
const diagonal = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2);
17-
canvas.width = diagonal;
18-
canvas.height = diagonal;
17+
gridCanvasEl.width = diagonal;
18+
gridCanvasEl.height = diagonal;
1919
}
2020

2121
function calculateGridDimensions() {
2222
return {
23-
cols: Math.ceil(canvas.width / CONFIG.squareSize) + 1,
24-
rows: Math.ceil(canvas.height / CONFIG.squareSize) + 1
23+
cols: Math.ceil(gridCanvasEl.width / CONFIG.squareSize) + 1,
24+
rows: Math.ceil(gridCanvasEl.height / CONFIG.squareSize) + 1
2525
};
2626
}
2727

@@ -74,14 +74,14 @@ function determineSquareColor(row, col) {
7474
}
7575

7676
function fillSquare(x, y, color) {
77-
ctx.fillStyle = color;
78-
ctx.fillRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
77+
gridCtx.fillStyle = color;
78+
gridCtx.fillRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
7979
}
8080

8181
function strokeSquareBorder(x, y) {
82-
ctx.strokeStyle = CONFIG.borderColor;
83-
ctx.lineWidth = CONFIG.borderWidth;
84-
ctx.strokeRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
82+
gridCtx.strokeStyle = CONFIG.borderColor;
83+
gridCtx.lineWidth = CONFIG.borderWidth;
84+
gridCtx.strokeRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
8585
}
8686

8787
function getAllColors() {
@@ -104,8 +104,8 @@ function drawEightPointedStar(centerX, centerY, outerRadius, innerRadius, color)
104104
const points = 8;
105105
const totalPoints = points * 2;
106106

107-
ctx.fillStyle = color;
108-
ctx.beginPath();
107+
gridCtx.fillStyle = color;
108+
gridCtx.beginPath();
109109

110110
for (let i = 0; i < totalPoints; i++) {
111111
const angle = (i * Math.PI) / points - Math.PI / 2;
@@ -114,14 +114,14 @@ function drawEightPointedStar(centerX, centerY, outerRadius, innerRadius, color)
114114
const y = centerY + radius * Math.sin(angle);
115115

116116
if (i === 0) {
117-
ctx.moveTo(x, y);
117+
gridCtx.moveTo(x, y);
118118
} else {
119-
ctx.lineTo(x, y);
119+
gridCtx.lineTo(x, y);
120120
}
121121
}
122122

123-
ctx.closePath();
124-
ctx.fill();
123+
gridCtx.closePath();
124+
gridCtx.fill();
125125
}
126126

127127
function renderSquare(row, col) {
@@ -170,10 +170,11 @@ function initializeCanvas() {
170170
renderGrid();
171171
}
172172

173-
function handleResize() {
173+
function handleGridResize() {
174174
resizeCanvas();
175175
renderGrid();
176176
}
177177

178178
initializeCanvas();
179-
window.addEventListener('resize', handleResize);
179+
window.addEventListener('resize', handleGridResize);
180+

‎tiles/js/triangle.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
const canvas = document.getElementById('canvas');
2+
const canvas = document.getElementById('triangleCanvas');
33
const ctx = canvas.getContext('2d');
44

55
canvas.width = window.innerWidth;
@@ -221,4 +221,5 @@ function handleResize() {
221221
}
222222

223223
drawCompletePattern();
224-
window.addEventListener('resize', handleResize);
224+
window.addEventListener('resize', handleResize);
225+

‎tiles/tile1.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎tiles/tile2.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)