Merge pull request #44 from UjjwalSaini07/Patch-Branch38

Pre Release 3 Stabilizing

SECURITY.md

@@ -6,7 +6,8 @@ Releasing Version 1 of My Portfolio Website
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 1.x   | :white_check_mark: |
+| 1.3   | :white_check_mark: |
+| 1.2   | :white_check_mark: |
 | 0.x   | :x:                |
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ujjwals-portfolio",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.13.0",

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="This is my Portfolio Website which give enlighten idea about me."
     />
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@@ -22,6 +22,7 @@
       id="root"
     ></div>
 
+    <!-- CDN Js Stylesheets -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <!-- font-awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js"> <!-- react -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/6.25.1/react-router-dom.production.min.js"> <!-- react-router-dom -->
@@ -45,9 +46,10 @@
     <link href="https://fonts.googleapis.com/css2?family=Srisakdi:wght@400;700&display=swap" rel="stylesheet"> <!-- Srisakdi font -->
     <link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet"> <!-- Pinyon Script font -->
     <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet"> <!-- Great Vibes font -->
+    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet"> <!-- Dancing Script font -->
+    <link href="https://fonts.googleapis.com/css2?family=Italianno&display=swap" rel="stylesheet"> <!--Italiano Script font -->
+    <link href="https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap" rel="stylesheet"> <!-- Monaco Script font -->
+    <link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&display=swap" rel="stylesheet"> <!-- Beau Rivage -->
+    <link href="https://fonts.googleapis.com/css2?family=Estonia&display=swap" rel="stylesheet"> <!-- Estonia -->
   </body>
 </html>
-
-
-<!-- use this bg template if required -->
-<!-- Purple Shade BG: class="bg-gradient-to-t from-[#050101] to-[#010217] min-h-[100vh] text-gray-800 overflow-y-auto" -->

src/Pages/CompoPage/ExtraComponents/NumberTicker.js

