Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@stanieldev
stanieldev committed May 15, 2024
1 parent f287659 commit c50c957
Show file tree
Hide file tree
Showing 19 changed files with 976 additions and 0 deletions.
83 changes: 83 additions & 0 deletions _tiles/tiles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
:root {
--tile-default-color: slategray;
--tile-size: 200px;
--tile-margin: 1rem;
--tile-bevel: 20px;
--tile-shadow: 8px;

--tile-scale-on-hover: 1.1;
--tile-scale-time: 250ms;

--tile-header-delay: 100ms;
--tile-header-time: 1000ms;
--tile-text-delay: 350ms;
--tile-text-time: 1000ms;
}

.grid > .blanktile {
position: relative;
width: var(--tile-size);
height: calc(var(--tile-size) + var(--tile-shadow));
margin: var(--tile-margin);
border-radius: var(--tile-bevel);
}

.grid > .tile {
position: relative;
background: var(--tile-default-color);
width: var(--tile-size);
height: calc(var(--tile-size) + var(--tile-shadow));
margin: var(--tile-margin);
border-radius: var(--tile-bevel);
transition: all var(--tile-scale-time);
}
.grid > .tile:hover {
transform: scale(var(--tile-scale-on-hover));
}

.grid > .tile > img {
position: absolute;
object-fit: cover;
width: var(--tile-size);
height: var(--tile-size);
border-radius: var(--tile-bevel);
transition: all var(--tile-scale-time);
}
.grid > .tile:hover > img {
filter: brightness(50%)
}

.grid > .tile > .overlay {
position: absolute;
margin: var(--tile-bevel);
}

.grid > .tile > .overlay> h1 {
font-size: large;
color: white;
margin-top: 0%;
opacity: 0;
transition: 0s;
transform: translate(calc(-0.75 * var(--tile-bevel)), 0);
}
.grid > .tile:hover > .overlay> h1 {
opacity: 1;
transition: var(--tile-header-time);
transition-delay: var(--tile-header-delay);
transform: translate(0px, 0);
}


.grid > .tile > .overlay> p {
font-size: small;
color: white;
opacity: 0;
transition: 0s;
transform: translate(calc(-0.75 * var(--tile-bevel)), 0);
}
.grid > .tile:hover > .overlay> p {
opacity: 1;
transition: var(--tile-text-time);
transition-delay: var(--tile-text-delay);
transform: translate(0px, 0);
}
149 changes: 149 additions & 0 deletions _tiles/tiles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
// Generates a grid of tiles from a JSON file
function generateTilesGrid(div_id, tiles_data_url, style) {
const tilegrid = document.querySelector("#" + div_id);

fetch(tiles_data_url)
.then((response) => response.json())
.then((data) => createGrid(tilegrid, data, style));
}



// Create the grid
function createGrid(tilegrid, data, style) {







// Switch case chooser for the amount of tiles
switch(data.length){
case 1:
createRow(tilegrid, data);
break;
case 2:
createRow(tilegrid, data);
break;
case 3:
createRow(tilegrid, data);
break;
case 4:
createRow(tilegrid, data);
break;
case 5:
createRow(tilegrid, data.slice(0, 3));
createRow(tilegrid, data.slice(3, 5));
break;
case 6:
createRow(tilegrid, data.slice(0, 3));
createRow(tilegrid, data.slice(3, 6));
break;
case 7:
createRow(tilegrid, data.slice(0, 4));
createRow(tilegrid, data.slice(4, 7));
break;
case 8:
createRow(tilegrid, data.slice(0, 4));
createRow(tilegrid, data.slice(4, 8));
break;
case 9:
createRow(tilegrid, data.slice(0, 3));
createRow(tilegrid, data.slice(3, 6));
createRow(tilegrid, data.slice(6, 9));
break;
case 10:
createRow(tilegrid, data.slice(0, 3));
createRow(tilegrid, data.slice(3, 7));
createRow(tilegrid, data.slice(7, 10));
break;
case 11:
createRow(tilegrid, data.slice(0, 4));
createRow(tilegrid, data.slice(4, 7));
createRow(tilegrid, data.slice(7, 11));
break;
}
if (data.length >= 12) {
blockMoreThan12Tiles(tilegrid, data);
}
}

