working front end

Author: rahat15

package-lock.json

@@ -6,15 +6,15 @@
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
-		"framer-motion": "4.1.17",
+		"framer-motion": "^4.1.17",
 		"postcss-cli": "^10.1.0",
 		"react": "^18.1.0",
 		"react-countup": "^6.1.1",
 		"react-dom": "^18.1.0",
-		"react-icons": "^4.3.1",
+		"react-icons": "^4.12.0",
 		"react-router-dom": "^6.0.2",
-		"react-scripts": "4.0.3",
-		"react-scroll": "^1.8.4",
+		"react-scripts": "^4.0.3",
+		"react-scroll": "^1.9.3",
 		"styled-components": "^5.3.3",
 		"web-vitals": "^1.0.1"
 	},

package.json

@@ -7,31 +7,31 @@ import AppHeader from './components/shared/AppHeader';
 import './css/App.css';
 import UseScrollToTop from './hooks/useScrollToTop';
 
+// Lazy load pages
 const About = lazy(() => import('./pages/AboutMe'));
 const Contact = lazy(() => import('./pages/Contact.jsx'));
 const Home = lazy(() => import('./pages/Home'));
 const Projects = lazy(() => import('./pages/Projects'));
 const ProjectSingle = lazy(() => import('./pages/ProjectSingle.jsx'));
