Add GoldStar 1-pager

docs/ecosystem/developer-profile.md

@@ -0,0 +1,97 @@
+---
+title: Developer Profile
+sidebar_label: Developer Profile
+description: Learn about Developer Profile - Flow's developer recognition and learning platform. Create your builder profile, track your learning journey, showcase your projects, and connect with the Flow ecosystem.
+sidebar_position: 2
+sidebar_custom_props:
+  icon: ⭐
+keywords:
+  - Developer Profile program
+  - Flow developers
+  - builder profiles
+  - learning paths
+  - developer challenges
+  - Flow ecosystem
+  - developer recognition
+  - Flow community
+  - learning platform
+  - developer achievements
+  - Flow certification
+  - builder network
+  - developer tools
+  - Flow education
+  - developer onboarding
+---
+
+The Developer Profile is the beginning of Flow's developer recognition and learning platform where builders can create profiles, track their learning journey, complete challenges, and showcase their contributions to the Flow ecosystem.
+
+It's fully onchain!
+
+:::tip
+
+The Developer Profile is currently in alpha. Please let us know what you think!
+
+:::
+
+## What is the Developer Profile?
+
+The Developer Profile is a platform designed to help developers:
+
+- Create and manage their Flow builder profiles
+- Track their learning progress through structured paths
+- Complete challenges and earn recognition
+- Connect with other builders in the ecosystem
+- Showcase their projects and contributions
+
+Currently, the Developer Profile is in alpha. You can:
+
+- Create your profile
+- Share your GitHub handle
+- Add your deployed contract addresses
+- Complete the First Challenge
+
+## Getting Started
+
+The Developer Profile is accessed by logging in with your wallet. Click the "Connect Button" in the top right.
+
+![Developer Profile Connect](profile-connect.png)
+
+:::tip
+
+The Developer Profile is on Flow Cadence. You'll need to use a wallet that supports Cadence transactions, such as the [Flow Wallet] or [Blocto].
+
+:::
+
+Once connected, you can see your progress by clicking `Progress` in the dropdown menu.
+
+![Progress](progress.png)
+
+![Developer Profile Progress](profile-progress.png)
+
+### 1. Create Your Profile
+
+Click `Profile` in the dropdown menu.
+
+- Choose a unique handle
+- Add your Github handle
+- Add your deployed contract addresses
+- Share how you discovered Flow
+
+### 2. Complete the First Challenge
+
+**After** you've created your profile, you can complete the first challenge.
+
+Click `Progress` in the dropdown menu.
+
+Click the button at the bottom of the page.
+
+Complete the challenge!
+
+## Next Steps
+
+We'll be updating the Developer Profile with new features and challenges. Check back soon!
+
+<!-- Reference-style links, will not render on the page. -->
+
+[Flow Wallet]: https://wallet.flow.com/
+[Blocto]: https://blocto.app/

src/ui/design-system/src/lib/Components/GoldStarPanel/index.tsx

@@ -37,6 +37,12 @@ export const GoldStarPanel: React.FC = () => {
     button.click();
   };
 
+  const progress = user.loggedIn ? getProgress() * 100 : 0;
+
+  const handleProfileClick = () => {
+    window.location.href = '/ecosystem/developer-profile';
+  };
+
   return (
     <div className="flex flex-col gap-4 h-full">
       <div className="flex gap-2">
@@ -60,15 +66,28 @@ export const GoldStarPanel: React.FC = () => {
         </button>
       </div>
 
-      <div className={`${colors.black.dark} p-6 rounded-lg shadow-lg flex-1`}>
+      <div 
+        onClick={handleProfileClick}
+        className={`${colors.black.dark} p-6 rounded-lg shadow-lg flex-1 hover:scale-[1.02] transition-transform cursor-pointer`}
+      >
         <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-          <div className={`${colors.flowgreen.light} h-2.5 rounded-full`} style={{ width: `${user.loggedIn ? getProgress() * 100 : 0}%` }}></div>
+          <div 
+            className={`${colors.flowgreen.light} h-2.5 rounded-full`} 
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+        <div className="flex justify-between items-center mt-2">
+          <p className="text-sm text-gray-100">
+            {user.loggedIn
+              ? `Profile Completion: ${Math.round(progress)}%`
+              : 'Please connect your wallet and create a profile'}
+          </p>
+          {user.loggedIn && progress < 100 && (
+            <p className="text-sm text-gray-100">
+              Learn More
+            </p>
+          )}
         </div>
-        <p className="text-sm text-gray-100 mt-2">
-          {user.loggedIn
-            ? `Profile Completion: ${Math.round(getProgress() * 100)}%`
-            : 'Please connect your wallet and create a profile'}
-        </p>
       </div>
     </div>
   );