Ananya Biswas portfolio added

my-portfolio/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

my-portfolio/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

my-portfolio/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "my-portfolio",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emailjs/browser": "^4.4.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "emailjs": "^4.0.3",
+    "emailjs-com": "^3.2.0",
+    "i18next": "^23.12.2",
+    "lottie-react": "^2.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.0.0",
+    "react-lottie": "^1.2.4",
+    "react-scripts": "5.0.1",
+    "react-typed": "^2.0.12",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.7"
+  }
+}

my-portfolio/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/ab.png" type="image/png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <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>Ananya Biswas - Portfolio</title>
+  </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>

my-portfolio/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

my-portfolio/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

my-portfolio/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

my-portfolio/src/App.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import Navbar from "./components/Navbar";
+import animation from "./components/rocket.json";
+import Lottie from "lottie-react";
+import Name from "./components/name";
+import Resume from "./components/resume";
+import SocialMedia from "./components/socials";
+import About from "./components/about";
+import Skills from "./components/skills";
+import ContactForm from "./components/contact";
+
+function App() {
+  const [activeComponent, setActiveComponent] = useState("home");
+
+  const handleButtonClick = (buttonName) => {
+    setActiveComponent(buttonName.toLowerCase());
+  };
+
+
+  return (
+    <div>
+      <Navbar onButtonClick={handleButtonClick} className="pb-6 sm:pb-12 md:pb-16"/>
+      {activeComponent === "home" && (
+        <div className="lg:flex justify-center items-center flex-row flex-wrap sm:mt-12 md:mt-0">
+          <div className="lg:w-1/2 sm:w-full md:w-full pl-10 sm:pl-10 md:pl-14 ">
+            <Name className="mt-4 sm:mt-8 md:mt-12" />
+          </div>
+          <div className="lg:w-1/2 sm:w-full md:w-full hidden lg:block">  
+            <Lottie 
+              className="max-w-xs mx-auto"
+              loop={true} 
+              animationData={animation} 
+            />
+          </div>
+          <Resume/>
+          <SocialMedia/>
+        </div>
+      )}
+      {activeComponent === "about" && <About/>}
+      {activeComponent === "skills" && <Skills/>}
+      {activeComponent === "contact" && <ContactForm/>}
+    </div>
+  );
+}
+
+export default App;

my-portfolio/src/components/Navbar.css

@@ -0,0 +1,11 @@
+.nav-link {
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.3s ease-in-out;
+  display: inline-block;
+}
+
+.nav-link:hover {
+  color: pink;
+  transform: scale(1.1);
+}

