From 11f35ea8aad6d7502c7fa37922de2aaa4342ddb6 Mon Sep 17 00:00:00 2001 From: Vatsal Verma Date: Fri, 11 Oct 2024 13:02:46 +0530 Subject: [PATCH] made the website look dynamic --- client/package-lock.json | 26 +++++ client/package.json | 1 + client/src/components/About.jsx | 16 ++- client/src/components/Contact.jsx | 21 ++-- client/src/components/Home.jsx | 170 ++++++++-------------------- client/src/components/OurAlumni.jsx | 68 +++++++---- 6 files changed, 143 insertions(+), 159 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 4a25a50..1fa20c4 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/fontawesome-free": "^6.6.0", "@heroicons/react": "^2.1.5", "@mui/material": "^6.1.2", + "aos": "^2.3.4", "client": "file:", "mdb-react-ui-kit": "^9.0.0", "react": "^18.3.1", @@ -1889,6 +1890,16 @@ "node": ">= 8" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -2292,6 +2303,11 @@ "node": ">= 6" } }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==" + }, "node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", @@ -4331,12 +4347,22 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", diff --git a/client/package.json b/client/package.json index f9e942b..1dfbd71 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "@fortawesome/fontawesome-free": "^6.6.0", "@heroicons/react": "^2.1.5", "@mui/material": "^6.1.2", + "aos": "^2.3.4", "client": "file:", "mdb-react-ui-kit": "^9.0.0", "react": "^18.3.1", diff --git a/client/src/components/About.jsx b/client/src/components/About.jsx index 1695d10..4163c9e 100644 --- a/client/src/components/About.jsx +++ b/client/src/components/About.jsx @@ -1,16 +1,22 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import AOS from 'aos'; // Import AOS +import 'aos/dist/aos.css'; // Import AOS styles const About = () => { + useEffect(() => { + AOS.init({ duration: 1000 }); // You can adjust the duration and other settings + }, []); + return (
-

About Us

-
+

About Us

+

About Our Alumni

Our alumni network is a vibrant and diverse community of professionals who have graduated from our MCA program. They are leaders in their fields, making significant contributions to the industry and society. We are proud of their achievements and the positive impact they have on the world.

-
+

About MCA Department

The MCA department is dedicated to providing a comprehensive education in computer applications. Our curriculum is designed to equip students with the skills and knowledge needed to excel in the ever-evolving tech industry. We foster a collaborative and innovative learning environment, preparing our students for successful careers. @@ -20,4 +26,4 @@ const About = () => { ); }; -export default About; \ No newline at end of file +export default About; diff --git a/client/src/components/Contact.jsx b/client/src/components/Contact.jsx index b350a0d..00a4c8a 100644 --- a/client/src/components/Contact.jsx +++ b/client/src/components/Contact.jsx @@ -1,15 +1,18 @@ -import React, { useRef } from "react"; +import React, { useRef, useEffect } from "react"; import emailjs from "@emailjs/browser"; import wave from "../assets/wave.png"; import unlock from "../assets/unlock.svg"; import avatar from "../assets/avatar.svg"; +import AOS from "aos"; // Import AOS +import "aos/dist/aos.css"; // Import AOS styles const Contact = () => { const form = useRef(); + useEffect(() => { + AOS.init({ duration: 1000 }); // Initialize AOS + }, []); - // used EmailJs - // npm i @emailjs/browser const sendEmail = (e) => { e.preventDefault(); @@ -23,7 +26,7 @@ const Contact = () => { .then( (result) => { console.log(result.text); - console.log("message sent"); + console.log("Message sent"); }, (error) => { console.log(error.text); @@ -32,8 +35,7 @@ const Contact = () => { }; return ( -

