Skip to content

Commit

Permalink
achievement added
Browse files Browse the repository at this point in the history
  • Loading branch information
gyananshu07 committed Jul 23, 2022
1 parent 3bcc3a6 commit 7757dc5
Show file tree
Hide file tree
Showing 14 changed files with 1,852 additions and 35 deletions.
1,292 changes: 1,271 additions & 21 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,14 @@
"chart.js": "^3.8.0",
"framer-motion": "^6.5.1",
"gh-pages": "^3.2.3",
"node-sass": "^7.0.1",
"react": "^18.1.0",
"react-chartjs-2": "^4.3.1",
"react-countup": "^6.3.0",
"react-dom": "^18.1.0",
"react-intersection-observer": "^9.3.5",
"react-modal-hover": "^1.1.13",
"react-photo-album": "^1.16.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
Expand Down Expand Up @@ -52,5 +55,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.1.6"
}
}
22 changes: 9 additions & 13 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
align-items: space-around;
/* padding-left: 5rem; */
padding: auto;
height: -moz-fit-content;
height: fit-content;
}

Expand Down Expand Up @@ -99,6 +100,7 @@
line-height: 17px;
text-align: left;
margin-left: -32px;
width: -moz-fit-content;
width: fit-content;
}
.navbar .menu :hover #whyRec,
Expand All @@ -110,8 +112,8 @@
width: 197px;
}
.navbar .menu :hover .navwidth2 {
width: -moz-fit-content;
width: fit-content;
/* padding: 0 .5rem; */
}

.navbar .menu :hover .dropdown_menu .navwidth {
Expand Down Expand Up @@ -508,12 +510,12 @@
left: 0;
flex-direction: column;
width: 100%;
height: -moz-fit-content;
height: fit-content;
background-color: rgba(69, 123, 157, 0.4);
display: none;
}


