Skip to content

Commit

Permalink
Added header
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mendiak
Mendiak committed Oct 24, 2024
1 parent 43893ba commit c50fa59
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 37 deletions.
Binary file modified assets/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 33 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,44 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="PulseRoots: Interactive visualization of electronic music genres and styles">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>PulseRoots: Electronic Music Styles Tree</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<div id="header-container">
<a href="index.html" id="logo-link" aria-label="Home"><img src="assets/logo.png" id="logo" alt="PulseRoots Logo"> <h1>PulseRoots: Electronic Music Styles Tree</h1></a>
<nav id="social-share" aria-label="Social media sharing">
<span>Share on:</span>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://mendiak.github.io/pulse.roots/"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on Facebook">
<i class="bi bi-facebook" aria-hidden="true"></i>
</a>

<a href="https://x.com/intent/tweet?url=https://mendiak.github.io/pulse.roots"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on X (Twitter)">
<i class="bi bi-twitter-x" aria-hidden="true"></i>
</a>

<a href="https://www.reddit.com/submit?url=https://mendiak.github.io/pulse.roots/&title=PulseRoots"
target="_blank"
rel="noopener noreferrer"
aria-label="Share on Reddit">
<i class="bi bi-reddit" aria-hidden="true"></i>
</a>
</nav>
</div>
</header>
<div id="main-container">
<div id="tooltip">
<img src="assets/logo.png" id="logo"> <h1>PulseRoots: Electronic Music Styles Tree</h1>
<h2>Treemap Format</h2>

<p>Explore a comprehensive collection of electronic music genres, presented in a treemap format. The map starts at the broad "Electronic Music" category, then descends into the main "Families" (Ambient, Techno, House, etc.), and further branches into specific styles and substyles.</p>

Expand All @@ -34,6 +64,7 @@ <h2>Contact</h2>
<p>If you have any suggestions, improvement proposals, if you've found any errors, or just want to say 'Hi!', feel free to write to me.</p>



<form action="https://api.web3forms.com/submit" method="POST">

<!-- Replace with your Access Key -->
Expand Down Expand Up @@ -70,7 +101,7 @@ <h2>Contact</h2>
<div id="info-content"></div>
<div id="spotify-embed"></div>
</div>

