Skip to content

Redesigning the Webpages #6 #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Redesigning the Webpages #6 #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a47e4dc
Revamped Homepage
chaitra-samant Jan 26, 2025
5c1e395
Revamped remaining components
chaitra-samant Jan 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 50 additions & 49 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,69 @@
// Enhanced App component with updated styles and layout
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { motion } from 'framer-motion';
import NavbarCard from './Components/NavbarCard';
import Navigation from './Components/Navigation';
import Events from './Components/Events';
import StudentManagement from './Components/Achievements';
import Projects from './Components/Projects';
import './App.css'
import Achievements from './Components/Achievements';
import PastProjects from './Components/PastProjects';
import UpcomingProjects from './Components/UpcomingProjects';
import VerticalTimeline from './Components/Timeline';
import Carousel from './Components/Carousel';
import Hero from './Components/Hero';
import Footer from "./Components/Footer"

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from "./Components/Navigation";
import Events from "./Components/Events";
import Projects from "./Components/Projects";
import Achievements from "./Components/Achievements";
import PastProjects from "./Components/PastProjects";
import UpcomingProjects from "./Components/UpcomingProjects";
import Carousel from "./Components/Carousel";
import Hero from "./Components/Hero";
import Footer from "./Components/Footer";

const Homepage = () => {
return (
<div>
<Hero />
{/* Text Section between Hero and Carousel */}
<div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
<h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
<p className="text-xl">
We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
</p>

<div className="relative py-16 px-4 md:px-12 bg-gradient-to-b from-[#5720A8] to-[#111827] text-white">
<div className="relative z-10 max-w-6xl mx-auto text-center">
<h2 className="text-4xl md:text-5xl font-bold mb-6 animate-fadeIn bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
Welcome to Project X
</h2>

<p className="text-lg md:text-xl text-gray-300 leading-relaxed animate-fadeIn delay-200 mx-auto max-w-3xl">
<span className="block font-semibold text-gray-300 mb-2">
We are an exclusive club at Veermata Jijabai Technological
Institute, Mumbai.
</span>
<span className="block text-gray-200">
We provide a collaborative environment for students to learn,
grow, and build projects together under mentorship. Explore our
achievements, past projects, and upcoming events!
</span>
</p>
</div>
</div>

<div>
<Carousel />
<div className="py-16 bg-gray-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-8 animate-fadeIn">
Our Highlights
</h2>
<Carousel />
</div>
</div>
</div>
);
};




function App() {
return (
<div className='bgC'>
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/projects" element={<Projects />} />
<Route path="/achievements" element={<Achievements />} />
<Route path="/past-projects" element={<PastProjects />} />
<Route path="/upcoming-projects" element={<UpcomingProjects />} />
{/* <Route path="/time" element={<VerticalTimeline />} /> */}

{/* <Route path="/" element={<OrderManagement />} /> */}
</Routes>
<Footer />
</Router>
<div>
</div>
<div className="bgC">
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Homepage />} />
<Route path="/events" element={<Events />} />
<Route path="/projects" element={<Projects />} />
<Route path="/achievements" element={<Achievements />} />
<Route path="/past-projects" element={<PastProjects />} />
<Route path="/upcoming-projects" element={<UpcomingProjects />} />
</Routes>
<Footer />
</Router>
</div>
);
}

export default App;