my-portfolio/src/components/Navbar.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import "./Navbar.css";
+
+const Navbar = ({ onButtonClick }) => {
+  return (
+    <div className="flex justify-center items-center h-24 max-w-[1240px] mx-auto px-4 text-white mt-0">
+      <ul className="flex flex-row flex-wrap justify-center gap-1 md:gap-2 lg:gap-4">
+        <li className="p-2 md:p-4 font-normal text-xm md:text-xm lg:text-xl font-serif hover: transition duration-300 ease-in-out ">
+          <button onClick={() => onButtonClick("Home")} className="nav-link">
+            Home
+          </button>
+        </li>
+        <li className="p-2 md:p-4 font-normal text-xm md:text-xm lg:text-xl font-serif hover: transition duration-300 ease-in-out">
+          <button onClick={() => onButtonClick("about")} className="nav-link">
+            About
+          </button>
+        </li>
+        <li className="p-2 md:p-4 font-normal text-xm md:text-xm lg:text-xl font-serif hover: transition duration-300 ease-in-out">
+          <button onClick={() => onButtonClick("Skills")} className="nav-link">
+            Skills
+          </button>
+        </li>
+        <li className="p-2 md:p-4 font-normal text-xm md:text-xm lg:text-xl font-serif hover: transition duration-300 ease-in-out">
+          <button onClick={() => onButtonClick("Contact")} className="nav-link">
+            Contact
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default Navbar;

my-portfolio/src/components/about.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+const About = () => {
+  return (
+      <div className="lg:flex justify-center items-center flex-row flex-wrap sm:mt-12 md:mt-0">
+        <div className="lg:w-1/2 sm:w-full md:w-full pl-10 sm:pl-10 md:pl-14">
+          <h1 className="text-left font-bold text-xm md:text-xl lg:text-2xl font-serif text-white">Frontend</h1>
+          <h1 className="text-left font-bold text-xm md:text-xl lg:text-2xl font-serif text-white">Developer</h1>
+          <div className="h-0.5 w-40 md:w-3/4 lg:w-1/2 xl:w-1/3 bg-gray-200 mb-4"></div>
+          <div className="mt-4">
+            <p className="text-left font-light text-xm font-serif text-white">
+              I'm a frontend developer based in Kolkata, India. As a highly motivated and dedicated individual with a strong work ethic, I'm always looking to learn and grow, and I'm excited to see where my journey takes me.
+            </p>
+            <p className="mt-4 text-left font-light text-xm font-serif text-white">
+              Currently with an year of experience, I also put my time learning other essential technologies. I'm comfortable in my ability in adapting to new technologies, as well as to collaborate with cross-functional teams, drive projects forward and deliver accurate results. I'm always looking for new challenges to take on.
+            </p>
+          </div>
+        </div>
+        <div className="lg:w-1/2 sm:w-full md:w-full lg:pl-10 sm:pl-0 md:pl-0 lg:mt-0 sm:mt-12 md:mt-12">
+          <div className="flex flex-col justify-right items-center">
+            <div className="flex flex-col justify-between">
+            <div className="p-4">
+                <h2 className="text-left font-bold text-xm md:text-xl lg:text-2xl font-serif text-white">Nationality</h2>
+                <div className="mt-2">
+                  <ul className="list-none flex flex-wrap">
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Indian</li>
+                  </ul>
+                </div>
+              </div>
+            <div className="p-4">
+                <h2 className="text-left font-bold text-xm md:text-xl lg:text-2xl font-serif text-white">Hobbies</h2>
+                <div className="mt-2">
+                  <ul className="list-none flex flex-col flex-wrap gap-1">
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Coding</li>
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Reading</li>
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Martial Arts</li>
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Writing</li>
+                  </ul>
+                </div>
+              </div>
+              <div className="p-4">
+                <h2 className="text-left font-bold text-xm md:text-xl lg:text-2xl font-serif text-white">Language proficiencies</h2>
+                <div className="mt-2">
+                  <ul className="list-none flex flex-col flex-wrap gap-1">
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; English</li>
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Bengali</li>
+                    <li className="text-left font-light text-xm font-serif text-white inline">&bull; Hindi (Limited Working proficiency)</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default About;

my-portfolio/src/components/contact.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import emailjs from 'emailjs-com';
+
+const ContactForm = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setSending(true);
+
+    const templateParams = {
+      name: name,
+      email: email,
+      message: message
+    };
+
+    emailjs.send('service_8xg5dhb', 'template_epzjowd', templateParams, 'jgXIK96_CuQKdiheZ')
+     .then((response) => {
+        console.log('Email sent successfully!', response);
+        setSending(false);
+        setSent(true);
+        setName('');
+        setEmail('');
+        setMessage('')
+      })
+     .catch((error) => {
+        console.error('Error sending email:', error);
+        setSending(false);
+        setError(error);
+      });
+  };
+
+  return (
+    <div className="py-20 overflow-y-auto max-h-screen md:max-h-full">
+      <div className="flex items-center justify-center mb-10">
+        <h2 className="text-2xl font-light text-white">Heyo, lets connect</h2>
+      </div>
+      
+      <form onSubmit={handleSubmit} className="max-w-md mx-auto p-10 rounded-md shadow-md">
+        <div className="mb-5">
+          <label htmlFor="name" className="block text-white">Name:</label>
+          <input
+            type="text"
+            id="name"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            className="w-full lg:w-full md:w-3/4 sm:w-2/3 xs:w-full text-black p-2 rounded-md"
+          />
+        </div>
+        <div className="mb-5">
+          <label htmlFor="email" className="block text-white">Email:</label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            className="w-full lg:w-full md:w-3/4 sm:w-2/3 xs:w-full text-black p-2 rounded-md"
+          />
+        </div>
+        <div className="mb-5">
+          <label htmlFor="message" className="block text-white">Your Message:</label>
+          <textarea
+            id="message"
+            value={message}
+            onChange={(event) => setMessage(event.target.value)}
+            className="w-full lg:w-full md:w-3/4 sm:w-2/3 xs:w-full text-black p-2 rounded-md"
+          />
+        </div>
+        {sending? (
+          <button type="submit" disabled className="w-full lg:w-full md:w-1/2 sm:w-2/3 xs:w-full text-white p-2 bg-[#191825] rounded-md hover:bg-white hover:text-black border border-gray-300">
+            Sending...
+          </button>
+        ) : (
+          <button type="submit" className="w-full lg:w-full md:w-1/2 sm:w-2/3 xs:w-full text-white p-2 bg-[#191825] rounded-md hover:bg-white hover:text-black border border-gray-300">
+            Send
+          </button>
+        )}
+        {sent? (
+          <p className="text-green-500">Email sent successfully!</p>
+        ) : (
+          error && (
+            <p className="text-red-500">Error sending email: {error.message}</p>
+          )
+        )}
+      </form>
+    </div>
+  );
+};
+
+export default ContactForm;

my-portfolio/src/components/lang/en.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Welcome to my portfolio"
+}

my-portfolio/src/components/lang/french.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "bienvenue sur mon Portfolio"
+}

