diff --git a/.gitignore b/.gitignore index 4d29575de..f21726c76 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ .env.development.local .env.test.local .env.production.local +.env npm-debug.log* yarn-debug.log* diff --git a/README.md b/README.md index 0c336c2f1..0688c80f6 100644 --- a/README.md +++ b/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`. \ No newline at end of file + After successfully deploying, you can access your app at `https://yourusername.github.io/your-repo-name`. diff --git a/image.png b/image.png new file mode 100644 index 000000000..32c2bdd85 Binary files /dev/null and b/image.png differ diff --git a/package-lock.json b/package-lock.json index 6fc1a64b7..985a16f3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,14 @@ { - "name": "react-portfolio-template", + "name": "react-portfolio", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "react-portfolio-template", + "name": "react-portfolio", "version": "0.1.0", "dependencies": { + "@emailjs/browser": "^4.4.1", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@fortawesome/free-brands-svg-icons": "^6.5.2", @@ -25,6 +26,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", @@ -32,7 +34,8 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/react-vertical-timeline-component": "^3.3.6" + "@types/react-vertical-timeline-component": "^3.3.6", + "gh-pages": "^6.2.0" } }, "node_modules/@adobe/css-tools": { @@ -2308,6 +2311,14 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emailjs/browser": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz", + "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.11.0", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", @@ -7501,6 +7512,12 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.789.tgz", "integrity": "sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==" }, + "node_modules/email-addresses": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz", + "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==", + "dev": true + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -8728,6 +8745,32 @@ "node": ">=10" } }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -9221,6 +9264,51 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gh-pages": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.2.0.tgz", + "integrity": "sha512-HMXJ8th9u5wRXaZCnLcs/d3oVvCHiZkaP5KQExQljYGwJjQbSPyTdHe/Gc1IvYUR/rWiZLxNobIqfoMHKTKjHQ==", + "dev": true, + "dependencies": { + "async": "^3.2.4", + "commander": "^11.0.0", + "email-addresses": "^5.0.0", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^11.1.1", + "globby": "^11.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", + "dev": true, + "engines": { + "node": ">=16" + } + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", + "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -15318,6 +15406,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-ga4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", + "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==" + }, "node_modules/react-intersection-observer": { "version": "8.34.0", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.34.0.tgz", @@ -16776,6 +16869,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", @@ -17305,6 +17410,18 @@ "node": ">=8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index a8ca6840a..3d1357016 100644 --- a/package.json +++ b/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" } } diff --git a/public/index.html b/public/index.html index d15cda506..8f4ea39df 100644 --- a/public/index.html +++ b/public/index.html @@ -2,42 +2,35 @@ + + + + + + - - + + - - - Yuji Sato + Aradhya Dhruv +
- diff --git a/react-portfolio-template b/react-portfolio-template new file mode 160000 index 000000000..3db8a71c3 --- /dev/null +++ b/react-portfolio-template @@ -0,0 +1 @@ +Subproject commit 3db8a71c3ebea02818b846dfa3b1c9b829d879e8 diff --git a/src/App.tsx b/src/App.tsx index 495105e00..e6facdf7b 100644 --- a/src/App.tsx +++ b/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('dark'); + const [mode, setMode] = useState('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; \ No newline at end of file +export default App; diff --git a/src/assets/images/Cifar100.png b/src/assets/images/Cifar100.png new file mode 100644 index 000000000..85e510301 Binary files /dev/null and b/src/assets/images/Cifar100.png differ diff --git a/src/assets/images/LLM driven scenario generation.png b/src/assets/images/LLM driven scenario generation.png new file mode 100644 index 000000000..01879f52f Binary files /dev/null and b/src/assets/images/LLM driven scenario generation.png differ diff --git a/src/assets/images/Photograph.jpg b/src/assets/images/Photograph.jpg new file mode 100644 index 000000000..a2ce76dd0 Binary files /dev/null and b/src/assets/images/Photograph.jpg differ diff --git a/src/assets/images/SGID.png b/src/assets/images/SGID.png new file mode 100644 index 000000000..a1291583d Binary files /dev/null and b/src/assets/images/SGID.png differ diff --git a/src/assets/images/chat_with_pdfs.png b/src/assets/images/chat_with_pdfs.png new file mode 100644 index 000000000..afc0451ec Binary files /dev/null and b/src/assets/images/chat_with_pdfs.png differ diff --git a/src/assets/images/crewai_newsletter.png b/src/assets/images/crewai_newsletter.png new file mode 100644 index 000000000..459622f90 Binary files /dev/null and b/src/assets/images/crewai_newsletter.png differ diff --git a/src/assets/images/cyclegan.png b/src/assets/images/cyclegan.png new file mode 100644 index 000000000..6943d7e7b Binary files /dev/null and b/src/assets/images/cyclegan.png differ diff --git a/src/assets/images/llm and rl architecture.png b/src/assets/images/llm and rl architecture.png new file mode 100644 index 000000000..e5d485880 Binary files /dev/null and b/src/assets/images/llm and rl architecture.png differ diff --git a/src/assets/images/machine_translation.png b/src/assets/images/machine_translation.png new file mode 100644 index 000000000..9adbfc0dd Binary files /dev/null and b/src/assets/images/machine_translation.png differ diff --git a/src/assets/images/q_learning.png b/src/assets/images/q_learning.png new file mode 100644 index 000000000..a781f2aff Binary files /dev/null and b/src/assets/images/q_learning.png differ diff --git a/src/assets/images/sequence_models.png b/src/assets/images/sequence_models.png new file mode 100644 index 000000000..72e07cbba Binary files /dev/null and b/src/assets/images/sequence_models.png differ diff --git a/src/assets/images/stock_market_analysis_peft.png b/src/assets/images/stock_market_analysis_peft.png new file mode 100644 index 000000000..83254db00 Binary files /dev/null and b/src/assets/images/stock_market_analysis_peft.png differ diff --git a/src/assets/images/yolonas.png b/src/assets/images/yolonas.png new file mode 100644 index 000000000..e4199678b Binary files /dev/null and b/src/assets/images/yolonas.png differ diff --git a/src/assets/styles/Contact.scss b/src/assets/styles/Contact.scss index 5b0d13262..2cc4e276b 100644 --- a/src/assets/styles/Contact.scss +++ b/src/assets/styles/Contact.scss @@ -18,9 +18,15 @@ color: white; } - fieldset { + .MuiInputBase-root { background-color: white; } + + .MuiInputBase-input, + .MuiInputLabel-root, + .MuiFormHelperText-root { + color: #0d1116; + } } label { @@ -45,4 +51,14 @@ form { .body-form { width: 100% !important; margin-bottom: 15px !important; -} \ No newline at end of file +} + +.form-status { + margin-top: 10px; + color: #0d1116; + font-size: 0.95rem; +} + +.dark-mode .form-status { + color: white; +} diff --git a/src/assets/styles/Expertise.scss b/src/assets/styles/Expertise.scss index 785e150bc..e7a1724e9 100644 --- a/src/assets/styles/Expertise.scss +++ b/src/assets/styles/Expertise.scss @@ -2,7 +2,8 @@ padding: 5% 10%; display: flex; flex-direction: column; - text-align: left; + text-align: center; /* Center text */ + align-items: center; /* Center items horizontally */ svg { color: white; @@ -13,11 +14,13 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 50px; + justify-content: center; /* Center the grid */ + text-align: center; /* Center text within grid items */ } .skills-container .skills-grid .skill { align-items: center; - text-align: left; + text-align: center; /* Center individual skill sections */ } .chip { @@ -39,6 +42,7 @@ .flex-chips { line-height: 2; margin: 0.5; + justify-content: center; /* Center chips */ .chip-title { color: white; @@ -63,13 +67,17 @@ @media screen { @media (max-width: 768px) { .skills-container { - display: block; + display: flex; /* Ensure flex layout for smaller screens */ + flex-direction: column; + align-items: center; /* Center align items */ padding-left: 5%; padding-right: 5%; } .skills-container .skills-grid { - display: initial; + display: grid; + grid-template-columns: repeat(1, 1fr); /* Single column layout */ + justify-content: center; } .skills-container .skills-grid .skill { @@ -82,4 +90,4 @@ font-size: 12px; } } -} \ No newline at end of file +} diff --git a/src/assets/styles/Project.scss b/src/assets/styles/Project.scss index c63dd65e5..15d271285 100644 --- a/src/assets/styles/Project.scss +++ b/src/assets/styles/Project.scss @@ -14,6 +14,22 @@ .projects-container .projects-grid .project { text-align: left; } + +.projects-container .projects-grid .project .project-image { + display: block; + padding: 10px; + border-radius: 6px; +} + +.projects-container .projects-grid .project:nth-child(4n + 1) .project-image, +.projects-container .projects-grid .project:nth-child(4n + 2) .project-image { + background-color: rgba(255, 255, 255, 0.08); +} + +.light-mode .projects-container .projects-grid .project:nth-child(4n + 1) .project-image, +.light-mode .projects-container .projects-grid .project:nth-child(4n + 2) .project-image { + background-color: rgba(0, 0, 0, 0.05); +} .project h2:hover { text-decoration: underline; @@ -25,7 +41,7 @@ transition: transform .2s; margin: 0 auto; } - + .zoom:hover { transform: scale(1.05); } @@ -45,5 +61,17 @@ .projects-container .projects-grid .project { padding-bottom: 5%; } + + .projects-container .projects-grid .project:nth-child(odd) .project-image { + background-color: rgba(255, 255, 255, 0.08); + } + + .light-mode .projects-container .projects-grid .project:nth-child(odd) .project-image { + background-color: rgba(0, 0, 0, 0.05); + } + + .projects-container .projects-grid .project:nth-child(even) .project-image { + background-color: transparent; + } } -} \ No newline at end of file +} diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index f2a6ff54c..7c431e90a 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -1,52 +1,66 @@ import React, { useRef, useState } from 'react'; import '../assets/styles/Contact.scss'; -// import emailjs from '@emailjs/browser'; +import emailjs from '@emailjs/browser'; // Ensure this import is active import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import SendIcon from '@mui/icons-material/Send'; import TextField from '@mui/material/TextField'; function Contact() { - const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [message, setMessage] = useState(''); + const [isSending, setIsSending] = useState(false); + const [statusMessage, setStatusMessage] = useState(''); const [nameError, setNameError] = useState(false); const [emailError, setEmailError] = useState(false); const [messageError, setMessageError] = useState(false); - const form = useRef(); + const form = useRef(null); // Add TypeScript type + const serviceId = process.env.REACT_APP_EMAILJS_SERVICE_ID || ''; + const templateId = process.env.REACT_APP_EMAILJS_TEMPLATE_ID || ''; + const publicKey = process.env.REACT_APP_EMAILJS_PUBLIC_KEY || ''; - const sendEmail = (e: any) => { + const sendEmail = (e: React.FormEvent) => { e.preventDefault(); + setStatusMessage(''); setNameError(name === ''); setEmailError(email === ''); setMessageError(message === ''); - /* Uncomment below if you want to enable the emailJS */ + if (name !== '' && email !== '' && message !== '') { + if (!serviceId || !templateId || !publicKey) { + setStatusMessage('Email service is not configured yet.'); + return; + } + + const templateParams = { + name, + email, + message, + }; - // if (name !== '' && email !== '' && message !== '') { - // var templateParams = { - // name: name, - // email: email, - // message: message - // }; + setIsSending(true); + emailjs + .send(serviceId, templateId, templateParams, publicKey) + .then((response: any) => { + console.log('SUCCESS!', response.status, response.text); + setStatusMessage('Message sent successfully.'); + }) + .catch((error: any) => { + console.log('FAILED...', error); + setStatusMessage('Message failed to send. Please try again.'); + }) + .finally(() => { + setIsSending(false); + }); - // console.log(templateParams); - // emailjs.send('service_id', 'template_id', templateParams, 'api_key').then( - // (response) => { - // console.log('SUCCESS!', response.status, response.text); - // }, - // (error) => { - // console.log('FAILED...', error); - // }, - // ); - // setName(''); - // setEmail(''); - // setMessage(''); - // } + setName(''); + setEmail(''); + setMessage(''); + } }; return ( @@ -60,39 +74,45 @@ function Contact() { component="form" noValidate autoComplete="off" - className='contact-form' + className="contact-form" + onSubmit={sendEmail} // Attach the form submit handler > -
+
{ setName(e.target.value); }} error={nameError} - helperText={nameError ? "Please enter your name" : ""} + helperText={nameError ? 'Please enter your name' : ''} /> { setEmail(e.target.value); }} error={emailError} - helperText={emailError ? "Please enter your email or phone number" : ""} + helperText={emailError ? 'Please enter your email or phone number' : ''} />
- + {statusMessage !== '' && ( +

+ {statusMessage} +

+ )}
@@ -113,4 +138,4 @@ function Contact() { ); } -export default Contact; \ No newline at end of file +export default Contact; diff --git a/src/components/Expertise.tsx b/src/components/Expertise.tsx index 6e2f01680..f9c0a413f 100644 --- a/src/components/Expertise.tsx +++ b/src/components/Expertise.tsx @@ -1,91 +1,112 @@ import React from "react"; -import '@fortawesome/free-regular-svg-icons' +import '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faReact, faDocker, faPython } from '@fortawesome/free-brands-svg-icons'; +import { faChartLine, faBrain, faCogs } from '@fortawesome/free-solid-svg-icons'; import Chip from '@mui/material/Chip'; import '../assets/styles/Expertise.scss'; -const labelsFirst = [ - "React", - "TypeScript", - "JavaScript", - "HTML5", - "CSS3", - "SASS", - "Flask", +const dataScienceSkills = [ "Python", "SQL", - "PostgreSQL", - "Postman" + "Scikit-Learn", + "Azure Databricks", + "ETL Operations", + "Azure Data Factory", + "Power BI", + "Predictive Analytics", + "Pandas", + "NumPy", ]; -const labelsSecond = [ - "Git", - "GitHub Actions", - "Docker", - "AWS", - "Azure", - "Linux", - "Snowflake", - "Pandas", - "Selenium", +const machineLearningSkills = [ + "Clustering (K-Means, DBSCAN)", + "Sentiment Analysis", + "Topic Modeling (LDA)", + "Image Segmentation", + "Mask R-CNN", + "CycleGAN", + "Hyperparameter Tuning", + "Deep Reinforcement Learning", + "Q-Learning" ]; -const labelsThird = [ - "OpenAI", - "Groq", +const generativeAISkills = [ + "Fine-tuning LLMs", "LangChain", - "Qdrant", "Hugging Face", - "LlamaIndex", - "Streamlit", + "FAISS", + "RAG (Retrieval-Augmented Generation)", + "Sentence Transformers", + "Groq", + "Streamlit" ]; function Expertise() { return ( -
-
-

