From 8c8e5234236ed9c3eacfb87526459edd293e61e9 Mon Sep 17 00:00:00 2001
From: damedotblog <hi@dame.art>
Date: Thu, 20 Feb 2025 00:01:01 -0500
Subject: [PATCH] update method page

---
 .../ScoringMethodology/ScoringMethodology.css |  4 ++++
 .../ScoringMethodology/ScoringMethodology.js  | 20 ++++++++++++++++---
 src/components/UserProfile/ScoreGauge.js      |  4 ++--
 src/components/UserProfile/UserProfile.css    |  4 ++++
 .../UserProfile/components/NarrativeCard.js   |  2 +-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/ScoringMethodology/ScoringMethodology.css b/src/components/ScoringMethodology/ScoringMethodology.css
index 6a6d80a..a6399a3 100644
--- a/src/components/ScoringMethodology/ScoringMethodology.css
+++ b/src/components/ScoringMethodology/ScoringMethodology.css
@@ -34,4 +34,8 @@
   .methodology-page p {
     margin: 15px 0;
     line-height: 1.5;
+  }
+
+  .increase-score-list li {
+    margin-bottom: 5px;
   }
\ No newline at end of file
diff --git a/src/components/ScoringMethodology/ScoringMethodology.js b/src/components/ScoringMethodology/ScoringMethodology.js
index dcdf042..c22d139 100644
--- a/src/components/ScoringMethodology/ScoringMethodology.js
+++ b/src/components/ScoringMethodology/ScoringMethodology.js
@@ -32,6 +32,7 @@ const ScoringMethodology = () => {
           (Bluesky vs AT Proto) has the most impact on your score.
         </p>
 
+        <h2>Score Ranges</h2>
         <p>
           For Version 1 of the scoring algorithm, there is a max score of 1,000 points. 
           This may change in the future, or it could theoretically even be scaled down 
@@ -39,11 +40,24 @@ const ScoringMethodology = () => {
         </p>
 
         <p>
-          A score between 0 - 250 likely indicates that an account is either very new 
-          to the network or isn't very active.
+          A score between 0 - 300 likely indicates that an account is either very new 
+          to the network or isn't very active. A score of 300 - 700 is within a "healthy" range. Scores that are 700+ typically indicate accounts that have been around awhile and are very active. The different score ranges are still in early development along with the algorithm, so these details are likely to change.
         </p>
 
-        <h3>How do I increase my score?</h3>
+        <h2>What are the different social statuses?</h2>
+        <p>
+            Rather than displaying follower counts on profiles, the cred.blue analysis categorizes each identity into one of four social statuses base on its follower count, social graph ratio, engagement rate, and age. There are additional labels placed before the social status to indicate how engaging the account actually is.
+        </p>
+
+        <ol className="social-status-list">
+          <li>Newcomer</li>
+          <li>Explorer</li>
+          <li>Pathfinder</li>
+          <li>Guide</li>
+          <li>Leader</li>
+        </ol>
+
+        <h2>How do I increase my score?</h2>
         <p>
           The scoring methodology is fairly complex and not all of the variables can be 
           easily changed (for instance, an account's age), but there are some specific 
diff --git a/src/components/UserProfile/ScoreGauge.js b/src/components/UserProfile/ScoreGauge.js
index c35759c..2d1de42 100644
--- a/src/components/UserProfile/ScoreGauge.js
+++ b/src/components/UserProfile/ScoreGauge.js
@@ -6,8 +6,8 @@ const MAX_SCORE = 1000;
 
 const ScoreGauge = ({ score, shadowColor = 'rgba(150,127,0,0.74)' }) => {
   const data = [
-    { name: 'Q1', value: 10, color: '#004F84' },
-    { name: 'Q2', value: 20, color: '#1368AA' },
+    { name: 'Q1', value: 15, color: '#004F84' },
+    { name: 'Q2', value: 15, color: '#1368AA' },
     { name: 'Q3', value: 40, color: '#2881D2' },
     { name: 'Q4', value: 30, color: '#3B9AF8' },
   ];
diff --git a/src/components/UserProfile/UserProfile.css b/src/components/UserProfile/UserProfile.css
index bd8c5a3..2fd0c15 100644
--- a/src/components/UserProfile/UserProfile.css
+++ b/src/components/UserProfile/UserProfile.css
@@ -371,6 +371,10 @@ tspan {
   opacity: 0.5;
 }
 
+.narrative-methodology-link {
+  font-size: 0.9em;
+}
+
 .post-type-card .recharts-surface {
   margin-left: -15px;
 }
diff --git a/src/components/UserProfile/components/NarrativeCard.js b/src/components/UserProfile/components/NarrativeCard.js
index 466a669..3639f17 100644
--- a/src/components/UserProfile/components/NarrativeCard.js
+++ b/src/components/UserProfile/components/NarrativeCard.js
@@ -19,7 +19,7 @@ const NarrativeCard = () => {
         {narrative2 && <p>{narrative2}</p>}
         {narrative3 && <p>{narrative3}</p>}
       </div>
-      <p><Link to="/methodology" className="narrative-methodology-link">Learn more about the scoring methodology and definitions contained in this summary.</Link></p>
+      <p><Link to="/methodology" className="narrative-methodology-link">Learn more about the scoring methodology</Link>  and definitions contained in this summary.</p>
       <div className="disclaimer">
         <p><strong>NOTE: </strong>This summary was <strong>not</strong> generated using AI.</p>
       </div>
-- 
2.51.2