Main

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,24 +1,32 @@
-# Developer Portfolio Template 🚀
+# Aradhya Dhruv's Developer Portfolio 🚀
 
-![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![Node.js](https://img.shields.io/badge/Node%20js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) ![npm](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![JavaScript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E) ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) ![Sass](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)
+![Python](https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white) ![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) ![LangChain](https://img.shields.io/badge/LangChain-0172B0?style=for-the-badge&logo=langchain&logoColor=white) ![Streamlit](https://img.shields.io/badge/Streamlit-FF4B4B?style=for-the-badge&logo=streamlit&logoColor=white) ![PyTorch](https://img.shields.io/badge/PyTorch-EE4C2C?style=for-the-badge&logo=pytorch&logoColor=white) ![Hugging Face](https://img.shields.io/badge/Hugging%20Face-FE8E46?style=for-the-badge&logo=huggingface&logoColor=white)
 
 ## What is this?
 
-This simple portfolio template is designed to showcase your past projects, career history, skill sets, and more.
+This portfolio is designed to showcase my expertise as a Data Scientist and AI Researcher, highlighting key projects, skills, and career history. It reflects my work in Generative AI, NLP, Computer Vision, and Reinforcement Learning.
 
-View the [Demo](https://yujisatojr.github.io/react-portfolio-template/).
+The template has been borrowed from Yuji Sato, Kudos to him for creating a dynamic, responsive react portfolio template.
 
-**This template is free to use, and no attribution is required.** You can fork or download this repository to customize it for your own use. Please don't forget to leave a ⭐ if you like this portfolio!
+**This template is customized to reflect my profile.** If you find it useful, feel free to fork or download it. Don't forget to leave a ⭐ if you like this portfolio!
 
-![screenshot](./src/assets//images/screenshot.png)
+![alt text](image.png)
 
 ## Features
 
-✅ Open source (free to use, no attribution required)  
-✅ Responsive design & mobile-friendly  
-✅ Supports both dark and light modes  
-✅ Highly customizable multi-component layout  
-✅ Built with modern technologies (React, TypeScript, JavaScript, and SCSS)  
+✅ Customized to showcase Generative AI, NLP, and Computer Vision projects  
+✅ Highlights professional career and research contributions  
+✅ Fully responsive design & mobile-friendly  
+✅ Light and dark modes for enhanced usability  
+✅ Built with modern web technologies: React, JavaScript, and SCSS  
+
+## Setup Instructions
+
+Follow these steps to set up and customize this portfolio for your own use.
+
+### Prerequisites
+
+Ensure you have [Node.js](https://nodejs.org/) installed. Verify the installation by running:
 
 ## Quick Setup
 
@@ -83,4 +91,4 @@ You can choose your preferred service (e.g., [Netlify](https://www.netlify.com/)
 
 4. **Access Your Deployed App**
 
-    After successfully deploying, you can access your app at `https://yourusername.github.io/your-repo-name`.
+    After successfully deploying, you can access your app at `https://yourusername.github.io/your-repo-name`.

package.json

@@ -1,9 +1,10 @@
 {
-  "name": "react-portfolio-template",
+  "name": "react-portfolio",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://yujisatojr.github.io/react-portfolio-template",
+  "homepage": "https://Dhruv-NNT.github.io/portfolio",
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -21,6 +22,7 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-scripts": "5.0.1",
     "react-vertical-timeline-component": "^3.6.0",
     "sass": "^1.77.4",
@@ -54,6 +56,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react-vertical-timeline-component": "^3.3.6"
+    "@types/react-vertical-timeline-component": "^3.3.6",
+    "gh-pages": "^6.2.0"
   }
 }

public/index.html

@@ -2,42 +2,35 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.googletagmanager.com;">
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-9YMQNQ353N"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-9YMQNQ353N');
+    </script>
+
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="My personal portfolio website."
-    />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="description" content="My personal portfolio website." />
     <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" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Yuji Sato</title>
+    <title>Aradhya Dhruv</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

src/App.tsx

@@ -1,4 +1,6 @@
 import React, {useState, useEffect} from "react";
+
+
 import {
   Main,
   Timeline,
@@ -11,15 +13,12 @@ import {
 import FadeIn from './components/FadeIn';
 import './index.scss';
 
+
 function App() {
-    const [mode, setMode] = useState<string>('dark');
+    const [mode, setMode] = useState<string>('light');
 
     const handleModeChange = () => {
-        if (mode === 'dark') {
-            setMode('light');
-        } else {
-            setMode('dark');
-        }
+        setMode(mode === 'light' ? 'dark' : 'light');
     }
 
     useEffect(() => {
@@ -41,4 +40,4 @@ function App() {
     );
 }
 
-export default App;
+export default App;