function blockMoreThan12Tiles(tilegrid, data) {
// for every 4 tiles, create a line with those 4 tiles
for(var i = 0; i < data.length; i += 4) {
var segment = data.slice(i, i + 4)
if (segment.length == 4) {
createRow(tilegrid, segment);
}
else if (segment.length == 3) {
createRow(tilegrid, [...segment, null]);
}
else if (segment.length == 2) {
createRow(tilegrid, [...segment, null, null]);
}
else if (segment.length == 1) {
createRow(tilegrid, [...segment, null, null, null]);
}
}
}

// add tiles to a line
function createRow(tilegrid, data) {

// create line element
var row = document.createElement('div');
row.style.display = 'flex';
row.style.flexFlow = 'row wrap';
row.style.justifyContent = 'center';
row.classList.add('grid') // REMOVE THIS

// for each item of data, create a tile and add it to the row
for(var i = 0; i < data.length; i++) {
var tile = createTile(data[i]);
row.appendChild(tile);
}

// add row to the grid
tilegrid.appendChild(row)
}

// a function that takes in a dictionary and returns a tile
function createTile(data) {

// if tile is null, make a blank tile and return it
if(data == null) {
var tile = document.createElement('div');
tile.classList.add('blanktile');
return tile;
}

// create a new image element and add it to the tile
var image = document.createElement('img');
image.setAttribute('src', data.image);
image.setAttribute('alt', data["image-alt"]);

// create a new h1 element and add it to the overlay
var header = document.createElement('h1');
header.textContent = data.header;

// create a new p element and add it to the overlay
var description = document.createElement('p');
description.textContent = data.description;

// create a new div element and add it to the tile
var overlay = document.createElement('div');
overlay.classList.add('overlay');
overlay.appendChild(header);
overlay.appendChild(description);

// create a new element for each entry and add it to the grid
var tile = document.createElement('a');
tile.classList.add('tile');
tile.setAttribute('href', data.link);
tile.appendChild(image);
tile.appendChild(overlay);

// return the tile
return tile;
}
76 changes: 76 additions & 0 deletions animated.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>

<head>
<link href="animated/_card.css" rel="stylesheet" type="text/css">
<link href="animated/cards.css" rel="stylesheet" type="text/css">
<script src="animated/animated.js" type="module" defer></script>

<style>
body {
background-color: #2c3e50;
overflow: hidden; /* Hide scrollbars */
}
</style>
</head>