@@ -89,7 +89,7 @@ const NumberTicker = () => {
     width: '100%',
     maxWidth: '1000px',
     flexWrap: 'wrap',
-    marginTop: '58px',
+    marginTop: '5.5rem',
   };
 
   const itemStyle = {
@@ -112,15 +112,17 @@ const NumberTicker = () => {
   };
 
   const labelStyle = {
-    fontSize: '16.5px',
+    fontSize: '3rem',
     fontWeight: 'bold',
-    marginBottom: '5px',
+    marginBottom: '0.2rem',
+    fontFamily: "'Tangerine', cursive",
   };
 
   const valueStyle = {
-    fontSize: '22px',
+    fontSize: '2.2rem',
     fontWeight: 'bold',
     color: '#ff4500',
+    fontFamily: "'Vidaloka', serif",
   };
 
   // Responsive media query for smaller screens

src/Pages/CompoPage/ExtraComponents/TextSpan.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { motion, useAnimationControls } from 'framer-motion';
+
+const TextSpan = ({ children }) => {
+  const controls = useAnimationControls();
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const rubberBand = () => {
+    controls.start({
+      scale: [1, 1.4, 0.75, 1.25, 0.9, 1],
+    //   rotate: [0, 10, -10, 5, -5, 0], // Adds a slight rotation effect
+      color: ['#e73e0d', '#ff5722', '#ff9800', '#ff5722', '#e73e0d'],
+      textShadow: [
+        '0px 0px 0px rgba(0,0,0,0)',
+        '4px 4px 10px rgba(0,0,0,0.2)',
+        '2px 2px 8px rgba(0,0,0,0.3)',
+        '4px 4px 10px rgba(0,0,0,0.2)',
+        '0px 0px 0px rgba(0,0,0,0)',
+      ],
+      transition: {
+        times: [0, 0.3, 0.5, 0.7, 0.9],
+        duration: 1,
+      },
+    });
+    setIsPlaying(true);
+  };
+
+  return (
+    <motion.span
+      animate={controls}
+      onMouseOver={() => {
+        if (!isPlaying) rubberBand();
+      }}
+      onAnimationComplete={() => setIsPlaying(false)}
+      style={{
+        display: 'inline-block',
+        cursor: 'pointer',
+      }}
+    >
+      {children}
+    </motion.span>
+  );
+};
+
+export default TextSpan;

src/Pages/CompoPage/HomeSec/HomeHero.js

@@ -11,6 +11,7 @@ import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbou
 import soundeffect1 from '../../../components/Assest_Used/Sounds/base.mp3';
 import soundeffect2 from '../../../components/Assest_Used/Sounds/select-click.wav';
 import HireMESvg from '../ExtraComponents/HireMe';
+import TextSpan from '../ExtraComponents/TextSpan';
 
 const textVariant = (delay) => ({
   hidden: { y: -50, opacity: 0 },
@@ -112,7 +113,17 @@ function Home() {
               style={{ fontFamily: "'Bodoni Moda', serif", fontSize: isShortPC ? '6.2rem' : 'none', marginTop: isShortPC ? '-3.7rem' : 'none' , marginBottom: isShortPC ? '2rem' : 'none'  }}
               className={`${styles.heroHeadText} text-white`}
             >
-              Hi, I'm <span className="text-[#e73e0d]">Ujjwal</span>
+              {/* Hi, I'm <span className="text-[#e73e0d]">Ujjwal</span> */}
+              {/* <TextSpan>H{' '}</TextSpan><TextSpan>i,{' '}</TextSpan> <TextSpan>{' '}I'{' '}</TextSpan><TextSpan>m</TextSpan> */}
+              Hi, I'm{' '}
+              <span className="text-[#e73e0d]">
+                <TextSpan>U</TextSpan>
+                <TextSpan>j</TextSpan>
+                <TextSpan>j</TextSpan>
+                <TextSpan>w</TextSpan>
+                <TextSpan>a</TextSpan>
+                <TextSpan>l</TextSpan>
+              </span>
             </motion.div>
             <motion.div
               variants={textVariant(1.5)}
@@ -243,4 +254,5 @@ export default Home;
 // fontFamily: "'Vidaloka', serif",
 // fontFamily: "'Arsenal SC', sans-serif",
 // fontFamily: "'Tangerine', cursive",
-// fontFamily: "'Pinyon Script', cursive",
+// fontFamily: "'Italianno', cursive",
+// fontFamily: "'Dancing Script', cursive",

src/Pages/CompoPage/PcVersion/Footer.js

@@ -28,6 +28,7 @@ const leftSectionStyles = {
   display: "flex",
   alignItems: "center",
   maxWidth: "50%",
+  marginTop: '1.2rem'
 };
 
 const paragraphContainerStyles = {
@@ -80,6 +81,8 @@ const creditLinkStyles = {
   color: "#ffae00",
   textDecoration: "none",
   transition: "color 0.3s ease",
+  fontSize: "1.75rem",
+  fontFamily: "'Dancing Script', cursive",
 };
 
 const iconStyles = {
@@ -114,26 +117,29 @@ const Home = () => {
     fontSize: "2.5rem",
     fontWeight: "bold",
     color: "#ffcc33",
+    fontFamily: "'Vidaloka', serif",
     textShadow: "1px 1px 3px rgba(0, 0, 0, 0.5)",
     opacity: inView0 ? 1 : 0,
     transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
     transition: `opacity 1.25s ease-out 5.8s, transform 1.25s ease-out 5.8s`,
   };
 
   const ParagraphStyles = {
-    fontSize: "1.35rem",
+    fontSize: "1.8rem",
     color: "#e0e0e0",
     marginRight: "1rem",
+    fontFamily: "'Beau Rivage', cursive",
     textShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)",
     opacity: inView0 ? 1 : 0,
     transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
     transition: `opacity 1.25s ease-out 6.4s, transform 1.25s ease-out 6.4s`,
   };
 
   const boxParagraphStyles = {
-    fontSize: "1.8rem",
+    fontSize: "2rem",
     color: "#e0e0e0",
     marginRight: "1rem",
+    fontFamily: "'Dancing Script', cursive",
     textShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)",
     opacity: inView0 ? 1 : 0,
     transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',

src/Pages/Project.js

@@ -17,6 +17,7 @@ import RK from '../components/Assest_Used/ProjectImg/RkElect.png';
 import ProfileCard from '../components/Assest_Used/ProjectImg/ProfileCard.png';
 import Cube from '../components/Assest_Used/ProjectImg/Cube.png';
 import VoiceAss from '../components/Assest_Used/ProjectImg/VoiceAss.gif';
+import Hotel from '../components/Assest_Used/ProjectImg/Hotel_Management.png';
 
 import soundeffect1 from '../components/Assest_Used/Sounds/select-click.wav';
 
@@ -249,6 +250,24 @@ const projects = [
     live_link: "https://github.com/UjjwalSaini07/Voice_assistant",
     source_code_link: "https://github.com/UjjwalSaini07/Voice_assistant",
   },
+  {
+    name: "Hotel Management IDE",
+    description:
+      "Check out my Hotel Management project on GitHub! Developed during my 12th class using Python, this IDE-based project demonstrates cutting-edge technology with advanced features tailored for hotel management.",
+    tags: [
+      {
+        name: "Python",
+        color: "bg-orange-500",
+      },
+      {
+        name: "Tkinter",
+        color: "bg-white",
+      },
+    ],
+    image: Hotel,
+    live_link: "https://github.com/UjjwalSaini07/Hotel_Management_System",
+    source_code_link: "https://github.com/UjjwalSaini07/Hotel_Management_System",
+  },
 
 ];