my-portfolio/src/components/lang/german.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Willkommen in meinem Portfolio"
+}

my-portfolio/src/components/lang/latin.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Receperint meis portfolio"
+}

my-portfolio/src/components/lang/span.json

@@ -0,0 +1,3 @@
+{
+    "welcome": "Bienvenido a mi portafolio"
+}

my-portfolio/src/components/name.css

@@ -0,0 +1,4 @@
+.name {
+    position: relative;
+    left: 10rem;
+}

my-portfolio/src/components/name.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Name = () => {
+    return (
+        <div className="flex items-center text-right h-24 max-w-[1240px] mx-auto md:mt-0 mt-10 lg:p-40 pl-0">
+            <div className="flex flex-col flex-wrap gap-2 text-white text-left md:justify-start">
+                <h1 className='text-left font-semibold text-5xl md:text-7xl lg:text-8xl font-serif text-white'>Ananya</h1>
+                <h1 className='text-left md:pb-2 pt-1 md:pt-0 pb-3 leading-10 font-semibold text-5xl md:text-7xl lg:text-8xl font-serif'>Biswas</h1>
+                
+                <div className="mt-5">
+                    <p className='text-left font-medium text-xl md:text-2xl lg:text-4xl font-serif text-white'>I am a passionate</p>
+                    <p className='text-left font-medium text-xl md:text-2xl lg:text-4xl font-serif text-white'>frontend developer</p>
+                </div>
+                
+            </div>
+        </div>
+        
+    );
+};
+
+export default Name;

my-portfolio/src/components/resume.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Resume = () => {
+  return (
+    <div className="mt-10 md:mt-30 sm:mt-30 w-full md:flex sm:flex md:text-left sm:text-left"> 
+      <button
+        className="mt-10 md:mt-20 sm:mt-0 lg:mt-0 xl:-mt-10 bg-[#191825] p-3 font-semibold text-xm md:text-xs lg:text-xl border rounded shadow-md text-white hover:bg-white hover:text-black transition duration-300 ml-10 lg:ml-60 xl:ml-80"
+        onClick={() => window.open("https://drive.google.com/file/d/1NCvdKWh741Ceiw1-EmtSBgAooK6j8Ebf/view?usp=drivesdk ")}
+      >
+        View Resume
+      </button>
+    </div>
+  );
+};
+
+export default Resume;