<body>
<a class="card" id="card-ul" x0="-500px" y0="225px" height="350px" width="250px" clickable="true">
<img src="animated/assets/linkedin.png" alt="My profile picture" style="border-radius: 50%;">
<h1>Linked In</h1>
<hr>
<p>Professional</p>
</a>
<a class="card" id="card-ur" x0="500px" y0="225px" height="350px" width="250px" clickable="true">
<img src="animated/assets/github.png" alt="My profile picture" style="border-radius: 50%;">
<h1>GitHub</h1>
<hr>
<p>Programmer</p>
</a>
<a class="card" id="card-bl" x0="-500px" y0="-225px" height="350px" width="250px" clickable="true">
<img src="animated/assets/guitar.jpg" alt="My profile picture" style="border-radius: 50%;">
<h1>Guitar <br> Tabs</h1>
<hr>
<p>Musician</p>
</a>
<a class="card" id="card-br" x0="500px" y0="-225px" height="350px" width="250px" clickable="true">
<img src="animated/assets/resume.jpg" alt="My profile picture" style="border-radius: 50%;">
<h1>Resume</h1>
<hr>
<p>Academic</p>
</a>
<a class="card" id="card-ul2" x0="-175px" y0="450px" height="350px" width="250px" clickable="true">
<img src="animated/assets/linkedin.png" alt="My profile picture" style="border-radius: 50%;">
<h1>Linked In</h1>
<hr>
<p>Professional</p>
</a>
<a class="card" id="card-ur2" x0="175px" y0="450px" height="350px" width="250px" clickable="true">
<img src="animated/assets/github.png" alt="My profile picture" style="border-radius: 50%;">
<h1>GitHub</h1>
<hr>
<p>Programmer</p>
</a>
<a class="card" id="card-bl2" x0="-175px" y0="-450px" height="350px" width="250px" clickable="true">
<img src="animated/assets/guitar.jpg" alt="My profile picture" style="border-radius: 50%;">
<h1>Guitar <br> Tabs</h1>
<hr>
<p>Musician</p>
</a>
<a class="card" id="card-br2" x0="175px" y0="-450px" height="350px" width="250px" clickable="true">
<img src="animated/assets/resume.jpg" alt="My profile picture" style="border-radius: 50%;">
<h1>Resume</h1>
<hr>
<p>Academic</p>
</a>
<a class="card" id="card-cr" x0="0px" y0="0px" height="350px" width="250px"></a>
<a class="card" id="shadow" x0="0px" y0="0px" height="350px" width="250px"></a>
<a class="card" id="card-cl" x0="0px" y0="0px" height="350px" width="250px">
<img src="animated/assets/tech.png" alt="My profile picture" style="border-radius: 50%;" >
<h1>Stanley <br> Goodwin</h1>
<hr>
<p>Physicist</p>
</a>
</body>

</html>
72 changes: 72 additions & 0 deletions animated/HTMLAnimated.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
// Create a new objected called MoveableHTMLElement that extends the HTMLElement class
// The constructor takes in an HTML element as a parameter



function calc(value: string) { return `calc(${value})`; }
function sCalc(value: string) { return value.substring(5, value.length - 1); } // Strip calc function


export enum Origin {
Absolute,
Relative,
Self,
Centered,
Default
}

export class MoveableHTMLElement extends HTMLElement {

// The constructor takes in an HTML element as a parameter
constructor(element: HTMLElement) {
super();
this.style.left = element.getAttribute("x0")!;
this.style.top = element.getAttribute("y0")!;
this.style.width = element.getAttribute("width")!;
this.style.height = element.getAttribute("height")!;
}

// Getters and setters for the default position
get x0(): string { return this.getAttribute("x0")!; }
get y0(): string { return this.getAttribute("y0")!; }
set x0(value: string) { this.setAttribute("x0", value); }
set y0(value: string) { this.setAttribute("y0", value); }

// Getters and setters for the current position
get x() { return sCalc(this.style.left); }
get y() { return sCalc(this.style.top); }
set x(value: string) { this.style.left = value; }
set y(value: string) { this.style.top = value; }

// Save the current position as the default position
savePosition() { this.x0 = this.x; this.y0 = this.y; }

// Select the origin for movement based on the origin parameter
private selectOrigin(origin: Origin, object: MoveableHTMLElement | null = null) {
switch (origin) {
case Origin.Absolute:
return { x: "0px", y: "0px" };
case Origin.Self:
return { x: this.x, y: this.y };
case Origin.Centered:
return { x: `50% - ${this.style.width}/2`, y: `50% - ${this.style.height}/2` };
case Origin.Default:
return { x: this.x0, y: this.y0 };
case Origin.Relative:
if (object == null) throw new Error("Relative origin requires a second object");
return { x: object.x, y: object.y };
}
}

// Move the card to a new position
move(dx: string, dy: string, transition: string, origin: Origin, object: MoveableHTMLElement | null = null) {

// Select the origin for movement
let _origin = this.selectOrigin(origin, object);

// Move the object
this.x = calc(`${_origin.x} + ${dx}`);
this.y = calc(`${_origin.y} + (${dy}) * (-1)`);
this.style.transition = transition;
}
}
Loading

0 comments on commit c50c957

Please sign in to comment.