- {/* Add a container for the wave image */} +
wave
@@ -42,7 +44,6 @@ const Contact = () => {
{ name="user_name" placeholder="Name" className="bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg" + data-aos="fade-up" // AOS effect />
@@ -67,15 +69,16 @@ const Contact = () => { type="text" name="user_email" placeholder="Email" - className=" bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg" + className="bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg" + data-aos="fade-up" // AOS effect />
diff --git a/client/src/components/Home.jsx b/client/src/components/Home.jsx index 641b1ec..b804070 100644 --- a/client/src/components/Home.jsx +++ b/client/src/components/Home.jsx @@ -1,4 +1,6 @@ import React, { useEffect, useState } from "react"; +import AOS from "aos"; // Import AOS +import "aos/dist/aos.css"; // Import AOS styles import { Container, Typography, @@ -52,6 +54,11 @@ const Home = () => { return () => clearInterval(interval); }, [textIndex, isTyping]); + // Initialize AOS + useEffect(() => { + AOS.init({ duration: 1000 }); // You can adjust the duration and other settings + }, []); + return (
{/* Hero Section */} @@ -63,11 +70,12 @@ const Home = () => { backgroundPosition: "center", display: "flex", alignItems: "center", - justifyContent: "space-between", // Space between description and image - padding: "0 5%", // Add padding for better layout + justifyContent: "space-between", + padding: "0 5%", color: "#fff", position: "relative", }} + data-aos="fade-up" // AOS effect > { /> {/* Left Section - Description and Buttons */} - + { "&:hover": { backgroundColor: "#e91e63" }, }} onClick={() => navigate("/about-us")} + data-aos="zoom-in" // AOS effect for button > About Us @@ -131,6 +140,7 @@ const Home = () => { "&:hover": { backgroundColor: "#e91e63" }, }} onClick={() => navigate("/register")} + data-aos="zoom-in" // AOS effect for button > Join Us @@ -142,25 +152,6 @@ const Home = () => { {/* Cursor Effect Component */} - {/* Right Section - Hover Motion Image */} - {/* Uncomment and customize if needed */} - {/* - MCA Alumni Network - */} - { display: "flex", flexDirection: "column", gap: 4, - zIndex: 3, // Adjusted zIndex to ensure icons are on top + zIndex: 3, }} + data-aos="fade-left" // AOS effect for social icons > {/* Social Media Icons */} - (e.currentTarget.style.color = "#4267B2")} - onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} - > - - - (e.currentTarget.style.color = "#1DA1F2")} - onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} - > - - - (e.currentTarget.style.color = "#0077B5")} - onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} - > - - - (e.currentTarget.style.color = "#E1306C")} - onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} - > - - - (e.currentTarget.style.color = "#FF0000")} - onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} - > - - + {[ + { icon: , link: "https://facebook.com", color: "#4267B2" }, + { icon: , link: "https://twitter.com", color: "#1DA1F2" }, + { icon: , link: "https://linkedin.com", color: "#0077B5" }, + { icon: , link: "https://instagram.com", color: "#E1306C" }, + { icon: , link: "https://youtube.com", color: "#FF0000" }, + ].map(({ icon, link, color }, index) => ( + (e.currentTarget.style.color = color)} + onMouseOut={(e) => (e.currentTarget.style.color = "#F5DEB3")} + > + {React.cloneElement(icon, { size: 40 })} + + ))} {/* Features Section */} - + Our Features {[ { title: "Networking Opportunities", - description: - "Connect with alumni and expand your professional network.", - image: - "https://blog.goinglobal.com/wp-content/uploads/2023/11/networking-job-search-goinglobal.jpg", - gradient: - "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", // Darker gradient + description: "Connect with alumni and expand your professional network.", + image: "https://blog.goinglobal.com/wp-content/uploads/2023/11/networking-job-search-goinglobal.jpg", + gradient: "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", }, { title: "Career Development", - description: - "Access resources and mentorship to advance your career.", - image: - "https://www.tierpoint.com/wp-content/uploads/2022/05/8-IT-Professional-Career-Development-Tips-in-a-Managed-Services-World_blog.jpg", - gradient: - "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", // Darker gradient + description: "Access resources and mentorship to advance your career.", + image: "https://www.tierpoint.com/wp-content/uploads/2022/05/8-IT-Professional-Career-Development-Tips-in-a-Managed-Services-World_blog.jpg", + gradient: "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", }, { title: "Community Engagement", - description: - "Participate in events and give back to the community.", - image: - "https://sustainingcommunity.wordpress.com/wp-content/uploads/2011/03/community-engagement-definition-3.png", - gradient: - "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", // Darker gradient + description: "Participate in events and give back to the community.", + image: "https://sustainingcommunity.wordpress.com/wp-content/uploads/2011/03/community-engagement-definition-3.png", + gradient: "linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9))", }, ].map((feature, index) => ( - + { "transform 0.3s ease-in-out, font-size 0.3s ease-in-out", }} > - {/* Title with hover effect */} { > {feature.title} - {/* Description with hover effect */} { + useEffect(() => { + AOS.init({ duration: 1000 }); // Initialize AOS + }, []); - const user = { - name: "AbhiShek Rao", - email: "johndoe@example.com", - avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg", - city: "Gorakhpur", - role: "Web Developer", - passOut: "MCA 2025", - }; + const users = [ + { + name: "AbhiShek Rao", + email: "johndoe@example.com", + avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg", + city: "Gorakhpur", + role: "Web Developer", + passOut: "MCA 2025", + }, + { + name: "Ananya Singh", + email: "ananya@example.com", + avatar: "https://i.postimg.cc/6QYvNbhj/Ananya.jpg", + city: "Lucknow", + role: "Data Scientist", + passOut: "MCA 2024", + }, + { + name: "Rahul Verma", + email: "rahul@example.com", + avatar: "https://i.postimg.cc/FK0jDddF/Rahul.jpg", + city: "Delhi", + role: "Software Engineer", + passOut: "MCA 2023", + }, + // Add more users as needed + ]; return ( - <> -
-
-
+
+
+ {users.map((user, index) => ( +
-
- -
-
- - -
-
- + ))} +
- - ); };