my-portfolio/src/components/skills.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import CLogo from "./skills/c.png";
+import CPPLogo from "./skills/cpp.png";
+import DockerLogo from "./skills/docker.png";
+import FlaskLogo from "./skills/flask.svg";
+import GitLogo from "./skills/git.png";
+import GitLabLogo from "./skills/gitlab.png";
+import HTMLLogo from "./skills/html.png";
+import JavaLogo from "./skills/java.png";
+import JSLogo from "./skills/js.png";
+import KubLogo from "./skills/k8s.png";
+import LinuxLogo from "./skills/linux.svg";
+import MongoLogo from "./skills/mongo.png";
+import SQLLogo from "./skills/mysql.svg";
+import PythonLogo from "./skills/python.svg";
+import ReactLogo from "./skills/react.png";
+import SelLogo from "./skills/selenium.svg";
+import TailwindLogo from "./skills/tailwind.png";
+import VimLogo from "./skills/vim.png";
+import BashLogo from "./skills/bash.svg";
+import animation from "./skill.json"
+import Lottie from "react-lottie";
+
+const Skills = () => {
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animation
+  };
+  
+  return (
+    <div className="flex flex-wrap justify-center">
+      <div className="lg:w-1/2 xl:w-1/2 md:w-full sm:w-full"></div>
+        <div className="container mx-auto p-4 lg:ml-40 lg:mt-20 overflow-x-hidden lg:w-1/2 ">
+          <h1 className="text-left font-semibold text-3xl font-serif text-white mb-10 md:mr-30 lg:w-1/2 lg:text-left">My Tech Stack</h1>
+          <div className="flex flex-wrap flex-col justify-center ">
+            <div className="skill-group flex flex-row items-center mb-4 ">
+              <h2 className="text-left font-light text-xl font-serif text-white mr-8">DevOps</h2>
+              <div className="flex flex-row justify-center items-center">
+                <img src={DockerLogo} alt="Docker" className="w- h-10 mr-2" />
+                <img src={KubLogo} alt="Kubernetes" className="w-10 h-10 mr-2" />
+                <img src={SelLogo} alt="Selenium" className="w-10 h-10 mr-2" />
+                <img src={BashLogo} alt="Bash" className="w-10 h-10 mr-2" />
+              </div>
+            </div>
+            <div className="skill-group flex flex-row items-center mb-4 lg:w-1/2">
+              <h2 className="text-left font-light text-xl font-serif text-white mr-8">Web Dev</h2>
+              <div className="flex flex-row justify-center items-center">
+                <img src={HTMLLogo} alt="HTML" className="w-10 h-10 mr-2" />
+                <img src={JSLogo} alt="JavaScript" className="w-10 h-10 mr-2" />
+                <img src={ReactLogo} alt="React" className="w-10 h-10 mr-2" />
+                <img src={TailwindLogo} alt="Tailwind" className="w-10 h-10 mr-2" />
+                <img src={MongoLogo} alt="MongoDB" className="w-10 h-10 mr-2" />
+                <img src={SQLLogo} alt="MySQL" className="w-10 h-10 mr-2" />
+              </div>
+            </div>
+            <div className="skill-group flex flex-row items-center mb-4 lg:w-1/2">
+              <h2 className="text-left font-light text-xl font-serif text-white mr-4">Languages</h2>
+              <div className="flex flex-row justify-center items-center">
+                <img src={CLogo} alt="C" className="w-10 h-10 mr-2" />
+                <img src={CPPLogo} alt="C++" className="w-10 h-10 mr-2" />
+                <img src={JavaLogo} alt="Java" className="w-10 h-10 mr-2" />
+                <img src={PythonLogo} alt="Python" className="w-10 h-10 mr-2" />
+              </div>
+            </div>
+            <div className="skill-group flex flex-row items-center mb-4 lg:w-1/2">
+              <h2 className="text-left font-light text-xl font-serif text-white mr-4">Other Skills</h2>
+              <div className="flex flex-row justify-center items-center">
+                <img src={FlaskLogo} alt="Flask" className="w-10 h-10 mr-2" />
+                <img src={GitLogo} alt="Git" className="w-10 h-10 mr-2" />
+                <img src={GitLabLogo} alt="GitLab" className="w-10 h-10 mr-2" />
+                <img src={LinuxLogo} alt="Linux" className="w-10 h-10 mr-2" />
+                <img src={VimLogo} alt="Vim" className="w-10 h-10 mr-2" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="hidden lg:block justify-end mr-20 lg:mr-20">
+          <Lottie 
+           options={defaultOptions}
+           height={400} 
+           width={400}
+           />
+        </div>
+      </div>
+
+        
+  );
+};
+
+export default Skills;