</div>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="script.js"></script>
</body>
Expand Down
44 changes: 22 additions & 22 deletions pulseroots.genres.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"name": "Post-Digital",
"description": "Explores the relationship between digital technology and sound, often embracing imperfections and glitches as artistic elements.",
"example": "Rioji Ikeda - data.matrix",
"spotify_track_id": "5LchjLl8fQ0Nkrdf9yRlaE"
"spotify_track_id": "5ZmSq1xJbf1IptikZZgvJ6"
},
{
"name": "Sound Art",
Expand Down Expand Up @@ -270,8 +270,8 @@
{
"name": "Minimal Detroit Techno",
"description": "A stripped-back and minimalist approach to Detroit Techno.",
"example": "Robert Hood - Minimal Nation",
"spotify_track_id": "4vBBFo44z0W1hVpCBwcxUF"
"example": "Robert Hood - Rhythm Of Vision",
"spotify_track_id": "3PxI10OJhF7y9txEcEMukZ"
}
]
},
Expand Down Expand Up @@ -323,7 +323,7 @@
"name": "Deep Techno",
"description": "A deeper and more atmospheric take on minimal techno.",
"example": "Deepbass - Les Planes",
"spotify_track_id": "4JBXPj21sTqOZvgQurUJoP"
"spotify_track_id": "6evJpAEl3mQs8EnZPMvumL"
},
{
"name": "Click Techno",
Expand Down Expand Up @@ -360,8 +360,8 @@
{
"name": "Schranz",
"description": "A fast and distorted form of hard techno.",
"example": "Chris Liebing - Evolution",
"spotify_track_id": "4gLWFo7XDz3cNRV8qVqiK1"
"example": "Chris Liebing & Andre Walter - Random Process",
"spotify_track_id": "2bgZSsep97so4m8k2d5OEj"
},
{
"name": "Hardcore",
Expand Down Expand Up @@ -555,13 +555,13 @@
"name": "Funky Tech House",
"description": "Tech house with funky basslines and grooves, often incorporating elements of disco and funk.",
"example": "DJ Sneak - Untouchable Funk",
"spotify_track_id": "5He9yPmPv0Du9hASUlTUjr"
"spotify_track_id": "7lrMZnS3UBMpIsdd4ITN59"
},
{
"name": "Progressive Tech House",
"description": "Tech house with a progressive structure, building up tension and releasing it with melodic elements.",
"example": "Roger Sanchez- Another Chance",
"spotify_track_id": "xxxxxxxx08fMRujpKhEDTanKN9l2udxxxxxxxxxxx"
"spotify_track_id": "08fMRujpKhEDTanKN9l2ud"
},
{
"name": "Tribal Tech House",
Expand Down Expand Up @@ -703,7 +703,7 @@
"name": "Dark Progressive Trance",
"description": "Progressive Trance with darker and more atmospheric elements.",
"example": "Solarstone - Seven Cities",
"spotify_track_id": "4GpHU6W6cPUa8tIk8EwBbY"
"spotify_track_id": "5VIVZAQVSfJRD8f4XFbgBL"
},
{
"name": "Progressive Psytrance",
Expand Down Expand Up @@ -875,7 +875,7 @@
"name": "Microtonal Drone",
"description": "Drone ambient that explores microtonal tunings and unconventional harmonic relationships.",
"example": "Eliane Radigue - Trilogie de la Mort",
"spotify_track_id": "2qLeLtVxS5N9A9B0qd1BC5"
"spotify_track_id": "6SrDGaMF5zeQVoujQq4Pap"
}
]
},
Expand Down Expand Up @@ -918,7 +918,7 @@
"name": "Darkstep",
"description": "Subgenre of drum and bass with a darker and heavier sound.",
"example": "Dillinja - The Angels Fell",
"spotify_track_id": "7aBamUmJOy8jtfbBj8Xw9n"
"spotify_track_id": "2KL9mHCn3aSZJzxpJM4HNb"
},
{
"name": "Techstep",
Expand All @@ -935,20 +935,20 @@
{
"name": "Liquid Funk",
"description": "Subgenre of liquid drum and bass with funk influences.",
"example": "Makoto - Liquid Funk",
"spotify_track_id": "4aBHhXUQH3Ot1EGo4wuEwP"
"example": "Calibre - Even If",
"spotify_track_id": "5nVkaIXaqQtoMX4V1jncdO"
},
{
"name": "Jazzstep",
"description": "Subgenre of liquid drum and bass with jazz influences.",
"example": "Calibre - Souvenirs",
"spotify_track_id": "6aPKlBXEHoSFHj4yDKBIAH"
"example": "Roni Size & Reprazent - Brown Paper Bag",
"spotify_track_id": "3ZQs8RHO3lPZoUwpavPENL"
},
{
"name": "Atmospheric Drum and Bass",
"description": "Subgenre of liquid drum and bass with a more ambient and atmospheric sound.",
"example": "Alix Perez - Solace",
"spotify_track_id": "4Ks7oDQcUriELlhBIIAWb0"
"example": "LTJ Bukem - Atlantis",
"spotify_track_id": "2527WUoKIauHY1tx5TCetu"
}
]
},
Expand All @@ -967,14 +967,14 @@
{
"name": "Party Drum and Bass",
"description": "Subgenre of jump up with a more festive and lively sound.",
"example": "Benny L - Boombox",
"spotify_track_id": "5Uc8zK0KuC5AXlXrxhOr2F"
"example": "Mampi Swift - The One",
"spotify_track_id": "0fPfNeGh7ccq9i9ZAWiMBv"
},
{
"name": "Happy Jump Up",
"description": "Subgenre of jump up with a more cheerful and optimistic sound.",
"example": "Kanine - Sunshine",
"spotify_track_id": "7aBamUmJOy8jtfbBj8Xw9n"
"example": "DJ Hazard - Mr. Happy",
"spotify_track_id": "2vg5YDfcWlj4eK6wPPeCyu"
}
]
}
Expand Down Expand Up @@ -1198,7 +1198,7 @@
"name": "Philly club",
"description": "A regional variant of Baltimore club that originated in Philadelphia, often incorporating elements of hip-hop and R&B.",
"example": "DJ Sega - Colours",
"spotify_track_id": "1wlL39JcPDjcUWwMdZS9Hd"
"spotify_track_id": "10w5UHG7SqkVmy0XyN3p1F"
}
]
},
Expand Down
74 changes: 61 additions & 13 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,68 @@
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap');

body {
margin: 0;
padding: 40px;
display: flex;
flex-wrap: wrap;
gap: 20px;
flex-direction: row;
flex-direction: column;
background-image: url('assets/background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: "Aleo", serif;
}

#header-container {
background: linear-gradient(to right, #222, #333, #444);
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
}

#logo {
width: 40px;
height: 40px;
transition: transform 0.3s ease;
}

#logo-link {
text-decoration: none;
color: inherit;
display: flex;
gap: 20px;
align-items: center;
}

#logo:hover {
transform: rotate(10deg) scale(1.1);
}

#social-share {
color: #fff;
margin-left: auto;
display: flex;
gap: 15px;
align-items: center;
}

#social-share i {
color: #fff;
font-size: 20px;
transition: color 0.3s ease;
}

#social-share i:hover {
color: #a7a7a7;
}

#main-container {
margin: 20px;
display: flex;
gap: 20px;
flex-direction: row;
}

#tooltip {
max-width: 350px;
min-width: 300px;
Expand All @@ -28,21 +76,16 @@ body {
color: #333;
}

#logo {
margin-top: 20px;
width: 100px;
}

h1 {
font-size: 40px;
font-family: "Arimo", sans-serif;
font-size: 24px;
color: #fff;
margin: 0;
}

p {
font-size: 16px;
}


#treemap {
max-width: 1200px;
min-width: 300px;
Expand Down Expand Up @@ -139,4 +182,9 @@ p {
#submitbutton:hover {
background-color: #a7a7a7;
color: #fff;
}

.social-share i {
color: #333;
font-size: 24px;
}

0 comments on commit c50fa59

Please sign in to comment.