Add files via upload

peadaruncanny · Nov 8, 2024 · 4425aae · 4425aae
1 parent 1657e4c
commit 4425aae
Show file tree

Hide file tree

Showing 21 changed files with 523 additions and 9 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pedro Latas: composer, performer, creative coder</title>
+    <link rel="stylesheet" href="aboutStyles.css">
+    <link rel="icon" href="resources/favicon.ico">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:[email protected]&display=swap" rel="stylesheet">
+</head>
+
+<header>
+    <div><a class="hoverLink" href="about.html">About</a></div>
+    <div><a class="hoverLink" href="disambiguation.html">Works</a></div>
+    <div><a class="hoverLink" href="agenda.html">Agenda</a></div>
+    <div><a class="hoverLink" href="releases.html">Releases</a></div>
+</header>
+
+<body>
+    <p>Pedro Latas (They / He) is a composer, multimedia artist, performer and creative coder from Portugal, currently based in The Hague, The Netherlands.</p>
+
+    <p>Their work draws inspiration from their own queer identity as well as other queer experiences in a world that seeks to suppress non-normative bodies and existences.</p>
+
+    <p>Driven by the struggle for body autonomy and integrity, Pedro researches the deeply rooted interconnections between digital media and how it reframes the inherent entanglement between human bodies and their environments. Their work focuses then mostly on the production of computer-assisted performances and live (interactive or generated) electronics.</p>
+
+    <p>From ensemble works to solo live-electronics performance, Pedro wishes to engage in radical acts of appreciation of - and care for - the human body, finding beauty and power in all the limitations it entails. How do we, that inhabit a "singular" body that contains multides of identity layers which crossover and inform one another, are able to express and empower ourselves within the digital environment? At the same time, we are confronted with the fact that as we engage with one another, an intangible "something" is shared that we carry with us at all times, and vice-versa. In a way, a piece of ourselves is traded with as we entangle.</p>
+
+    <div class="bulletPoints">
+        <div class="hoverLink"><a href="">Instagram</a></div>
+        <div class="hoverLink"><a href="">Soundcloud</a></div>
+        <div class="hoverLink"><a href="">Youtube</a></div>
+    </div>
+
+</body>
+
+</html>
diff --git a/aboutStyles.css b/aboutStyles.css
@@ -0,0 +1,57 @@
+/* Header nav bar for all pages */
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100vw;
+    background-color: rgba(0, 0, 0, 0.5);
+    margin-left: -20px; /* Adjust for body margin */
+
+}
+
+header a {
+    color:rgba(190, 87, 41, 1);
+    transition: ease-in 0.2s;
+
+}
+
+.hoverLink:hover {
+    color: rgba(190, 87, 41, 0.5);
+    transition: ease-in 0.2s;
+}
+
+/* Bio text */
+
+body {
+    background-image: url("resources/IMG_3011.jpg");
+    background-size: cover;
+    background-position: 0px -100px;
+    width: 55%;
+    text-align: justify;
+
+    margin-left: 20px;
+
+    color: rgba(190, 87, 41, 1);
+
+    font-family: sand;
+}
+
+p {
+    text-indent: 45px;
+}
+
+/* Social links */
+
+.bulletPoints {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 60px;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: ease-in 0.2s;
+}
diff --git a/composition.html b/composition.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pedro Latas: composer, performer, creative coder</title>
+    <link rel="stylesheet" href="compositionStyles.css">
+    <link rel="icon" href="resources/favicon.ico">
+</head>
+
+<header>
+    <div><a class="hoverLink" href="about.html">About</a></div>
+    <div><a class="hoverLink" href="disambiguation.html">Works</a></div>
+    <div><a class="hoverLink" href="agenda.html">Agenda</a></div>
+    <div><a class="hoverLink" href="releases.html">Releases</a></div>
+</header>
+
+<body>
+
+<div id="workList">
+    <a href=""><div class="workSquare square13">The Banshee heralds the passing of<br>the family of Thomás [2024]</div></a>
+    <a href=""><div class="workSquare square12">Latent Space / Body: throat [2024]</div></a>
+    <a href=""><div class="workSquare square11">To whom it may concern [2024]</div></a>
+    <a href=""><div class="workSquare square10">Mario Kart 1000000 [2023]</div></a>
+    <a href=""><div class="workSquare square9">The other day [2023]</div></a>
+    <a href=""><div class="workSquare square8">Latent Space / Body: limbs [2023]</div></a>
+    <a href=""><div class="workSquare square7">Flesh is a dead format [2022]</div></a>
+    <a href=""><div class="workSquare square6">Can we feel touch when<br>we're made of light [2021]</div></a>
+    <a href=""><div class="workSquare square5">being with You, in Unity [2021]</div></a>
+    <a href=""><div class="workSquare square4">Os chaparros crescem e<br>as azinheiras mingam [2021]</div></a>
+    <a href=""><div class="workSquare square3">People are not numbers / Memorial [2020]</div></a>
+    <a href=""><div class="workSquare square2">Twitch_Plays_Max [2020]</div></a>
+    <a href=""><div class="workSquare square1">How to make a dadaist poem [2018]</div></a>
+    <!-- <a href=""><div class="workSquare"></div></a> -->
+</div>
+</body>
+
+</html>
diff --git a/compositionStyles.css b/compositionStyles.css
@@ -0,0 +1,195 @@
+/* General CSS attributes for the page */
+
+a {
+    text-decoration: none;
+}
+
+/* Header nav bar for all pages */
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 98vw;
+    background-color: rgba(190, 87, 41, 0.5);
+}
+
+header a {
+    color:rgba(190, 87, 41, 1);
+    transition: ease-in 0.2s;
+
+}
+
+.hoverLink:hover {
+    color: rgba(190, 87, 41, 0.5);
+    transition: ease-in 0.2s;
+}
+
+/* "Works" page title */
+
+body {
+    background-color: black;
+    color: rgba(190, 87, 41, 1);
+
+    display: grid;
+    place-items: center;
+}
+
+h1 {
+    margin-top: 80px;
+}
+
+/* Work Squares */
+
+#workList {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 100vw;
+
+    margin-top: 20px;
+}
+
+#workList a {
+    text-decoration: none;
+    color: rgb(255, 255, 255, 1);
+}
+
+.workSquare {
+
+    width: 350px;
+    height: 350px;
+
+    position: relative;
+    text-align: center;
+
+    border: 1px solid rgba(255, 255, 255, 1); /* unhovered solid border */
+
+    display: grid;
+    place-items: center; /* Make inside text centered */
+
+    opacity: 0.65;
+    transition: ease-in 0.2s;
+
+}
+
+.workSquare:hover::after {
+
+    content: "";
+    position: absolute;
+    top: -2.5px; /* These dimensions need to be the negative of the border size */
+    left: -2.5px;
+    right: -2.5px;
+    bottom: -2.5px;
+    border: 2.5px solid rgba(255, 255, 255, 0.5); /* Beggining rgba */
+    z-index: 2;
+    animation: pulse-brightness 0.5s infinite ease-in-out; /* How fast the pulses are */
+}
+
+@keyframes pulse-brightness {
+    0%, 100% {
+      border-color: rgba(255, 255, 255, 1); /* Beggining rgba */
+    }
+    50% {
+      border-color: rgba(0, 72, 0, 1); /* End rgba */
+    }
+  }
+
+
+.workSquare:hover {
+    opacity: 1;
+    transition: ease-in 0.2s;
+}
+
+
+
+
+
+
+
+
+
+
+/* Define pictures for each work square */
+
+.workSquare.square13 {
+    background-image: url();
+    background-position: -100%;
+    background-size: cover;
+}
+
+.workSquare.square12 {
+    background-image: url();
+    background-position: -100%;
+    background-size: cover;
+}
+
+.workSquare.square11 {
+    background-image: url();
+    background-position: -100%;
+    background-size: cover;
+}
+
+.workSquare.square10 {
+    background-image: url(resources/mariokart1000000.png);
+    background-position: -55px;
+    background-size: cover;
+}
+
+.workSquare.square9 {
+    background-image: url(resources/theotherday.jpg);
+    background-position: -71.5% 35%;
+    background-size: 500%;
+}
+
+.workSquare.square8 {
+    background-image: url(resources/IMG_2883.PNG);
+    background-position: -100%;
+    background-size: cover;
+}
+
+.workSquare.square7 {
+    background-image: url(resources/Dimitris.png);
+    background-position: -100px 0px;
+    background-size: cover;
+}
+
+.workSquare.square6 {
+    background-image: url(resources/canwefeeltouch.jpg);
+    background-position: -30px 0px;
+    background-size: cover;
+}
+
+.workSquare.square5 {
+    background-image: url(resources/beingwithyouinunity.png);
+    background-position: -230px 0px;
+    background-size: cover;
+}
+
+.workSquare.square4 {
+    background-image: url(/resources/oschaparroscresceneasazinheirasmingam.jpg);
+    background-size: cover;
+}
+
+.workSquare.square3 {
+    background-image: url(/resources/peoplearenotnumbersmemorial.png);
+
+    background-position: 0px 140px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.workSquare.square2 {
+    background-image: url(resources/twitchplaysmax.png);
+    background-position: -170px 0px;
+    background-size: cover;
+}
+
+.workSquare.square1 {
+    background-image: url();
+    background-position: -100%;
+    background-size: cover;
+}
diff --git a/disambiguation.html b/disambiguation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pedro Latas: composer, performer, creative coder</title>
+    <link rel="stylesheet" href="disambiguationStyle.css">
+    <link rel="icon" href="resources/favicon.ico">
+</head>
+
+<header>
+    <div><a class="hoverLink" href="about.html">About</a></div>
+    <div><a class="hoverLink" href="works.html">Works</a></div>
+    <div><a class="hoverLink" href="agenda.html">Agenda</a></div>
+    <div><a class="hoverLink" href="releases.html">Releases</a></div>
+</header>
+
+<main>
+
+    <div id="workDisambiguation">
+        <a href="composition.html"><div class="workSquare squareComposition">Composition</div></a>
+        <a href="film.html"><div class="workSquare squareFilm">Music for Film</div></a>
+        <a href="coding.html"><div class="workSquare squareCreativeCoding">Creative Coding</div></a>
+        <a href="improvisation.html"><div class="workSquare squareImprovisation">Improvisation</div></a>
+    </div>
+
+</main>
+
+</html>