my-portfolio/src/components/skills/bash.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="224px" height="256px" viewBox="0 0 224 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+				<path d="M207.953496,52.161792 L127.317154,4.28699154 C117.73318,-1.42899718 105.786545,-1.42899718 96.2025707,4.28699154 L15.5500822,52.161792 C5.848665,58.0143618 -0.0579442252,68.5395346 0.000428679482,79.8694336 L0.000428679482,175.602888 C-0.0522462707,186.927041 5.85362572,197.444768 15.5500822,203.294383 L96.186424,251.153037 C105.771373,256.86549 117.716059,256.86549 127.301008,251.153037 L207.937349,203.294383 C217.644962,197.44581 223.55812,186.9199 223.50315,175.586741 L223.50315,79.8694336 C223.561523,68.5395346 217.654913,58.0143618 207.953496,52.161792 Z" fill="#FFFFFF"></path>
+				<path d="M208.411532,52.276683 L127.597582,4.29643402 C117.992498,-1.43214467 106.019549,-1.43214467 96.4144654,4.29643402 L15.5843327,52.276683 C5.86154721,58.1421436 -0.0580718526,68.6904991 0.000429623687,80.0453532 L0.000429623687,175.989669 C-0.0523613478,187.338765 5.86651886,197.879657 15.5843327,203.742157 L96.3982832,251.706224 C106.004343,257.431259 117.975339,257.431259 127.581399,251.706224 L208.39535,203.742157 C218.124345,197.880703 224.050527,187.331607 223.995435,175.973487 L223.995435,80.0453532 C224.053937,68.6904991 218.134318,58.1421436 208.411532,52.276683 Z M99.2301697,246.803014 L18.4162192,198.838948 C10.4300926,193.999639 5.56585934,185.327547 5.59969728,175.989669 L5.59969728,80.0453532 C5.56264048,70.7066408 10.4277023,62.033071 18.4162192,57.1960744 L99.2301697,9.21582548 C107.095348,4.52357839 116.900517,4.52357839 124.765695,9.21582548 L205.514917,57.1960744 C212.17156,61.2279088 216.712503,67.9889997 217.926671,75.6761569 C215.240424,69.9638372 209.20446,68.3941629 202.1652,72.4397151 L125.768992,119.756494 C116.237671,125.306991 109.214593,131.569506 109.19841,143.058874 L109.19841,237.271693 C109.19841,244.149132 111.965568,248.59924 116.237671,249.909999 C114.838668,250.166379 113.420175,250.301731 111.997932,250.314554 C107.503971,250.311263 103.093756,249.098314 99.2301697,246.803014 Z" fill="#2F3A3E"></path>
+				<path d="M187.007319,185.05984 L166.920894,197.072944 C166.382945,197.289147 166.022425,197.801466 166.000535,198.380822 L166.000535,203.660774 C166.000535,204.30664 166.436494,204.564987 166.969334,204.2582 L187.362545,191.857577 C187.861962,191.483188 188.100868,190.854486 187.976118,190.242913 L187.976118,185.608826 C187.959971,185.0114 187.491719,184.753054 187.007319,185.05984 Z" fill="#3AB14A"></path>
+				<path d="M144.262952,140.831868 C144.908817,140.508935 145.441657,140.831868 145.457803,141.752226 L145.52239,148.75987 C147.937868,147.662506 150.63266,147.335523 153.240486,147.823365 C153.741032,147.952538 153.950938,148.630697 153.757179,149.438029 L152.223247,155.5899 C152.106964,156.054178 151.867023,156.478259 151.528942,156.817045 C151.410206,156.934194 151.274035,157.032237 151.125276,157.107685 C150.94275,157.206405 150.732219,157.240546 150.52785,157.204565 C147.984993,156.641458 145.323113,157.068744 143.084247,158.399417 C139.810579,159.87411 137.670697,163.093345 137.578241,166.682645 C137.578241,169.911974 139.192905,170.800039 144.828084,170.896919 C152.271687,171.026092 155.501016,174.271568 155.581749,181.779758 C155.404525,189.616874 151.790949,196.979831 145.700003,201.914623 L145.829176,208.793094 C145.817697,209.647405 145.37394,210.437656 144.650471,210.892157 L140.581517,213.233421 C139.935651,213.556354 139.402812,213.233421 139.386665,212.329209 L139.386665,205.563765 C135.89899,207.016963 132.362875,207.356042 130.102345,206.45183 C129.682532,206.290364 129.488772,205.660645 129.666385,204.934046 L131.13573,198.717587 C131.24746,198.225629 131.499922,197.776809 131.862329,197.425856 C131.977267,197.315759 132.107853,197.223261 132.249848,197.151363 C132.460373,197.056728 132.701336,197.056728 132.911861,197.151363 C135.790274,197.931772 138.860474,197.542919 141.453436,196.069538 C145.195213,194.264929 147.626918,190.533412 147.766774,186.381551 C147.766774,182.893876 145.845323,181.440678 141.308116,181.408385 C135.446884,181.408385 130.005465,180.27812 129.892438,171.720398 C130.027305,164.244122 133.498017,157.21978 139.354372,152.570478 L139.063732,145.530541 C139.061125,144.663931 139.507025,143.857647 140.242437,143.399184 L144.262952,140.831868 Z" fill="#FFFFFF"></path>
+    </g>
+</svg>

my-portfolio/src/components/skills/mysql.svg