Expertise

-
-
- -

Full Stack Web Development

-

I have built a diverse array of web applications from scratch using modern technologies such as React and Flask. I have a strong proficiency in the SDLC process and frontend + backend development.

-
- Tech stack: - {labelsFirst.map((label, index) => ( - - ))} +
+
+

Expertise

+
+ {/* Data Science & Analytics */} +
+ +

Data Science & Analytics

+

+ I transform raw data into actionable insights through data pipelines, advanced analytics dashboards, + and ETL workflows, enabling organizations to uncover patterns, automate processes, and make confident + data-driven decisions. From building executive dashboards to extracting insights from complex datasets, + I excel at turning data into strategic value. +

+
+ Key skills: +
{/* This adds a line break */} + {dataScienceSkills.map((skill, index) => ( + + ))} +
-
-
- -

DevOps & Automation

-

Once the application is built, I help clients set up DevOps testing, CI/CD pipelines, and deployment automation to support the successful Go-Live.

-
- Tech stack: - {labelsSecond.map((label, index) => ( - - ))} + {/*Machine Learning & Computer Vision*/} +
+ +

Machine Learning & Computer Vision

+

+ I specialize in developing and deploying machine learning models to solve real-world problems, + including clustering, sentiment analysis, and object detection. In computer vision, + I’ve delivered solutions like advanced image segmentation and CycleGAN-based domain adaptation. + By optimizing models and tuning hyperparameters, I ensure accuracy and scalability in every implementation. +

