User:Wyn: Difference between revisions

Revision as of 14:20, 19 September 2024

<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Personal Web of Interests</title>
   <style>
       body, html {
           margin: 0;
           padding: 0;
           height: 100%;
           font-family: Arial, sans-serif;
           background-color: #f0f0f0;
       }
       .container {
           width: 100%;
           height: 100%;
           position: relative;
           overflow: hidden;
       }
       .node {
           position: absolute;
           background-color: #fff;
           border: 2px solid #333;
           border-radius: 50%;
           width: 100px;
           height: 100px;
           display: flex;
           justify-content: center;
           align-items: center;
           text-align: center;
           cursor: pointer;
           transition: all 0.3s ease;
       }
       .node:hover {
           transform: scale(1.1);
           box-shadow: 0 0 15px rgba(0,0,0,0.2);
       }
       #svg-container {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: -1;
       }
       .info-panel {
           position: fixed;
           bottom: 20px;
           left: 20px;
           background-color: rgba(255, 255, 255, 0.9);
           padding: 15px;
           border-radius: 10px;
           box-shadow: 0 0 10px rgba(0,0,0,0.1);
           max-width: 300px;
       }
   </style>

</head> <body>

       <svg id="svg-container"></svg>

Your Personal Web

Click on a node to learn more about each topic.

   <script>
       const interests = [
           {id: 'publishing', name: 'Physical Publishing', x: 50, y: 30, info: 'Exploring the art of tangible media creation and distribution.'},
           {id: 'archive', name: 'Art Labour Archive', x: 70, y: 70, info: 'Documenting and preserving the process and effort behind artistic creations.'},
           {id: 'sound', name: 'Sound Recording', x: 30, y: 70, info: 'Capturing and manipulating audio for various creative projects.'},
           {id: 'collective', name: 'Collective Organization', x: 20, y: 40, info: 'Studying and implementing collaborative structures in creative endeavors.'},
           {id: 'assignments', name: 'Course Assignments', x: 80, y: 40, info: 'Current projects: 1. Media analysis (due 10/15) 2. Sound installation (due 11/20)'}
       ];

       function createNode(interest) {
           const node = document.createElement('div');
           node.className = 'node';
           node.id = interest.id;
           node.style.left = `${interest.x}%`;
           node.style.top = `${interest.y}%`;
           node.innerHTML = interest.name;
           node.onclick = () => showInfo(interest);
           document.getElementById('web-container').appendChild(node);
       }

       function createConnections() {
           const svg = document.getElementById('svg-container');
           interests.forEach((interest, i) => {
               interests.slice(i + 1).forEach(other => {
                   const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                   line.setAttribute('x1', `${interest.x}%`);
                   line.setAttribute('y1', `${interest.y}%`);
                   line.setAttribute('x2', `${other.x}%`);
                   line.setAttribute('y2', `${other.y}%`);
                   line.setAttribute('stroke', '#333');
                   line.setAttribute('stroke-width', '1');
                   svg.appendChild(line);
               });
           });
       }

       function showInfo(interest) {
           const panel = document.getElementById('info-panel');
           panel.innerHTML = `

${interest.name}

${interest.info}

           `;
       }

       interests.forEach(createNode);
       createConnections();
   </script>

</body> </html>