fix: update terminology and improve UX

- replace "third-party" with "atproto" terminology throughout
- improve app circle sizing and layout
- add window resize handler for responsive positioning
- remove redundant identity hint text

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

README.md

···
 # @me
 
-an accessible visualization of how your atproto identity connects to third-party apps.
+an accessible visualization of how your atproto identity connects to atproto apps.
 
 [at-me.fly.dev](https://at-me.fly.dev/)
 
 ## what is this
 
-in decentralized social networks, you own your identity and your data lives in your personal data server. third-party applications create records in your repository using different lexicons (data schemas).
+in decentralized social networks, you own your identity and your data lives in your personal data server. atproto applications create records in your repository using different lexicons (data schemas).
 
-@me shows this visually: your identity at the center, surrounded by the third-party apps that have created data for you. click an app to see what record types it stores, then click a record type to view the actual data.
+@me shows this visually: your identity at the center, surrounded by the atproto apps that have created data for you. click an app to see what record types it stores, then click a record type to view the actual data.
 
 inspired by [pdsls.dev](https://pdsls.dev).
 

src/templates.rs

···
             line-height: 1.2;
         }}
 
-        .identity-hint {{
-            font-size: clamp(0.35rem, 0.8vmin, 0.45rem);
-            color: var(--text-lighter);
-            margin-top: clamp(0.4rem, 1.5vmin, 0.6rem);
-            letter-spacing: 0.05em;
-        }}
 
         .identity-pds-label {{
             position: absolute;
···
             background: var(--surface-hover);
             border: 1px solid var(--border);
             border-radius: 50%;
-            width: clamp(45px, 8vmin, 60px);
-            height: clamp(45px, 8vmin, 60px);
+            width: clamp(55px, 10vmin, 70px);
+            height: clamp(55px, 10vmin, 70px);
             display: flex;
             align-items: center;
             justify-content: center;
···
         <div class="identity">
             <div class="identity-label">@</div>
             <div class="identity-value" id="handle">loading...</div>
-            <div class="identity-hint">tap for details</div>
             <div class="identity-pds-label">Your PDS</div>
         </div>
         <div id="field" class="loading">loading...</div>

static/app.js

···
 
 let globalPds = null;
 let globalHandle = null;
+let globalApps = null; // Store apps for repositioning on resize
 
 // Fetch app avatar from server
 async function fetchAppAvatar(namespace) {
···
             apps[app.namespace] = app.collections;
             allCollections.push(...app.collections);
         });
+
+        // Store apps globally for repositioning
+        globalApps = apps;
 
         // Add identity click handler now that we have the data
         const pdsHost = globalPds.replace('https://', '').replace('http://', '');
···
                 document.getElementById('detail').classList.remove('visible');
             }
         });
+
+        // Add window resize handler to reposition app circles
+        let resizeTimeout;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                repositionAppCircles();
+            }, 100); // Debounce resize events
+        });
     })
     .catch(e => {
         document.getElementById('field').innerHTML = 'error loading records';
         console.error(e);
     });
+
+// Function to reposition app circles on window resize
+function repositionAppCircles() {
+    if (!globalApps) return;
+
+    const appViews = document.querySelectorAll('.app-view');
+    const appNames = Object.keys(globalApps).sort();
+
+    const vmin = Math.min(window.innerWidth, window.innerHeight);
+    const radius = Math.max(vmin * 0.35, 150);
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+
+    appViews.forEach((div, i) => {
+        const angle = (i / appNames.length) * 2 * Math.PI - Math.PI / 2;
+        const x = centerX + radius * Math.cos(angle) - 30;
+        const y = centerY + radius * Math.sin(angle) - 30;
+
+        div.style.left = `${x}px`;
+        div.style.top = `${y}px`;
+    });
+}
 
 // MST Visualization Functions
 async function loadMSTStructure(lexicon, containerView) {

static/onboarding.js

···
     },
     {
         target: '.canvas',
-        title: 'third-party applications',
+        title: 'atproto applications',
         description: 'these apps use your global identity to write public records to your PDS. they can also read records you\'ve created.',
         position: 'center'
     },