-
+const Experience = lazy(() => import('./pages/Experience'));
+const Chatbot = lazy(() => import('./pages/Chatbot')); // 👈 Added chatbot page
 
 function App() {
 	return (
 		<AnimatePresence>
-			<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
+			<div className="bg-secondary-light dark:bg-primary-dark transition duration-300">
 				<Router>
 					<ScrollToTop />
 					<AppHeader />
 					<Suspense fallback={""}>
 						<Routes>
 							<Route path="/" element={<Home />} />
 							<Route path="projects" element={<Projects />} />
-							<Route
-								path="projects/single-project"
-								element={<ProjectSingle />}
-							/>
-
+							<Route path="project/:id" element={<ProjectSingle />} />
 							<Route path="about" element={<About />} />
 							<Route path="contact" element={<Contact />} />
+							<Route path="experience" element={<Experience />} />
+							<Route path="chatbot" element={<Chatbot />} /> {/* ✅ Chatbot Route */}
 						</Routes>
 					</Suspense>
 					<AppFooter />

public/images/experience/acm.png

@@ -2,37 +2,55 @@ import { useCountUp } from 'react-countup';
 import CounterItem from './CounterItem';
 
 const AboutCounter = () => {
-	useCountUp({ ref: 'experienceCounter', end: 12, duration: 2 });
-	useCountUp({ ref: 'githubStarsCounter', end: 20, duration: 2 });
-	useCountUp({ ref: 'feedbackCounter', end: 92, duration: 2 });
-	useCountUp({ ref: 'projectsCounter', end: 77, duration: 2 });
+	useCountUp({ ref: 'projectsCounter', end: 5, duration: 2 });
+	useCountUp({ ref: 'eventsCounter', end: 10, duration: 2 });
+	useCountUp({ ref: 'internshipsCounter', end: 3, duration: 2 });
+	useCountUp({ ref: 'publicationsCounter', end: 2, duration: 2 });
+	useCountUp({ ref: 'leadershipCounter', end: 3, duration: 2 });
+	useCountUp({ ref: 'bookCounter', end: 1, duration: 2 });
 
 	return (
 		<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
-			<div className="font-general-medium container mx-auto py-20 block sm:flex sm:justify-between items-center">
-				<CounterItem
-					title="Years of experience"
-					counter={<span id="experienceCounter" />}
-					measurement=""
-				/>
+			<div className="font-general-medium container mx-auto py-20 flex flex-col items-center justify-center">
+				
+				{/* Top Row */}
+				<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mb-12 w-full text-center">
+					<CounterItem
+						title="Research Projects"
+						counter={<span id="projectsCounter" />}
+						measurement="+"
+					/>
+					<CounterItem
+						title="Hackathons & Workshops"
+						counter={<span id="eventsCounter" />}
+						measurement="+"
+					/>
+					<CounterItem
+						title="Internships"
+						counter={<span id="internshipsCounter" />}
+						measurement=""
+					/>
+				</div>
 
-				<CounterItem
-					title="Stars on GitHub"
-					counter={<span id="githubStarsCounter" />}
-					measurement="k+"
-				/>
+				{/* Bottom Row */}
+				<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 w-full text-center">
+					<CounterItem
+						title="Publications"
+						counter={<span id="publicationsCounter" />}
+						measurement=""
+					/>
+					<CounterItem
+						title="Leadership Roles"
+						counter={<span id="leadershipCounter" />}
+						measurement=""
+					/>
+					<CounterItem
+						title="Books Authored"
+						counter={<span id="bookCounter" />}
+						measurement=""
+					/>
+				</div>
 
-				<CounterItem
-					title="Positive feedback"
-					counter={<span id="feedbackCounter" />}
-					measurement="%"
-				/>
-
-				<CounterItem
-					title="Projects completed"
-					counter={<span id="projectsCounter" />}
-					measurement="%"
-				/>
 			</div>
 		</div>
 	);

public/images/experience/gdg.png

@@ -1,18 +1,18 @@
 import { useContext } from 'react';
 import AboutMeContext from '../../context/AboutMeContext';
-import AboutClientSingle from './AboutClientSingle';
+import AboutTechSingle from './AboutTechSingle';
 
-const AboutClients = () => {
-	const { clientsData, clientsHeading } = useContext(AboutMeContext);
+const AboutTech = () => {
+	const { techStack, Heading } = useContext(AboutMeContext);
 
 	return (
 		<div className="mt-10 sm:mt-20">
 			<p className="font-general-medium text-2xl sm:text-3xl  text-center text-primary-dark dark:text-primary-light">
-				{clientsHeading}
+				{Heading}
 			</p>
 			<div className="grid grid-cols-2 sm:grid-cols-4 mt-10 sm:mt-14 gap-2">
-				{clientsData.map((client) => (
-					<AboutClientSingle
+				{techStack.map((client) => (
+					<AboutTechSingle
 						title={client.title}
 						image={client.img}
 						key={client.id}
@@ -23,4 +23,4 @@ const AboutClients = () => {
 	);
 };
 
-export default AboutClients;
+export default AboutTech;

public/images/experience/iit-awadh.png

@@ -0,0 +1,16 @@
+const AboutTechSingle = ({ title, image }) => {
+	return (
+		<div
+			title={title}
+			className="transform hover:scale-105 transition-transform duration-200 ease-in-out flex items-center justify-center h-12 w-20 bg-secondary-light border border-ternary-light dark:border-ternary-dark shadow-sm rounded-md mb-4 cursor-pointer p-2"
+		>
+			<img
+				src={image}
+				alt={title}
+				className="h-6 w-6 sm:h-8 sm:w-8 object-contain"
+			/>
+		</div>
+	);
+};
+
+export default AboutTechSingle;

public/images/experience/terafac.png

@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FiSend } from 'react-icons/fi';
+
+const ChatFullPage = () => {
+    const [input, setInput] = useState('');
+    const [conversation, setConversation] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const chatRef = useRef(null);
+
+    useEffect(() => {
+        const saved = sessionStorage.getItem('chatHistory');
+        if (saved) {
+            setConversation(JSON.parse(saved));
+        }
+    }, []);
+
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            sessionStorage.removeItem('chatHistory');
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, []);
+
+    useEffect(() => {
+        chatRef.current?.scrollTo(0, chatRef.current.scrollHeight);
+    }, [conversation, loading]);
+
+    const sendMessage = async (e) => {
+        e.preventDefault();
+        if (!input.trim()) return;
+
+        const userMessage = { sender: 'user', text: input };
+        const updated = [...conversation, userMessage];
+        setConversation(updated);
+        setInput('');
+        setLoading(true);
+
+        try {
+            const res = await fetch('https://rahat15-personal-chatbot.hf.space/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ question: input }),
+            });
+
+            const data = await res.json();
+            const botMessage = { sender: 'bot', text: data.answer };
+            const final = [...updated, botMessage];
+            setConversation(final);
+            sessionStorage.setItem('chatHistory', JSON.stringify(final));
+        } catch (err) {
+            console.error(err);
+            setConversation(prev => [...prev, { sender: 'bot', text: '⚠️ Error fetching response.' }]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="container mx-auto min-h-screen flex flex-col bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-100">
+
+
+            {/* Header - Centered, no border */}
+            <header className="w-full px-6 py-4 mt-10 text-center">
+                <h1 className="text-xl font-medium text-gray-800 dark:text-gray-200">
+                    Chat with RahBot
+                </h1>
+            </header>
+
+
+
+
+
+            <div className="mt-4 pt-2 pb-2 border-t-2 border-primary-light dark:border-secondary-dark"></div>
+
+
+            {/* Chat Area */}
+            <main
+                ref={chatRef}
+                className="flex-1 overflow-y-auto px-4 sm:px-8 py-6 w-full max-w-4xl mx-auto"
+            >
+                {conversation.map((msg, idx) => (
+                    <div
+                        key={idx}
+                        className={`mb-4 flex ${msg.sender === 'bot' ? 'justify-end' : 'justify-start'}`}
+                    >
+                        <div
+                            className="inline-block rounded-lg px-4 py-2 shadow-sm whitespace-pre-wrap break-words text-sm text-left"
+                            style={{
+                                backgroundColor: '#c7d2fe', // Your original indigo color
+                                color: '#1e1e1e',
+                                maxWidth: '80%',
+                                marginLeft: msg.sender === 'bot' ? 'auto' : '0' // Force right-side only for bot
+                            }}
+                        >
+                            <div className="text-xs font-medium mb-1 text-gray-700">
+                                {msg.sender === 'bot' ? 'RahBot' : 'You'}
+                            </div>
+                            {msg.text}
+                        </div>
+                    </div>
+                ))}
+
+                {loading && (
+                    <div className="text-sm italic text-center text-gray-500 dark:text-gray-400">
+                        RahBot is thinking...
+                    </div>
+                )}
+            </main>
+
+
+            <form
+                onSubmit={sendMessage}
+                className="w-full px-4 sm:px-8 py-4 bg-white dark:bg-gray-900"
+            >
+                <div className="w-full max-w-4xl mx-auto">
+                    <div className="relative flex items-center">
+                        <input
+                            type="text"
+                            className="w-full px-4 py-3 pr-11 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                            placeholder="Ask anything about Rahat..."
+                            value={input}
+                            onChange={(e) => setInput(e.target.value)}
+                        />
+
+                        {/* Embedded send button on right inside input */}
+                        <button
+                            type="submit"
+                            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-700 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-300"
+                        >
+                            <FiSend className="w-5 h-5" />
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+
+
+        </div>
+    );
+};
+
+export default ChatFullPage;