feat: display user ratings on public profiles and add profile links

- Add comprehensive ratings section to PublicProfilePage showing average rating, individual reviews with comments, and collaboration preferences
- Make partner avatars and names clickable in MatchesPage and MatchChatPage to navigate to their public profiles
- Add hover effects on profile links for better UX
- Fetch and display ratings using ratingsAPI endpoint

frontend/src/pages/MatchesPage.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import Layout from '../components/layout/Layout';
 import { useAuth } from '../contexts/AuthContext';
 import { matchesAPI } from '../services/api';
@@ -246,17 +246,21 @@ const MatchCard = ({ match, onAccept, onReject, onOpenChat, processing }) => {
       <div className="flex items-start justify-between">
         <div className="flex-1">
           <div className="flex items-center gap-3 mb-2">
-            <img
-              src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
-              alt={match.partner.username}
-              className="w-12 h-12 rounded-full"
-            />
+            <Link to={`/${match.partner.username}`} className="flex-shrink-0">
+              <img
+                src={match.partner.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${match.partner.username}`}
+                alt={match.partner.username}
+                className="w-12 h-12 rounded-full hover:ring-2 hover:ring-primary-500 transition-all"
+              />
+            </Link>
             <div>
-              <h3 className="font-semibold text-gray-900">
-                {match.partner.firstName && match.partner.lastName
-                  ? `${match.partner.firstName} ${match.partner.lastName}`
-                  : match.partner.username}
-              </h3>
+              <Link to={`/${match.partner.username}`}>
+                <h3 className="font-semibold text-gray-900 hover:text-primary-600 transition-colors">
+                  {match.partner.firstName && match.partner.lastName
+                    ? `${match.partner.firstName} ${match.partner.lastName}`
+                    : match.partner.username}
+                </h3>
+              </Link>
               <p className="text-sm text-gray-600">@{match.partner.username}</p>
             </div>
           </div>