.navbar .menu li {
text-align: center;
margin: 0;
Expand All @@ -525,13 +527,13 @@

.navbar .menu :hover .dropdown_menu {
/* transform: translateY(-14rem); */
display: block;
position: relative;
display: block;
position: relative;
z-index: 100;
}
.navbar .menu :hover .dropdown_menu li{
.navbar .menu :hover .dropdown_menu li {
text-align: center;
padding-left:0%!important;
padding-left: 0% !important;
}
/* .navbar .menu :hover .navwidth1 {
transform: translateY(-10rem);
Expand Down Expand Up @@ -1005,10 +1007,6 @@
.footer-text-procedure {
font-size: 0.6rem;
}
/* Navbar */
.navbar .menu :hover .dropdown_menu{
/* transform: translateY(0.1rem) translateX(2vw); */
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.Heading-procedure {
Expand Down Expand Up @@ -1046,12 +1044,10 @@
.footer-text-procedure {
font-size: 0.6rem;
}


}
/*
@media (max-width:360px) {
.navbar .menu :hover .dropdown_menu{
transform: translateY(0.1rem) translateX(-17vw);
}
}*/
}*/
57 changes: 56 additions & 1 deletion src/components/Achievements/Achievements.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,65 @@
import React from "react";
import Navsm from "../Navbar/Navsm";
import Footer from "../utils/Footer";
import CounterComponent from "./CounterComponent";

import "./achievements.css";

import { motion, useScroll } from "framer-motion";
import Logos from "../Logo/Logos";
import Layout from "./Layout/Layout";
import News from "./In News/News";

const Achievements = () => {
const { scrollYProgress } = useScroll();
return (
<>
<Navsm />
<motion.div
className="progress-bar"
style={{ scaleX: scrollYProgress }}
></motion.div>

<div>
<div className="about ms-3 ms-md-5 ms-lg-5">Achievements</div>
<div className="border1 ms-3 ms-md-5 ms-lg-5"></div>

<div className="component-div">
<CounterComponent />

<div className="logo-component">
<Logos />
</div>
</div>

<div className="alumni ms-3 ms-md-5 ms-lg-5 mt-2">
Our Alumni Works At
</div>
<div
className="border1 ms-3 ms-md-5 ms-lg-5"
style={{ width: "325px" }}
></div>
<div className="component-alumni">
<div className="logo-component">
<Logos />
</div>
</div>

<div className="about ms-3 ms-md-5 ms-lg-5">Students Achievements</div>
<div className="border1 border-layout ms-3 ms-md-5 ms-lg-5"></div>

<div className="layout-container">
<Layout />
</div>
</div>

<div className="about ms-3 ms-md-5 ms-lg-5">MMMUT in News</div>
<div className="border1 border-news ms-3 ms-md-5 ms-lg-5"></div>

<div className="news-component">
<News />
</div>

<Footer />
</>
);
};
Expand Down
16 changes: 16 additions & 0 deletions src/components/Achievements/Counter.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import CountUp from "react-countup";

const Counter = ({ end, suffix, title }) => {
return (
<CountUp start={0} end={end} suffix={suffix ? suffix : ""} delay={0}>
{({ countUpRef }) => (
<div>
<span ref={countUpRef} />
<h3>{title}</h3>
</div>
)}
</CountUp>
);
};

export default Counter;
58 changes: 58 additions & 0 deletions src/components/Achievements/CounterComponent.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import Counter from "./Counter";
import { motion } from "framer-motion";
import "./achievements.css";

const CounterComponent = () => {
return (
<>
<div className="counter-row">
<div className="row-1">
<motion.div
className="quadrant-1"
initial={{ opacity: 0, translateX: -40 }}
animate={{ opacity: 1, translateX: 0 }}
transition={{ duration: 0.2, delay: 0.2 }}
>
<Counter end={985} title={" Offers"} />
</motion.div>
<motion.div
className="quadrant-1"
initial={{ opacity: 0, translateX: -40 }}
animate={{ opacity: 1, translateX: 0 }}
transition={{ duration: 0.2, delay: 0.4 }}
>
<Counter end={100} suffix={"+"} title={"Companies Visited"} />
</motion.div>
</div>
<div className="row-2">
<motion.div
className="quadrant-1"
initial={{ opacity: 0, translateX: -40 }}
animate={{ opacity: 1, translateX: 0 }}
transition={{ duration: 0.2, delay: 0.6 }}
>
<Counter
end={50}
suffix={" LPA"}
title={"Highest Package Offered"}
/>
</motion.div>
<motion.div
className="quadrant-1"
initial={{ opacity: 0, translateX: -40 }}
animate={{ opacity: 1, translateX: 0 }}
transition={{ duration: 0.2, delay: 0.8 }}
>
<Counter
end={7}
suffix={" LPA"}
title={"Average Package Offered"}
/>
</motion.div>
</div>
</div>
</>
);
};

export default CounterComponent;
15 changes: 15 additions & 0 deletions src/components/Achievements/In News/News.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import PhotoAlbum from "react-photo-album";
import { photos } from "../../../data/Photos";
import "../achievements.css";

const News = () => {
return (
<>
<div className="news-container">
<PhotoAlbum layout="rows" photos={photos} />
</div>
</>
);
};

export default News;
28 changes: 28 additions & 0 deletions src/components/Achievements/Layout/Layout.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import LayoutItem from "./LayoutItem";
import { AchievementData } from "../../../data/AchievementData";
import "./styles.css";

import { motion } from "framer-motion";

const Layout = () => {
return AchievementData.map((item) => {
return (
<>
<motion.div
layout="position"
transition={{ layout: { duration: 1, type: "spring" } }}
className="App"
>
<LayoutItem
key={item.id}
title={item.title}
content={item.content}
image={item.image}
/>
</motion.div>
</>
);
});
};

export default Layout;
40 changes: 40 additions & 0 deletions src/components/Achievements/Layout/LayoutItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useState } from "react";
import { motion } from "framer-motion";
import "./styles.css";

export default function Layout({ title, image, content }) {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<motion.div
layout="position"
transition={{ layout: { duration: 1, type: "spring" } }}
onClick={() => setIsOpen(!isOpen)}
className="card"
style={{
boxShadow:
" rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
}}
>
<motion.div layout="position" className="avatar">
<motion.div layout="position" className="circle">
<motion.img
layout="position"
className="image-logo"
src={image}
alt="logo"
/>
</motion.div>
<motion.h3>{title}</motion.h3>
</motion.div>

{isOpen && (
<motion.div>
<p className="expand">{content}</p>
</motion.div>
)}
</motion.div>
</>
);
}
Loading

0 comments on commit 7757dc5

Please sign in to comment.