Skip to content
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

Fixed Issue#372 to add animation to active projects section #378

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

Fixed Issue#372 to add animation to active projects section #378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dd16a61
Fixed #371 adding hover effects
arpanhub Feb 7, 2025
91f886b
Fixed #371 updated buttons
arpanhub Feb 7, 2025
60c17de
Fixed #372 animation to active projects
arpanhub Feb 7, 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
Empty file modified public/logo.png
100755 → 100644
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 13 additions & 3 deletions src/components/Banner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Pattern } from '@/components/Pattern';
export function Banner() {
return (
<section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
<div className="overflow-hidden lg:relative">
<div className="overflow-hidden lg:relative bg-[#00843D] dark:bg-yellow-400">
<ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
<Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
<Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
Expand All @@ -18,8 +18,18 @@ export function Banner() {
</p>
<div className="mt-5">
<Link href="/apply" legacyBehavior>
<a className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
Apply to GSoC with AOSSIE
<a className="group relative inline-block text-lg hover:text-white">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-4 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-white">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-4 py-3 hover:text-white"></span>
<span className="absolute left-0 -ml-2 h-48 w-72 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-black transition-all duration-300 ease-in-out group-hover:-rotate-180 dark:bg-black"></span>
<span className="relative font-mono font-semibold hover:text-white">
Apply to GSoC with AOSSIE
</span>
</span>
<span
className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-black transition-all duration-200 ease-linear group-hover:m-0 dark:bg-black"
data-rounded="rounded-lg"
></span>
</a>
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function Footer() {
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="#projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ function MobileNavigation(props) {
<nav className="mt-6">
<ul className="-my-2 font-mono font-black divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
<MobileNavItem href="/about">About</MobileNavItem>
<MobileNavItem href="/projects">Projects</MobileNavItem>
<MobileNavItem href="#projects">Projects</MobileNavItem>
<MobileNavItem href="/ideas">Ideas</MobileNavItem>
<MobileNavItem href="/apply">Apply</MobileNavItem>
</ul>
Expand Down Expand Up @@ -161,7 +161,7 @@ function DesktopNavigation(props) {
<nav {...props}>
<ul className="flex font-mono rounded-full bg-white/90 px-3 text-md font-semibold text-zinc-800 shadow-2xl shadow-black/4 dark:shadow-xl dark:shadow-white/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
<NavItem href="/about">About</NavItem>
<NavItem href="/projects">Projects</NavItem>
<NavItem href="#projects">Projects</NavItem>
<NavItem href="/ideas">Ideas</NavItem>
<NavItem href="/apply">Apply</NavItem>
</ul>
Expand Down
39 changes: 14 additions & 25 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default function Home() {
</div>
</div>
</div>
<div className="mt-16 text-center">
<div className="mt-16 text-center">
<Link href="/about" className="group relative inline-block text-lg">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-5 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-black">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-5 py-3"></span>
Expand All @@ -107,7 +107,7 @@ export default function Home() {
</div>
</Container>
<Container className="mt-24 md:mt-28">
<div className="mx-auto gap-y-20 lg:max-w-none lg:grid-cols-2">
<div id='projects' className="mx-auto gap-y-20 lg:max-w-none lg:grid-cols-2">
<div className="space-y-10 lg:pl-16 xl:pl-24">
<div className="grid grid-cols-12">
<div className=" relative -left-2 top-2 hidden h-12 w-12 translate-x-px transform items-center justify-center rounded-full bg-[#00843D] p-2 dark:bg-yellow-400 md:flex">
Expand Down Expand Up @@ -158,30 +158,19 @@ export default function Home() {
</Container.Inner>
</div>
<div className="mt-12 text-center">
<Link
className="group relative inline-flex items-center overflow-hidden rounded-lg bg-[#00843D] px-8 py-3 text-white focus:outline-none active:bg-[#00843D] dark:bg-yellow-400 dark:text-zinc-900"
href="/projects"
>
<span className="absolute right-0 flex-shrink-0 translate-x-full rounded-full border border-current bg-white p-1 text-black transition-transform group-hover:-translate-x-4">
<svg
className="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</span>
<span className="font-mono font-semibold transition-all group-hover:mr-6">
View All Projects
<Link href="/about" className="group relative inline-block text-lg">
<span className="relative z-10 block overflow-hidden rounded-lg border-2 border-gray-900 px-5 py-3 transition-colors duration-300 ease-in-out group-hover:text-white dark:group-hover:text-black">
<span className="absolute inset-0 h-full w-full rounded-lg bg-white px-5 py-3"></span>
<span className="absolute left-0 -ml-2 h-48 w-72 origin-top-right -translate-x-full translate-y-12 -rotate-90 bg-[#00843D] transition-all duration-300 ease-in-out group-hover:-rotate-180 dark:bg-yellow-400"></span>
<span className="relative font-mono text-xl font-black tracking-tighter">
View ALL Projects
</span>
</Link>
</span>
<span
className="absolute bottom-0 right-0 mb-3 mr-2 h-14 w-full rounded-lg bg-[#00843D] transition-all duration-200 ease-linear group-hover:m-0 dark:bg-yellow-400"
data-rounded="rounded-lg"
></span>
</Link>
</div>
</div>
</Container>
Expand Down