-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated navbar and footer social links
- Loading branch information
Showing
7 changed files
with
231 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,69 @@ | ||
| // The hero section for landing page | ||
| import { HERO } from '../../constants/index'; | ||
| import temp from '../../assets/temp.png'; | ||
| import banner from '../../assets/banner.png'; | ||
| import './Hero.css'; | ||
| import { motion } from 'framer-motion'; | ||
|
|
||
| const Hero = () => { | ||
| return ( | ||
| // Hero banner contain description on leftside and img rightside using flex-box with flex-strap property. If viewed on mobile device than orientation of description top and img bottom. | ||
| <section className="flex flex-col min-h-screen items-center"> | ||
| {/* Banner */} | ||
| <img src={banner} | ||
| alt="Hackathon theme banner" className="w-full mt-14" /> | ||
|
|
||
| // Hero banner containing description on the left side and image on the right side using flex-box with flex-wrap property. | ||
| // If viewed on a mobile device, the orientation changes to description on top and image on the bottom. | ||
|
|
||
| {/* Greet Section */} | ||
| <div className="w-full text-center mt-5 "> | ||
| <h1 className="p-2 text-3xl font-extrabold md:text-4xl lg:text-5xl"> | ||
| {HERO.greet} | ||
| </h1> | ||
| </div> | ||
| //id="welcome" is used to scroll to the welcome section when the user clicks on the welcome link in the navbar. | ||
| <section className="flex flex-col min-h-screen items-center" id="welcome"> | ||
| {/* Banner */} | ||
| <img src={banner} alt="Hackathon theme banner" className="w-full mt-14" /> | ||
|
|
||
| {/* Hero Content */} | ||
| <div className="flex flex-col md:flex-row w-full items-center"> | ||
| {/* Description Section */} | ||
| <div className="w-full md:w-1/2 flex flex-col items-center md:items-start p-4"> | ||
| <h2 className="mb-4 text-2xl font-medium tracking-tighter lg:text-4xl"> | ||
| {HERO.intro} | ||
| </h2> | ||
| <div className="left-scrollbar-container"> | ||
| <p className="text-base left-scrollbar text-left"> | ||
| {HERO.description} | ||
| </p> | ||
| {/* Greet Section */} | ||
| <motion.div | ||
| initial={{ opacity: 0, x: -50 }} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| transition={{ duration: 1 }} | ||
| className="w-full text-center mt-5" | ||
| > | ||
| <h1 className="p-2 text-3xl font-extrabold md:text-4xl lg:text-5xl"> | ||
| {HERO.greet} | ||
| </h1> | ||
| </motion.div> | ||
|
|
||
| {/* Hero Content */} | ||
| <motion.div | ||
| initial={{ opacity: 0, x: -50 }} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| transition={{ duration: 1 }} | ||
| className="flex flex-col md:flex-row w-full items-center mt-10" | ||
| > | ||
| {/* Description Section */} | ||
| <div className="w-full md:w-1/2 flex flex-col items-center md:items-start p-4"> | ||
| <h2 className="mb-4 text-2xl font-medium tracking-tighter lg:text-4xl"> | ||
| {HERO.intro} | ||
| </h2> | ||
| <div className="left-scrollbar-container"> | ||
| <p className="text-base left-scrollbar text-left"> | ||
| {HERO.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Image Section */} | ||
| <div className="w-full md:w-1/2 flex justify-center p-4"> | ||
| <img | ||
| src={temp} | ||
| alt="CTP 2024 Cohort 10 group photo" | ||
| className="rounded-3xl object-cover w-full max-w-full h-auto md:h-96" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| {/* Image Section */} | ||
| <motion.div | ||
| initial={{ opacity: 0, scale: 0.8 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| transition={{ duration: 1 }} | ||
| className="w-full md:w-1/2 flex justify-center p-4 mt-6 md:mt-0" | ||
| > | ||
| <motion.img | ||
| initial={{ opacity: 0 }} | ||
| animate={{ opacity: 1 }} | ||
| transition={{ duration: 1 }} | ||
| src={temp} | ||
| alt="CTP 2024 Cohort 10 group photo" | ||
| className="rounded-3xl object-cover w-full max-w-full h-auto md:h-96" | ||
| /> | ||
| </motion.div> | ||
| </motion.div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Hero; | ||
| export default Hero; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,64 @@ | ||
| import { PROJECTS } from "../../constants/index"; | ||
| import { MdArrowOutward } from "react-icons/md"; | ||
| import { motion } from "framer-motion"; | ||
|
|
||
| const Projects = () => { | ||
| return ( | ||
| //id="projects" is used to scroll to the projects section when the user clicks on the projects link in the navbar. | ||
| <section className="pt-20" id="projects"> | ||
| <h2 className="mb-12 text-center text-4xl lg:text-5xl font-extrabold tracking-tight text-gray-200"> | ||
| <motion.h2 | ||
| initial={{ opacity: 0, y: -20 }} | ||
| whileInView={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.8 }} | ||
| className="mb-12 text-center text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-gray-200"> | ||
| Projects | ||
| </h2> | ||
| </motion.h2> | ||
|
|
||
| <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 px-4 md:px-8"> | ||
| {/* project contents found in constants folder in index.jsx */} | ||
| {PROJECTS.map((project) => ( | ||
| <div key={project.id} className="group relative overflow-hidden rounded-3xl shadow-lg transition-shadow hover:shadow-2xl"> | ||
| <img | ||
| <motion.div | ||
| initial={{ opacity: 0, scale: 0.9 }} | ||
| whileInView={{ opacity: 1, scale: 1 }} | ||
| transition={{ duration: 0.5 }} | ||
| whileHover={{ scale: 1.05 }} | ||
| key={project.id} | ||
| className="group relative overflow-hidden rounded-3xl shadow-lg transition-shadow hover:shadow-2xl" | ||
| > | ||
| <motion.img | ||
| whileHover={{ scale: 1.1 }} | ||
| src={project.image} | ||
| alt={project.name} | ||
| className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 rounded-3xl" | ||
| /> | ||
|
|
||
| <div className="absolute inset-0 flex flex-col items-center justify-center text-white opacity-0 backdrop-blur-md transition-opacity duration-500 group-hover:opacity-100 bg-black/50 rounded-3xl"> | ||
| <h3 className="mb-4 text-2xl font-semibold uppercase tracking-wide">{project.name}</h3> | ||
| <p className="mb-8 px-6 text-sm md:text-base leading-relaxed">{project.description}</p> | ||
| <motion.div | ||
| initial={{ opacity: 0 }} | ||
| whileHover={{ opacity: 1 }} | ||
| transition={{ duration: 0.5 }} | ||
| className="absolute inset-0 flex flex-col items-center justify-center text-white opacity-0 backdrop-blur-md transition-opacity duration-500 group-hover:opacity-100 bg-black/50 rounded-3xl" | ||
| > | ||
| <h3 className="mb-4 text-lg sm:text-xl md:text-2xl font-semibold uppercase tracking-wide"> | ||
| {project.name} | ||
| </h3> | ||
| <p className="mb-8 px-6 text-xs sm:text-sm md:text-base leading-relaxed"> | ||
| {project.description} | ||
| </p> | ||
| <a | ||
| href={project.githubLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="flex items-center rounded-full bg-white text-black px-6 py-3 font-semibold hover:bg-gray-300 transition-all duration-300" | ||
| className="flex items-center rounded-full bg-white text-black px-4 py-2 font-semibold hover:bg-gray-300 transition-all duration-300 text-sm md:text-base" | ||
| > | ||
| <span>View on Github</span> | ||
| <MdArrowOutward className="ml-2" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </motion.div> | ||
| </motion.div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default Projects; | ||
|
|
Oops, something went wrong.