@@ -0,0 +1,9 @@
+
+  <svg width="48" height="48" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    
+        <g transform="translate(0, 0)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none" viewBox="0 0 256 256"><rect width="256" height="256" fill="#242938" rx="60"/><g clip-path="url(#clip0_7_147)"><path fill="#fff" fill-rule="evenodd" d="M203.801 178.21C194.011 177.938 186.416 178.941 180.051 181.619C178.218 182.355 175.277 182.355 175.035 184.662C176.015 185.63 176.133 187.214 176.992 188.556C178.459 190.991 181.033 194.271 183.357 195.973L191.191 201.571C195.965 204.488 201.351 206.193 206.002 209.113C208.696 210.817 211.388 213.007 214.082 214.834C215.454 215.807 216.285 217.392 218 217.997V217.629C217.144 216.538 216.897 214.957 216.044 213.735L212.367 210.209C208.82 205.465 204.41 201.325 199.636 197.922C195.718 195.245 187.152 191.596 185.56 187.097L185.319 186.824C188.008 186.552 191.191 185.605 193.764 184.875C197.929 183.784 201.721 184.024 206.002 182.93L211.882 181.226V180.135C209.678 177.946 208.087 175.025 205.763 172.959C199.521 167.606 192.661 162.373 185.56 157.994C181.766 155.562 176.868 153.977 172.829 151.913C171.356 151.182 168.911 150.817 168.055 149.601C165.846 146.929 164.625 143.397 163.034 140.232L152.997 119.064C150.794 114.319 149.444 109.574 146.755 105.195C134.144 84.5124 120.431 71.9828 99.375 59.6932C94.8477 57.1382 89.4616 56.0393 83.7353 54.7032L74.5546 54.2124C72.5928 53.3616 70.6364 51.0493 68.9216 49.9531C61.9441 45.5739 43.9475 36.0847 38.8029 48.5897C35.4966 56.4974 43.7006 64.2824 46.4855 68.299C48.5708 71.0966 51.2597 74.2597 52.7332 77.4228C53.5563 79.4897 53.8307 81.682 54.6895 83.8717C56.6458 89.2243 58.4842 95.1878 61.0551 100.178C62.427 102.733 63.8675 105.413 65.5824 107.723C66.5619 109.086 68.2768 109.67 68.6417 111.859C66.9268 114.294 66.8089 117.94 65.8293 120.986C61.42 134.734 63.1349 151.766 69.377 161.888C71.3389 164.928 75.9622 171.622 82.2345 169.065C87.744 166.875 86.5148 159.941 88.1062 153.857C88.4766 152.399 88.2297 151.425 88.9623 150.449V150.722L93.9834 160.819C97.7781 166.78 104.391 172.986 109.897 177.125C112.833 179.315 115.16 183.089 118.831 184.425V184.057H118.59C117.854 182.966 116.751 182.475 115.772 181.624C113.569 179.435 111.121 176.757 109.406 174.325C104.267 167.513 99.7399 159.968 95.6983 152.183C93.7365 148.412 92.0216 144.275 90.4357 140.504C89.6949 139.043 89.6949 136.85 88.4739 136.125C86.6355 138.797 83.9466 141.115 82.5939 144.398C80.2672 149.628 80.0257 156.077 79.1697 162.769C78.6758 162.891 78.8953 162.769 78.6758 163.041C74.7631 162.071 73.4132 158.051 71.9453 154.648C68.274 146.01 67.6594 132.141 70.8422 122.164C71.6983 119.609 75.375 111.579 73.9071 109.146C73.1662 106.834 70.7242 105.498 69.3743 103.671C67.7829 101.359 66.0735 98.4409 64.9705 95.8859C62.0346 89.0689 60.5667 81.5293 57.3812 74.7151C55.9077 71.552 53.3396 68.2662 51.257 65.3486C48.9303 62.0628 46.3648 59.7505 44.5265 55.8593C43.9146 54.4959 43.0585 52.3309 44.0381 50.8693C44.2795 49.8959 44.7734 49.5059 45.7475 49.2878C47.3389 47.9244 51.8716 49.6532 53.463 50.3785C57.9903 52.2054 61.7849 53.907 65.5796 56.4592C67.2945 57.6754 69.1329 59.9877 71.3361 60.5985H73.9098C77.8279 61.4493 82.2317 60.8712 85.9002 61.9619C92.3893 64.0343 98.2637 67.0719 103.532 70.3604C119.567 80.4577 132.792 94.8143 141.725 111.971C143.193 114.769 143.805 117.324 145.155 120.244C147.729 126.208 150.912 132.289 153.477 138.132C156.051 143.85 158.498 149.694 162.17 154.438C164.008 156.993 171.35 158.329 174.654 159.668C177.104 160.759 180.896 161.741 183.105 163.077C187.264 165.632 191.427 168.552 195.342 171.35C197.298 172.806 203.423 175.849 203.787 178.276L203.801 178.21ZM78.9584 72.4873C77.267 72.4724 75.5809 72.6769 73.9427 73.0954V73.3681H74.1842C75.1637 75.315 76.8786 76.6538 78.1023 78.3581L80.9202 84.1989L81.1616 83.9262C82.8765 82.71 83.7353 80.7631 83.7353 77.8454C83 76.9947 82.8793 76.1412 82.2674 75.2904C81.5321 74.0743 79.9407 73.4635 78.9584 72.4928V72.4873Z" clip-rule="evenodd"/></g><defs><clipPath id="clip0_7_147"><rect width="180" height="180" fill="#fff" transform="translate(38 38)"/></clipPath></defs></svg>
+        </g>
+        
+  </svg>
+  

my-portfolio/src/components/skills/python.svg