{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
78 changes: 56 additions & 22 deletions src/Components/Achievements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,65 @@
import React from 'react';
import CircularCard from './CircularCard';
import React from "react";
import CircularCard from "./CircularCard";

const Achievements = () => {
return (
<div className='min-h-screen'>
<h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
GSoC Contributors
<div className="min-h-screen bg-gradient-to-b from-gray-900 via-gray-800 to-purple-900 py-12">

<h1 className="text-5xl py-8 md:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-blue-500 text-center mb-0">
GSOC Contributors
</h1>
<div className="grid grid-cols-6 px-3 gap-12 justify-center">
<div></div>
<CircularCard image='https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png' name='Kshitij Shah' organization='Sugarlabs' link="https://github.com/kshitijdshah99/Pippy_Activity" />
<CircularCard image='https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png' name='Vedant Mehra' organization='CERN' link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html" />
<CircularCard image='https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png' name='Mayank Palan' organization='Red Hen Lab' link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1" />
<CircularCard image='https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png' name='Sharan Poojari' organization='NumFOCUS' link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md" />
<div></div>


<div className="flex justify-center gap-8 px-6 mb-8">
<CircularCard
image="https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png"
name="Kshitij Shah"
organization="Sugarlabs"
link="https://github.com/kshitijdshah99/Pippy_Activity"
/>
<CircularCard
image="https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png"
name="Vedant Mehra"
organization="CERN"
link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html"
/>
<CircularCard
image="https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png"
name="Mayank Palan"
organization="Red Hen Lab"
link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1"
/>
<CircularCard
image="https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png"
name="Sharan Poojari"
organization="NumFOCUS"
link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md"
/>
</div>


<div className="flex justify-center gap-8 px-6">
<CircularCard
image="https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png"
name="Warren Jacinto"
organization="Open Astronomy"
link="https://deadspheroid.github.io/my-blog/"
/>
<CircularCard
image="https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png"
name="Tvisha Vedant"
organization="INCF"
link="https://tvilight4.github.io/MyBlog/"
/>
<CircularCard
image="https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png"
name="Raya Chakravarthy"
organization="INCF"
link="https://raya679.github.io/gsoc/"
/>
</div>
<div className="grid grid-cols-7 px-6 justify-center gap-12">
<div></div>
<div></div>
<CircularCard image='https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png' name='Warren Jacinto' organization='Open Astronomy' link="https://deadspheroid.github.io/my-blog/" />
<CircularCard image='https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png' name='Tvisha Vedant' organization='INCF' link="https://tvilight4.github.io/MyBlog/" />
<CircularCard image='https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png' name='Raya Chakravarthy' organization='INCF' link="https://raya679.github.io/gsoc/" />
<div></div>
<div></div>
</div>
</div>
);
}
};

export default Achievements;
6 changes: 3 additions & 3 deletions src/Components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React from 'react';

const Card = ({ image, text }) => {
return (
<div className="flex items-center justify-center w-full bg-gray-100 shadow-lg rounded-lg p-4">
<div className="flex items-center justify-center w-full bg-gradient-to-b from-gray-900 via-gray-800 to-purple-900 shadow-lg rounded-lg p-4">
<img className="w-full md:w-1/2 object-cover rounded-lg" src={image} alt="Card image" />
<div className="w-full md:w-1/2 text-left p-4 md:p-8">
<p className="text-gray-800">{text}</p>
<p className="text-gray-200">{text}</p>
</div>
</div>
);
};

export default Card;
export default Card;
30 changes: 20 additions & 10 deletions src/Components/CircularCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
import React from 'react';
import { useSpring, animated } from 'react-spring';
import React from "react";
import { useSpring, animated } from "react-spring";

const CircularCard = ({ image, name, organization, link }) => {
const props = useSpring({ opacity: 1, from: { opacity: 0 } });

return (
<a href={link} target="_blank" rel="noopener noreferrer" className="no-underline">
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="no-underline"
>
<animated.div
style={props}
className="flex text-center w-64 font-mono flex-col items-center p-6 shadow-2xl max-w-xs bg-gradient-to-b from-gray-800/50 to-purple-900/50 backdrop-blur-sm border-2 border-purple-600/50 rounded-lg transform hover:scale-105 transition-transform duration-300 ease-in-out hover:shadow-purple-500/50 hover:border-purple-400"
>
<div className="w-32 h-32 rounded-full overflow-hidden border-4 border-purple-500/50 shadow-lg">
<img src={image} alt={name} className="w-full h-full object-cover" />
</div>

<animated.div style={props} className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
<div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
<img src={image} alt={name} className="w-full h-full object-cover" />
</div>
<h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
<p className="mt-2 text-cyan-200">{organization}</p>
</animated.div>
<h3 className="mt-4 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-blue-300">
{name}
</h3>

<p className="mt-2 text-sm text-gray-300">{organization}</p>
</animated.div>
</a>
);
};
Expand Down
74 changes: 40 additions & 34 deletions src/Components/Events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,80 @@
import React from "react";
import { Chrono } from "react-chrono";
import '../App.css'
import "../App.css";

