Updated GithubStats.js to read from my backend server

public/index.html

@@ -25,12 +25,12 @@
     <meta property="twitter:description" content="Explore Paula Miano's portfolio showcasing full stack development projects." />
     <meta property="twitter:image" content="%PUBLIC_URL%/images/preview-image.png" />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/About.js

@@ -23,8 +23,8 @@ function About() {
                     </div>
                     {/* Download Resume Button - Centered */}
                     <div className="text-center mt-5"> 
-                        <a href="/PaulaMiano/PaulaMiano.pdf" download className="btn btn-outline-primary">
-                            Download My Resume
+                        <a href="/PaulaMiano/PaulaMiano.pdf" target="_blank" rel="noopener noreferrer" className="btn btn-outline-primary">
+                            View My Resume
                         </a>
                     </div>
                 </div>

src/components/GithubStats.js

@@ -13,61 +13,26 @@ const GithubStats = () => {
     const [error, setError] = useState(null);
 
     const fetchLanguages = async () => {
-        const perPage = 100;
-
         try {
-            // console.log('Fetching with Token:', process.env.REACT_APP_STATS_API_TOKEN || 'Token is undefined'); // DEBUGGING: Check if the token is available
             setLoading(true);
 
-            // Fetch all repositories in a single call
-            const response = await fetch(`/user/repos?type=all&per_page=${perPage}`, {
-                headers: {
-                    Authorization: `Bearer ${process.env.REACT_APP_STATS_API_TOKEN}`
-                }
-            });
+            // Fetch aggregated language data from your Render backend
+            const response = await fetch('https://github-proxy-server.onrender.com/github-languages');
 
             if (!response.ok) {
-                throw new Error(`Failed to fetch repositories: ${response.statusText}`);
-            }
-
-            const allRepos = await response.json();
-            // console.log('Total Repositories Fetched:', allRepos.length);
-            const languagesData = {};
-
-            // Fetch languages for each repo using a relative URL
-            for (const repo of allRepos) {
-                const relativeLanguagesUrl = repo.languages_url.replace('https://api.github.com', '');
-                const languagesResponse = await fetch(relativeLanguagesUrl, {
-                    headers: {
-                        Authorization: `Bearer ${process.env.REACT_APP_STATS_API_TOKEN}`
-                    }
-                });
-
-                if (languagesResponse.ok) {
-                    const repoLanguages = await languagesResponse.json();
-                    // console.log(`Languages for repo ${repo.name}:`, repoLanguages); // Log languages for each repo
-
-                    for (const [language, count] of Object.entries(repoLanguages)) {
-                        languagesData[language] = (languagesData[language] || 0) + count;
-                    }
-                } else {
-                    console.error(`Failed to fetch languages for repo: ${repo.name}`);
-                }
+                throw new Error(`Failed to fetch language data: ${response.statusText}`);
             }
 
+            const languagesData = await response.json();
             setLanguages(languagesData);
             setLoading(false);
         } catch (err) {
-            console.error('Error fetching languages or repositories:', err);
-            setError(err.message); // Set the error message so it can be displayed in the UI
+            console.error('Error fetching languages:', err);
+            setError(err.message);
             setLoading(false);
         }
     };
 
-    useEffect(() => {
-        // console.log('Environment Token (GithubStats Component):', process.env.REACT_APP_STATS_API_TOKEN || 'Token is undefined');
-    }, []); // DEBUGGING: Check if the token is available    
-
     useEffect(() => {
         fetchLanguages();
     }, []);