@@ -0,0 +1,9 @@
+
+  <svg width="48" height="48" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    
+        <g transform="translate(0, 0)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none" viewBox="0 0 256 256"><rect width="256" height="256" fill="#242938" rx="60"/><path fill="url(#paint0_linear_2_47)" d="M127.279 29C76.5066 29 79.6772 51.018 79.6772 51.018L79.7338 73.8284H128.185V80.6772H60.4893C60.4893 80.6772 28 76.9926 28 128.222C28 179.452 56.3573 177.636 56.3573 177.636H73.2812V153.863C73.2812 153.863 72.369 125.506 101.186 125.506H149.24C149.24 125.506 176.239 125.942 176.239 99.4123V55.5461C176.239 55.5461 180.338 29 127.279 29ZM100.563 44.339C105.384 44.339 109.28 48.2351 109.28 53.0556C109.28 57.8761 105.384 61.7723 100.563 61.7723C95.7426 61.7723 91.8465 57.8761 91.8465 53.0556C91.8465 48.2351 95.7426 44.339 100.563 44.339Z"/><path fill="url(#paint1_linear_2_47)" d="M128.721 227.958C179.493 227.958 176.323 205.941 176.323 205.941L176.266 183.13H127.815V176.281H195.511C195.511 176.281 228 179.966 228 128.736C228 77.5062 199.643 79.323 199.643 79.323H182.719V103.096C182.719 103.096 183.631 131.453 154.814 131.453H106.76C106.76 131.453 79.7607 131.016 79.7607 157.546V201.412C79.7607 201.412 75.6615 227.958 128.721 227.958ZM155.437 212.619C150.616 212.619 146.72 208.723 146.72 203.903C146.72 199.082 150.616 195.186 155.437 195.186C160.257 195.186 164.154 199.082 164.154 203.903C164.154 208.723 160.257 212.619 155.437 212.619Z"/><defs><linearGradient id="paint0_linear_2_47" x1="47.22" x2="146.333" y1="46.896" y2="145.02" gradientUnits="userSpaceOnUse"><stop stop-color="#387EB8"/><stop offset="1" stop-color="#366994"/></linearGradient><linearGradient id="paint1_linear_2_47" x1="108.056" x2="214.492" y1="109.905" y2="210.522" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE052"/><stop offset="1" stop-color="#FFC331"/></linearGradient></defs></svg>
+        </g>
+        
+  </svg>
+  