const Events = () => {
const items = [
{
title: "March 19 2024",
cardTitle: "Open Source Introduction",
// cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
cardDetailedText: "Open source software is software with source code that anyone can inspect, modify, and enhance",
cardDetailedText:
"Open source software is software with source code that anyone can inspect, modify, and enhance.",
media: {
type: "IMAGE",
source: {
url: "src/assets/Xplore_1.jpg"
}
}
url: "src/assets/Xplore_1.jpg",
},
},
},
{
title: "April 24 2024",
cardTitle: "OpenCV Workshop",
// cardSubtitle: "OpenCV is a library of programming functions mainly for real-time computer vision..",
cardDetailedText: "OpenCV is a library of programming functions mainly for real-time computer vision",
cardDetailedText:
"OpenCV is a library of programming functions mainly for real-time computer vision.",
media: {
type: "IMAGE",
source: {
url: "src/assets/OpenCV.jpg"
}
}
url: "src/assets/OpenCV.jpg",
},
},
},
{
title: "June - July 2024",
cardTitle: "Selection Phase for batch of 2027",
// cardSubtitle: "A surprise military strike by the Imperial Japanese Navy Air Service...",
cardDetailedText: "An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.",
cardDetailedText:
"An exhaustive process involving tasks, proposal preparations, and interviews was carried out to shortlist sys for the mentorship program.",
media: {
type: "IMAGE",
source: {
url: "src/assets/selection_phase.png"
}
}
url: "src/assets/selection_phase.png",
},
},
},
{
title: "July - October",
cardTitle: "Weekly Meets and project development phase",
// cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
cardDetailedText: "Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.",
title: "July - October 2024",
cardTitle: "Weekly Meets and Project Development Phase",
cardDetailedText:
"Sys developed their respective projects under the mentorship of Tys, which was continuously monitored by Lys via weekly presentations.",
media: {
type: "IMAGE",
source: {
url: "src/assets/Weekly_meet.JPG"
}
}
url: "src/assets/Weekly_meet.JPG",
},
},
},
{
title: "October 19 2024",
cardTitle: "Final Presentation",
// cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
cardDetailedText: "The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.",
cardDetailedText:
"The project development phase was wrapped up, where the Sys presented their work and answered the questions posed to them.",
media: {
type: "IMAGE",
source: {
url: "src/assets/final_presentation.jpeg"
}
}
}
url: "src/assets/final_presentation.jpeg",
},
},
},
];

return (
<div className="relative h-[91.1vh] w-full ">
<div className="relative h-[91.1vh] w-full bg-gradient-to-b from-gray-900 via-gray-800 to-purple-900 overflow-y-auto">
<div className="absolute inset-0 bg-[radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px),radial-gradient(rgba(79,79,79,0.2)_1px,transparent_1px)] bg-[length:20px_20px]">
<div className="py-16">
<h1 className="text-5xl md:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500 text-center mb-0">
EVENTS
</h1>
</div>

<div style={{ width: "100%", height: "90vh", padding: "2rem" }}>
<Chrono
items={items}
Expand All @@ -84,7 +90,7 @@ const Events = () => {
titleColor: "#fff",
lineColor: "#4a5568",
cardText: "#e2e8f0",
dotColor: "#0b228c"
dotColor: "#0b228c",
}}
className={{
card: "rounded-lg shadow-lg",
Expand All @@ -99,7 +105,7 @@ const Events = () => {
</div>
</div>
</div>
)
}
);
};

export default Events;
export default Events;
Loading