Skip to content

Commit

Permalink
Merge pull request #55 from UjjwalSaini07/Release4EnhancementB2
Browse files Browse the repository at this point in the history
Pre-Release Checking
  • Loading branch information
UjjwalSaini07 authored Nov 15, 2024
2 parents 9f61912 + 8793448 commit e5059fc
Show file tree
Hide file tree
Showing 15 changed files with 355 additions and 80 deletions.
15 changes: 13 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ujjwals-portfolio",
"version": "0.1.3",
"version": "0.1.4",
"private": true,
"dependencies": {
"@emotion/react": "^11.13.0",
Expand Down Expand Up @@ -41,6 +41,7 @@
"react-use": "^17.5.1",
"react-vertical-timeline-component": "^3.6.0",
"styled-components": "^6.1.12",
"sweetalert2": "^11.14.5",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
"three": "^0.166.1",
Expand Down Expand Up @@ -77,3 +78,4 @@
"tailwindcss": "^3.4.6"
}
}

156 changes: 86 additions & 70 deletions src/Pages/CompoPage/ExtraComponents/Marquee.js
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,8 @@ export function MarqueeDemo() {
export default MarqueeDemo;


// TOdo: Done some rubbish Change
// Todo: Problematic Code
// ! Try Change - 1: Component is moving good but the problem is space between start and end.
// import React, { useEffect, useState } from 'react';
// import { useInView } from 'react-intersection-observer';

Expand All @@ -274,89 +275,96 @@ export default MarqueeDemo;
// import bgref from '../../../components/Assest_Used/textures/Bg_Shades/CubeBgAbout.png';

// const reviews = [
// {
// name: "Ayush",
// username: "@ayush",
// body: "I've never seen anything like this before. It's amazing. I love it.",
// img: Shade1,
// },
// {
// name: "Keshav",
// username: "@keshav",
// body: "I don't know what to say. I'm speechless. This is amazing.",
// img: Shade2,
// },
// {
// name: "Sameer",
// username: "@sam",
// body: "I'm at a loss for words. This is amazing. I love it.",
// img: Shade3,
// },
// {
// name: "Rohit",
// username: "@rohit",
// body: "I'm at a loss for words. This is amazing. I love it.",
// img: Shade3,
// },
// {
// name: "Ansh",
// username: "@ansh",
// body: "I'm at a loss for words. This is amazing. I love it.",
// img: Shade2,
// },
// {
// name: "Jhanvi",
// username: "@jhanvi",
// body: "I'm at a loss for words. This is amazing. I love it.",
// img: Shade1,
// },
// { name: "Ayush", username: "@ayush", body: "I've never seen anything like this before. It's amazing. I love it.", img: Shade1 },
// { name: "Keshav", username: "@keshav", body: "I don't know what to say. I'm speechless. This is amazing.", img: Shade2 },
// { name: "Sameer", username: "@sam", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade3 },
// { name: "Rohit", username: "@rohit", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade3 },
// { name: "Ansh", username: "@ansh", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade2 },
// { name: "Jhanvi", username: "@jhanvi", body: "I'm at a loss for words. This is amazing. I love it.", img: Shade1 },
// ];

// const Marquee = ({ children, reverse = false }) => {
// const spaceboardsFont = `
// @font-face {
// font-family: 'Spaceboards';
// src: url('/fonts/Spaceboards.otf') format('opentype');
// }
// `;

// const TestoStyle = `
// .Test {
// font-family: 'Spaceboards', sans-serif;
// font-size: 5rem;
// font-weight: bold;
// background: linear-gradient(90deg, #0cffc5, #a939ff, #0cffc5, #a939ff);
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// margin-left: 4rem;
// animation: gradient 1.5s infinite;
// letter-spacing: 0.1rem;
// background-size: 200% 200%;
// }

// @keyframes gradient {
// 0% { background-position: 0% 50%; }
// 50% { background-position: 100% 50%; }
// 100% { background-position: 0% 50%; }
// }

// /* Marquee animation styles */
// .animate-marquee {
// display: flex;
// animation: marquee var(--duration, 10s) linear infinite;
// }

// .animate-marquee2 {
// display: flex;
// animation: marquee2 var(--duration, 10s) linear infinite;
// }

// @keyframes marquee {
// from { transform: translateX(100%); }
// to { transform: translateX(-100%); }
// }

// @keyframes marquee2 {
// from { transform: translateX(-100%); }
// to { transform: translateX(100%); }
// }

// .group:hover .animate-marquee,
// .group:hover .animate-marquee2 {
// animation-play-state: paused;
// }
// `;

// const Marquee = ({ children, reverse = false, pauseOnHover = false, className = '' }) => {
// const { ref: ref0, inView: inView0 } = useInView({
// triggerOnce: true,
// threshold: 0.1,
// });

// const marqueeClass = reverse ? 'animate-marquee2' : 'animate-marquee';
// const marqueeStyle = {
// display: 'flex',
// animation: `marquee 20s linear infinite`,
// whiteSpace: 'nowrap',
// ...(reverse && { animationDirection: 'reverse' }),
// opacity: inView0 ? 1 : 0,
// transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
// transition: `opacity 1.25s ease-out 0.5s, transform 1.25s ease-out 0.5s`,
// };

// const containerStyle = {
// overflow: 'hidden',
// display: 'flex',
// opacity: inView0 ? 1 : 0,
// transform: inView0 ? 'translateY(0)' : 'translateY(-50px)',
// transition: `opacity 1.25s ease-out 0.5s, transform 1.25s ease-out 0.5s`,
// position: 'relative',
// transition: `opacity 1.25s ease-out 4s, transform 1.25s ease-out 4s`,
// };

// return (
// <div style={containerStyle} className="marquee-container" ref={ref0}>
// <div style={marqueeStyle}>
// {children}
// {children} {/* Duplicate children to create infinite loop */}
// {children} {/* Triplicate to ensure there's enough content */}
// </div>
// <div ref={ref0} style={marqueeStyle} className={`${marqueeClass} ${className} ${pauseOnHover ? 'group' : ''}`}>
// {children}
// </div>
// );
// };


// const ReviewCard = ({ img, name, username, body }) => {
// const [hover, setHover] = useState(false);

// const cardStyle = {
// position: 'relative',
// width: '35rem',
// height: '8rem',
// margin: '0.5rem',
// height: '8rem',
// margin: '0.2px 0.5rem 1.2rem',
// cursor: 'pointer',
// overflow: 'hidden',
// borderRadius: '1rem',
Expand Down Expand Up @@ -399,13 +407,13 @@ export default MarqueeDemo;
// export function MarqueeDemo() {
// useEffect(() => {
// const styleSheet = document.styleSheets[0];
// const keyframes = `
// @keyframes marquee {
// 0% { transform: translateX(100%); }
// 100% { transform: translateX(-100%); }
// }
// `;
// styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
// const styleElement = document.createElement('style');
// styleElement.innerHTML = spaceboardsFont + TestoStyle;
// document.head.appendChild(styleElement);

// return () => {
// document.head.removeChild(styleElement);
// };
// }, []);

// const firstRow = reviews.slice(0, Math.ceil(reviews.length / 2));
Expand Down Expand Up @@ -442,14 +450,22 @@ export default MarqueeDemo;
// right: 0,
// };

// const { ref: ref0, inView: inView0 } = useInView({
// triggerOnce: true,
// threshold: 0.1,
// });

// return (
// <div style={containerStyle}>
// <Marquee>
// <div className="Test" ref={ref0} style={{ textAlign: 'center', marginBottom: '2.5rem', marginTop: '1rem', opacity: inView0 ? 1 : 0, transform: inView0 ? 'translateY(0)' : 'translateY(50px)', transition: `opacity 1.25s ease-out 3.2s, transform 1.25s ease-out 3.2s`}}>
// Testimonials
// </div>
// <Marquee pauseOnHover className="[--duration:20s]">
// {firstRow.map((review) => (
// <ReviewCard key={review.username} {...review} />
// ))}
// </Marquee>
// <Marquee reverse>
// <Marquee reverse pauseOnHover className="[--duration:20s]">
// {secondRow.map((review) => (
// <ReviewCard key={review.username} {...review} />
// ))}
Expand Down
3 changes: 1 addition & 2 deletions src/Pages/Contact.js
Original file line number Diff line number Diff line change
Expand Up @@ -538,8 +538,7 @@ useEffect(() => {
}}>

<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3503.4709491222006!2d77.1156931!3d28.643659!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d036b61214b21%3A0xaaa9a3b98a1faee2!2sRajouri%20Garden%2C%20Delhi!5e0!3m2!1sen!2sin!4v1698004002035!5m2!1sen!2sin"
// src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3501.5393826342255!2d77.14058945079842!3d28.66222527921225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d03009e810ffd%3A0xcf2bda6f1a9acec6!2sNew%20Moti%20Nagar%2C%20Moti%20Nagar%2C%20Delhi%2C%20110015!5e0!3m2!1sen!2sin!4v1636631965111!5m2!1sen!2sin"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3498.987241148713!2d77.2319384!3d28.6249118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0b5b3b51cd%3A0x63589a2e9f69bc01!2sIndia%20Gate%2C%20Delhi!5e0!3m2!1sen!2sin!4v1698004002035!5m2!1sen!2sin"
style={{
border: 0,
width: '100%',
Expand Down
13 changes: 8 additions & 5 deletions src/Pages/Skills.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,17 +137,20 @@ const technologies = [
{ name: "Python", icon: "https://cdn-icons-png.flaticon.com/512/5968/5968286.png" },
{ name: "Django", icon: "https://www.opengis.ch/wp-content/uploads/2020/04/django-python-logo.png" },
{ name: "Cpp", icon: "https://cpp-lang.net/img/cpp.svg" },
{ name: "C Sharp", icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk0LQoEffBJcfDkSDSgOusJAqyTFxqMC1dCzwm0KgB0cMeGzVg3sGoON5Gn0m6H0_p73o&usqp=CAU" },
{ name: "Ardiuno", icon: "https://siminnovations.com/wiki/images/7/7a/Arduino_logo_round.png" },
// { name: "C Sharp", icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk0LQoEffBJcfDkSDSgOusJAqyTFxqMC1dCzwm0KgB0cMeGzVg3sGoON5Gn0m6H0_p73o&usqp=CAU" },
{ name: "Ardiuno*", icon: "https://siminnovations.com/wiki/images/7/7a/Arduino_logo_round.png" },
{ name: "Node JS", icon: "https://academyclass.com/wp-content/uploads/2021/11/ACCL-NodeJS-1200x1200.png" },
{ name: "MySQL", icon: "https://wallpapers.com/images/hd/my-s-q-l-development-services-circle-logo-xkzj685lk8e3zego.jpg" },
{ name: "Three JS", icon: "https://pbs.twimg.com/profile_images/1390736294666506242/_D_h6aWq_400x400.png", dark: true },
{ name: "MongoDB*", icon: "https://x5h8w2v3.rocketcdn.me/wp-content/uploads/2021/10/Logo-MongoDB.png" },
{ name: "Mongoose", icon: "https://w7.pngwing.com/pngs/948/837/png-transparent-mongoose-hd-logo.png" },
{ name: "Express", icon: "https://w7.pngwing.com/pngs/925/447/png-transparent-express-js-node-js-javascript-mongodb-node-js-text-trademark-logo.png" },
{ name: "Three JS*", icon: "https://pbs.twimg.com/profile_images/1390736294666506242/_D_h6aWq_400x400.png", dark: true },
{ name: "Git", icon: "https://cdn-icons-png.flaticon.com/512/4494/4494740.png" },
{ name: "Github", icon: "https://cdn-icons-png.flaticon.com/256/25/25231.png" },
{ name: "VS Code", icon: "https://e1.pngegg.com/pngimages/947/906/png-clipart-clay-os-6-a-macos-icon-visual-studio-code-blue-and-white-illustration.png" },
{ name: "Java", icon: "https://banner2.cleanpng.com/20180504/obw/kisspng-java-programming-language-computer-programming-obj-java-5aecd0e57187f9.7147867015254694134651.jpg" },
// { name: "Java", icon: "https://banner2.cleanpng.com/20180504/obw/kisspng-java-programming-language-computer-programming-obj-java-5aecd0e57187f9.7147867015254694134651.jpg" },
{ name: "Bootstrap", icon: "https://upload.wikimedia.org/wikipedia/commons/b/b2/Bootstrap_logo.svg" },
{ name: "Google Cloud", icon: "https://bcassetcdn.com/public/blog/wp-content/uploads/2022/08/29150705/Google-Cloud.png" },
{ name: "Google Cloud*", icon: "https://bcassetcdn.com/public/blog/wp-content/uploads/2022/08/29150705/Google-Cloud.png" },
];

const slugs = [
Expand Down
29 changes: 29 additions & 0 deletions src/Pages/Styles/Equalizer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.bar {
animation: bounce 0.5s ease-in-out infinite alternate;
transform-origin: bottom; /* Anchor scaling from bottom */
}

.bar1 {
animation-delay: 0.1s;
}

.bar2 {
animation-delay: 0.2s;
}

.bar3 {
animation-delay: 0.3s;
}

.bar4 {
animation-delay: 0.4s;
}

@keyframes bounce {
from {
transform: scaleY(0.2); /* Smallest scale */
}
to {
transform: scaleY(1); /* Full height */
}
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
39 changes: 39 additions & 0 deletions src/components/Equalizer.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import * as React from "react";
import ".././Pages/Styles/Equalizer.css";

const SVGComponent = (props) => (
<svg
id="equalizer"
width="24px"
height="26px"
viewBox="0 0 25 17.5"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g fill="#fff">
<path
id="bar1"
className="bar bar1"
d="M0 12.5H2.5V17.5H0V12.5z"
/>
<path
id="bar2"
className="bar bar2"
d="M7.5 5H10V17.5H7.5V5z"
/>
<path
id="bar3"
className="bar bar3"
d="M15 0H17.5V17.5H15V0z"
/>
<path
id="bar4"
className="bar bar4"
d="M22.5 7.5H25V17.5H22.5V7.5z"
/>
</g>
</svg>
);

export default SVGComponent;
Loading

0 comments on commit e5059fc

Please sign in to comment.