my-portfolio/src/components/skills/selenium.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="269px" viewBox="0 0 256 269" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M234.152874,0.00343857381 C234.808025,-0.0379575263 235.429647,0.297028821 235.755341,0.866994098 C236.081036,1.43695938 236.054047,2.14258032 235.685767,2.68600216 L235.685767,2.68600216 L169.388124,92.7434941 C168.902258,93.2919104 168.204691,93.6058549 167.472007,93.6058549 C166.739323,93.6058549 166.041756,93.2919104 165.55589,92.7434941 L165.55589,92.7434941 L142.179265,66.684305 C141.608302,66.0916135 140.79919,65.7901017 139.979599,65.86461 C139.160008,65.9391182 138.418531,66.3815927 137.963808,67.0675283 L137.963808,67.0675283 L123.784543,85.0790267 C123.335922,86.0932522 123.483294,87.2722249 124.167766,88.1448137 L124.167766,88.1448137 L166.322337,131.832278 C166.808203,132.380694 167.50577,132.694639 168.238454,132.694639 C168.971138,132.694639 169.668705,132.380694 170.154571,131.832278 L170.154571,131.832278 L252.930819,38.708999 C253.419531,38.1837537 254.176911,38.0053627 254.848672,38.2572733 C255.520434,38.5091839 255.973764,39.1415911 255.996606,39.8586691 L255.996606,39.8586691 L255.996606,266.343681 C256.028319,266.860939 255.83665,267.366955 255.470206,267.733398 C255.103763,268.099842 254.597747,268.291511 254.080489,268.259798 L254.080489,268.259798 L1.91951123,268.259798 C1.40225345,268.291511 0.896236952,268.099842 0.529793658,267.733398 C0.163350364,267.366955 -0.0283193115,266.860939 0.00339438157,266.343681 L0.00339438157,266.343681 L0.00339438157,1.91955542 C-0.0283193115,1.40229764 0.163350364,0.896281144 0.529793658,0.52983785 C0.896236952,0.163394556 1.40225345,-0.0282751193 1.91951123,0.00343857381 L1.91951123,0.00343857381 Z M169.004901,152.909563 C157.595908,152.708949 146.600443,157.179283 138.568082,165.284007 C130.535722,173.388731 126.164179,184.423846 126.467107,195.830581 C126.467107,222.272993 145.628275,239.134822 170.537794,239.134822 C182.068736,239.421769 193.375993,235.921903 202.728557,229.171014 C203.595534,228.383773 203.758299,227.081655 203.111781,226.105227 L203.111781,226.105227 L196.21376,215.758196 C195.438224,214.868953 194.118537,214.703992 193.147973,215.374973 C187.152367,219.469543 180.095799,221.73297 172.837134,221.88977 C159.424316,221.88977 150.993402,213.458856 149.460509,203.495048 C149.488325,203.083823 149.815731,202.756417 150.226955,202.728601 L150.226955,202.728601 L208.093684,202.728601 C209.327358,202.645153 210.309577,201.662935 210.393025,200.429261 L210.393025,200.429261 L210.393025,198.129921 C210.393025,171.304285 193.531196,152.909563 169.004901,152.909563 Z M111.904618,138.347075 C100.26487,128.832771 85.5368757,123.923439 70.5164945,124.551034 C44.4573053,124.551034 28.3619238,139.879969 28.3619238,158.27469 C28.3619238,200.046038 91.9770032,186.63322 91.9770032,206.177612 C91.9770032,212.309186 85.8454293,218.44076 72.8158347,218.44076 C60.4410031,218.54287 48.5018438,213.876992 39.4754015,205.411165 C38.9365113,204.907341 38.2064628,204.660494 37.4723971,204.733901 C36.7383313,204.807307 36.0716199,205.19383 35.6431678,205.794388 L35.6431678,205.794388 L25.6793602,219.59043 C25.0328421,220.566858 25.1956068,221.868976 26.0625835,222.656217 C36.4096145,232.236801 50.9721026,238.751598 71.2829412,238.751598 C101.174364,238.751598 115.736852,223.422663 116.503299,203.495048 C116.503299,162.106924 52.8882195,173.986849 52.8882195,156.358574 C52.8882195,149.843776 58.63657,145.245096 68.6003776,145.245096 C79.5839899,145.094583 90.2811092,148.750561 98.8750239,155.592127 C99.3802624,156.006036 100.031063,156.198722 100.680205,156.126595 C101.329346,156.054468 101.921977,155.723624 102.324034,155.208903 L102.324034,155.208903 L112.287842,141.796086 C112.701751,141.290847 112.894437,140.640046 112.82231,139.990905 C112.750183,139.341763 112.419339,138.749133 111.904618,138.347075 Z M169.388124,169.771392 C179.811439,169.188344 188.809537,176.998014 189.698963,187.399667 C189.671147,187.810891 189.34374,188.138297 188.932516,188.166113 L188.932516,188.166113 L149.843732,188.166113 C149.432507,188.138297 149.105101,187.810891 149.077285,187.399667 C150.358676,177.20234 159.111948,169.60516 169.388124,169.771392 Z" fill="#2CB134"></path>
+    </g>
+</svg>

my-portfolio/src/components/socials.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import MastodonLogo from "./images/mastodon.png";
+import InstagramLogo from "./images/insta.png";
+import TwitterLogo from "./images/x.png";
+import LinkedInLogo from "./images/linkedin.png";
+import GithubLogo from "./images/github.png";
+import PinterestLogo from "./images/pinterest.png";
+
+const SocialMedia = () => {
+  return (
+    <div className="flex justify-center mb-10 mt-10">
+      <div className="lg:grid lg:grid-cols-6 lg:justify-items-end gap-0.5 md:gap-1 lg:gap-2 xl:gap-2">
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://mastodon.social/@captain_obvious", "_blank")}
+        >
+          <img src={MastodonLogo} alt="Mastodon Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://instagram.com/thegraffiti.mind/", "_blank")}
+        >
+          <img src={InstagramLogo} alt="Instagram Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://x.com/not_average_x", "_blank")}
+        >
+          <img src={TwitterLogo} alt="Twitter Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://www.linkedin.com/in/ananya-biswas-kiit/", "_blank")}
+        >
+          <img src={LinkedInLogo} alt="LinkedIn Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://github.com/ananyab1909", "_blank")}
+        >
+          <img src={GithubLogo} alt="Github Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+        <button
+          className="text-white font-bold py-2 px-4 rounded hover:scale-110 transition duration-300"
+          onClick={() => window.open("https://in.pinterest.com/bananya1909/", "_blank")}
+        >
+          <img src={PinterestLogo} alt="Pinterest Logo" className="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-8 lg:h-8 xl:w-8 xl:h-8" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SocialMedia;

my-portfolio/src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+body{
+    background-color: #191825;
+}

my-portfolio/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+

my-portfolio/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}",],
+  theme: {
+    extend: {},
+    fontFamily:{
+      rubix: ["Rubik", "sans-serif"],
+      poppins:["Poppins", "sans-serif"]
+    }
+  },
+  plugins: [],
+}
+