+
+ Key skills: +
{/* This adds a line break */} + {machineLearningSkills.map((skill, index) => ( + + ))} +
-
-
- -

GenAI & LLM

-

Stay relevant in the market by leveraging the latest AI models in your projects. I have professional experience building enterprise grade GenAI-enabled solutions to empower intelligent decision making.

-
- Tech stack: - {labelsThird.map((label, index) => ( - - ))} + {/* Generative AI & NLP Research */} +
+ +

Generative AI & NLP Research

+

+ I leverage state-of-the-art AI technologies to fine-tune LLMs for enterprise challenges, design + Retrieval-Augmented Generation (RAG) systems for intelligent data retrieval, and implement NLP solutions + for extracting insights from unstructured text. Expertise with tools like LangChain and Hugging + Face enables me to build scalable, production-ready systems that drive innovation and efficiency. +

+
+ Key skills: +
{/* This adds a line break */} + {generativeAISkills.map((skill, index) => ( + + ))} +
-
); } -export default Expertise; \ No newline at end of file +export default Expertise; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index beebe11aa..8d215df29 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -7,10 +7,10 @@ function Footer() { return (
- - + +
-

A portfolio designed & built by Yuji Sato with 💜

+ {/*

A portfolio designed & built by Aradhya with 💜

*/}
); } diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 72a808243..cd9e3aea1 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -1,6 +1,7 @@ import React from "react"; import GitHubIcon from '@mui/icons-material/GitHub'; import LinkedInIcon from '@mui/icons-material/LinkedIn'; +import Photograph from '../assets/images/Photograph.jpg'; import '../assets/styles/Main.scss'; function Main() { @@ -9,19 +10,19 @@ function Main() {
- Avatar + Avatar
- - + +
-

Yuji Sato

-

Full Stack Engineer

+

Aradhya Dhruv

+

Research Associate at ATMRI (NTU) | MSc Artificial Intelligence | AI Researcher in Aviation Systems, Speech AI & LLM-driven Decision Support | Former Trainee Decision Scientist at Mu Sigma | Enabled Data-driven strategy for a leading Fortune 500 company

- - + +
@@ -29,4 +30,4 @@ function Main() { ); } -export default Main; \ No newline at end of file +export default Main; diff --git a/src/components/Project.tsx b/src/components/Project.tsx index 2c3c87e77..30ccba2ee 100644 --- a/src/components/Project.tsx +++ b/src/components/Project.tsx @@ -1,74 +1,179 @@ import React from "react"; -import mock01 from '../assets/images/mock01.png'; +import SGID from '../assets/images/SGID.png'; +import Cifar100 from '../assets/images/Cifar100.png'; +import sequence_models from '../assets/images/sequence_models.png'; +import machine_translation from '../assets/images/machine_translation.png'; +import crewai_newsletter from '../assets/images/crewai_newsletter.png'; +import cyclegan from '../assets/images/cyclegan.png'; +import yolonas from '../assets/images/yolonas.png'; +import chat_with_pdfs from '../assets/images/chat_with_pdfs.png'; +import stock_market_analysis_peft from '../assets/images/stock_market_analysis_peft.png'; +import q_learning from '../assets/images/q_learning.png'; import mock02 from '../assets/images/mock02.png'; -import mock03 from '../assets/images/mock03.png'; -import mock04 from '../assets/images/mock04.png'; -import mock05 from '../assets/images/mock05.png'; -import mock06 from '../assets/images/mock06.png'; -import mock07 from '../assets/images/mock07.png'; -import mock08 from '../assets/images/mock08.png'; -import mock09 from '../assets/images/mock09.png'; -import mock10 from '../assets/images/mock10.png'; +import llm_scenario_generation from '../assets/images/LLM driven scenario generation.png'; +import llm_rl_architecture from '../assets/images/llm and rl architecture.png'; + import '../assets/styles/Project.scss'; function Project() { - return( -
-

Personal Projects

-
-
- thumbnail -

Filmate AI

-

Developed movie finder app with semantic search and sentiment analysis using OpenAI GPT-3.5 Turbo, Qdrant, React, and Flask.

-
-
- thumbnail -

High Speed Chase

-

Designed, developed, and launched a 3D multiplayer racing game with C# and Unity. This is available on Itch.io for gamers worldwide to enjoy.

-
-
- thumbnail -

Astro Raiders

-

Developed and released a 2D shooting game with C# and Unity. This project is hosted on the Itch.io public marketplace.

-
-
- thumbnail -

Datum: Integrated Learning Platform

-

This is an online educational platform that provides high-quality, data science-focused learning resources in the Japanese language. I created the entire platform from scratch using Ruby on Rails.

-
-
- thumbnail -

WeManage: Real Estate Asset Management

-

This mobile application allows realtors in Japan to securely manage their property information and view future income predictions. This app is built with Ruby on Rails and JavaScript.

-
-
- thumbnail -

COVID-19 Case Management

-

Built official charts for COVID/vaccination tracking for an educational institution using JavaScript and the Google Sheets API v4. The dashboard served the university's leadership in their decision-making processes.

-
-
- thumbnail -

Multiple Regression Property Analysis

-

Analyzed the real estate market in Japan and predicted property prices by implementing statistical methods such as OLS and multi-regression analysis. This project leveraged Python and various libraries such as Pandas, NumPy, Matplotlib, and Scikit-Learn.

-
-
- thumbnail -

Programs of Study

-

Designed and developed a custom component for a CMS-based platform (e.g., 'Brightspot') using Java, Handlebars, and LESS. University students can find their majors of interest through this module.

-
-
- thumbnail -

Transfer Evaluation Matrix

-

Created an interactive CSV table generator with Java, Handlebars, and LESS. This project helps transfer students to quickly identify eligible credits.

-
-
- thumbnail -

Submeowrine

-

Developed and released an Android mobile application using Java and Android Studio that runs a 2D shooting game.

+ return ( +
+

Personal Projects

+
+ {/* LLM-powered air traffic scenario generation */} +
+ + LLM-driven scenario generation + +

LLM-powered Air Traffic Scenario Generation

+

+ Built a chat-based framework that uses LLMs plus Graph RAG on Neo4j to ingest ATC scenario PDFs and generate new, + diverse scenarios. The system injects controlled conflict cases, stores them back in the graph for validation and reuse, + and supports structured JSON and XML exports for simulation workflows. +

+
+ + {/* LLM-augmented RL for aviation decision support */} +
+ + LLM and RL architecture + +

LLM-augmented RL for Aviation Decision Support

+

+ Developed an LLM-guided PPO framework for aircraft conflict resolution and aviation decision support. Studied how LLM + guidance affects policy stability and reward convergence under complex operational dynamics. +

+
+ + {/* SGID - Semantic Guided Generative Image Augmentation */} +
+ + thumbnail + +

Semantic Guided Image Augmentation (SGID)

+

+ Implemented a novel image augmentation method for diffusion models leveraging Stable Diffusion, BLIP, and CLIP. + Developed an algorithm to maintain semantic consistency by generating captions and prompts, ensuring diversity + and improving image classification performance. Applied Gaussian noise for controlled augmentation. +

+
+ + {/* Image Classification on CIFAR-100 Dataset */} +
+ + thumbnail + +

Image Classification on CIFAR-100

+

+ Enhanced prediction accuracy on the CIFAR-100 dataset by applying advanced regularization techniques, including + cosine annealing and weight decay. Employed data augmentation strategies to prevent overfitting and improve + generalization in deep learning models. +

+
+ + {/* Sentiment Analysis Using Sequence Models */} +
+ + thumbnail + +

Sentiment Analysis with Sequence Models

+

+ Conducted an in-depth study of neural network architectures for sentiment analysis, including feedforward + networks, CNNs, LSTMs, and BiLSTMs. Evaluated performance using F1-score, precision, and recall, and analyzed + the impact of pre-trained embeddings and various optimization strategies. +

+
+ + {/* Seq-to-Seq Models for Machine Translation */} +
+ + thumbnail + +

Seq-to-Seq Models for Machine Translation

+

+ Implemented and compared Seq2Seq architectures, including LSTM, BiLSTM, and Transformer, for machine + translation tasks. Fine-tuned hyperparameters and evaluated models using BLEU scores to optimize + translation quality across languages. +

+
+ + {/* Newsletter Generator App Using CrewAI */} +
+ + thumbnail + +

Newsletter Generator with CrewAI

+

+ Developed an automated newsletter generation system using CrewAI. Designed an intuitive GUI for users to + input topics and personal messages. Implemented autonomous AI agents to summarize and format content, delivering + newsletters as downloadable HTML files. +

+
+ + {/* Image-Image Translation Using CycleGANs */} +
+ + thumbnail + +

Image-to-Image Translation with CycleGANs

+

+ Implemented CycleGANs for unpaired image-to-image translation, ensuring realistic domain adaptation + using adversarial training and cycle consistency loss. Demonstrated successful translation between + distinct image domains without paired data. +

+
+ + {/* Object Detection Using YOLO-NAS */} +
+ + thumbnail + +

Object Detection with YOLO-NAS

+

+ Built a real-time object detection interface using YOLO-NAS. Developed a Streamlit-based application + allowing users to upload images and videos and view detection results with high accuracy and efficiency. +

+
+ + {/* Chat with PDFs - LangChain and RAG */} +
+ + thumbnail + +

Chat with PDFs Using LangChain

+

+ Developed an application enabling users to query and retrieve content from PDFs using LangChain and RAG. + Integrated LLMs for accurate and contextualized responses, enhancing document comprehension. +

+
+ + {/* Stock Market Analysis with PEFT and News Summarization */} +
+ + thumbnail + +

Stock Market Analysis with PEFT

+

+ Automated financial analysis by integrating Parameter-Efficient Fine-Tuning (PEFT) and QLoRA for LLM optimization. + Incorporated sentiment analysis and summarization to provide actionable insights for stock market trends. +

+
+ + {/* Q-Learning for Cliff Box Pushing Task */} +
+ + thumbnail + +

Q-Learning for Cliff Box Pushing Task

+

+ Implemented Q-learning to solve a customized grid-world problem where an agent navigates, pushes a box, + and avoids cliffs to reach a goal. Designed and compared exploration strategies including Epsilon Decay, UCB, + and Standard Q-learning, achieving a 100% success rate. +

+
-
); } -export default Project; \ No newline at end of file +export default Project; diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx index 2345b3555..ba294a8d2 100644 --- a/src/components/Timeline.tsx +++ b/src/components/Timeline.tsx @@ -1,10 +1,10 @@ import React from "react"; -import '@fortawesome/free-regular-svg-icons' +import '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBriefcase } from '@fortawesome/free-solid-svg-icons'; -import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; +import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component'; import 'react-vertical-timeline-component/style.min.css'; -import '../assets/styles/Timeline.scss' +import '../assets/styles/Timeline.scss'; function Timeline() { return ( @@ -12,54 +12,105 @@ function Timeline() {

Career History

+ {/* Air Traffic Management Research Institute (ATMRI) */} } > -

Technology Consultant

-

Dallas, TX

+

Research Associate

+

Air Traffic Management Research Institute (ATMRI), Singapore

- Full-stack Web Development, GenAI/LLM, Project Management, Business Development + I develop and experiment with AI systems that improve multi-accent air traffic control speech recognition and information extraction, using deep learning, large language models, and knowledge graphs to support safer and more reliable aviation operations.

+ + {/* Stealth Startup */} + } + > +

AI Researcher

+

Pursoo (Startup), Singapore

+

+ Developed an AI-powered candidate recommendation platform with graph database similarity search, PII handling via Presidio, and advanced resume formatting using LLMs. +

+
+ + {/* NTU Student Assistant */} + } + > +

Student Assistant

+

Nanyang Technological University, Singapore

+

+ Developed a multi-agent RAG chatbot for course recommendations, integrating FAISS, Sentence Transformers, and LLaMA 3.1 models. +

+
+ + {/* Nanoveu */} + } + > +

AI Engineer

+

Nanoveu, Singapore

+

+ Reduced latency for 2D-to-3D conversion with Mask R-CNN and hyperparameter tuning on Deeplab V3 for segmentation quality. +

+
+ + {/* Mu Sigma */} } > -

Full Stack Engineer

-

Laie, HI

+

Decision Scientist

+

Mu Sigma, India

- Frontend Development, Backend Development, User Experience, Team Leading + Designed executive dashboards, built bankruptcy prediction models, and developed sentiment analysis tools, enabling strategic insights for a U.S. energy company.

+ + {/* Malviya National Institute of Technology */} } > -

Staff Engineer Intern

-

Laie, HI

+

Machine Learning Intern

+

MNIT, India

- Full-stack Development, API Development, User Experience + Developed classification models using TF-IDF and BoW for retail analytics, deriving insights from customer reviews and demographics.

+ + {/* NUS */} } > -

Data Analyst Intern

-

Tokyo, Japan

+

Machine Learning Intern

+

National University of Singapore

- Automation, Data Governance, Statistical Analysis + Built IoT systems for real-time analysis of RFID data using Azure IoT Hub and Power BI to optimize bus passenger congestion.

@@ -68,4 +119,4 @@ function Timeline() { ); } -export default Timeline; \ No newline at end of file +export default Timeline;