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

Fix: Footer Social Media Links (Twitter, LinkedIn) Not Opening in New Tabs (#248) #266

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

Fix: Footer Social Media Links (Twitter, LinkedIn) Not Opening in New Tabs (#248) #266

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
0f51fb0
Fix #252 : Improve Mobile View for Apply Section - Collapsible Headings
yashsaraswat2004 Sep 17, 2024
4383ee5
fix svg link got mistakenely removed
yashsaraswat2004 Sep 17, 2024
c628d4a
Fix: Footer Social Media Links (Twitter, LinkedIn) Not Opening in New…
yashsaraswat2004 Sep 17, 2024
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
61 changes: 48 additions & 13 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import Link from 'next/link'
import { Container } from '@/components/Container'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
import {
faDiscord,
faGithub,
faGitlab,
faTwitter,
} from '@fortawesome/free-brands-svg-icons'

function NavLink({ href, children }) {
return (
Expand All @@ -23,30 +28,60 @@ export function Footer() {
<div className="pt-10 pb-10">
<Container.Inner>
<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">
<div className="text-md flex gap-5 font-mono font-semibold text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/projects">Projects</NavLink>
<NavLink href="/ideas">Ideas</NavLink>
<NavLink href="/apply">Apply</NavLink>
</div>
<p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
<p className="font-mono text-sm text-zinc-400 dark:text-zinc-500">
&copy; 2016-2023 AOSSIE. All rights reserved.
</p>
<div className="flex gap-6">
<Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'>
<FontAwesomeIcon icon={faEnvelope} size='xl' />
<Link
aria-label="Contact by Mail"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faEnvelope} size="xl" />
</Link>
<Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
<FontAwesomeIcon icon={faGitlab} size='xl' />
<Link
aria-label="Follow on GitLab"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://gitlab.com/aossie"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGitlab} size="xl" />
</Link>
<Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
<FontAwesomeIcon icon={faGithub} size='xl' />
<Link
aria-label="Follow on GitHub"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://github.com/AOSSIE-Org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGithub} size="xl" />
</Link>
<Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
<FontAwesomeIcon icon={faDiscord} size='xl' />
<Link
aria-label="Join on Discord"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://discord.com/invite/6mFZ2S846n"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faDiscord} size="xl" />
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
<Link
aria-label="Follow on Twitter"
className="text-zinc-400 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://twitter.com/aossie_org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faTwitter} size="xl" />
</Link>
</div>
</div>
Expand Down
98 changes: 83 additions & 15 deletions src/components/TimelineElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,85 @@
import clsx from "clsx"
import clsx from 'clsx'
import { useState, useEffect } from 'react'

export function TimelineElement({ title, description, button, time, link, classCondition }) {
return (
<li className="mb-10 ml-6">
<span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
<svg aria-hidden="true" className="w-3 h-3 text-green-800 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd"></path>
</svg>
</span>
<h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
<time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
<p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
<a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>{button}</a>
</li>
)
export function TimelineElement({
title,
description,
button,
time,
link,
classCondition,
}) {
const [isExpanded, setIsExpanded] = useState(false)
const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth <= 768)
}

checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
}, [])

return (
<li className="mb-10 ml-6">
<span className="absolute -left-3 flex h-6 w-6 scale-150 items-center justify-center rounded-full bg-green-100 ring-8 ring-white dark:bg-yellow-900 dark:ring-zinc-900">
<svg
aria-hidden="true"
className="h-3 w-3 text-green-800 dark:text-yellow-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
></path>
</svg>
</span>

<h3 className="mb-1 ml-2 flex items-center font-mono text-xl font-bold tracking-tighter text-gray-900 dark:text-white">
{title}
</h3>
<time className="mb-2 block font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
{time}
</time>

{isMobile ? (
<>
<div className="mb-4">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="mb-2 font-mono text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
>
{isExpanded ? 'See Less' : 'See More'}
</button>
{isExpanded && (
<p className="mt-2 ml-2 font-mono text-base font-normal tracking-tight text-gray-500 dark:text-gray-400">
{description}
</p>
)}
</div>
</>
) : (
<p className="mb-4 ml-2 font-mono text-base font-normal tracking-tight text-gray-500 dark:text-gray-400">
{description}
</p>
)}

<div className="mt-4">
<a
href={link}
className={clsx(
classCondition,
'inline-flex items-center rounded-lg border-2 border-gray-200 bg-white px-4 py-2 font-mono text-sm font-bold text-gray-900 hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:text-green-700 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-zinc-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700'
)}
>
{button}
</a>
</div>
</li>
)
}
20 changes: 15 additions & 5 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,36 +53,46 @@ export default function Home() {
<div className="mt-6 ml-4 flex gap-6">
<Link
aria-label="Contact by Mail"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faEnvelope} size="2xl" />
</Link>
<Link
aria-label="Follow on GitLab"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://gitlab.com/aossie"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGitlab} size="2xl" />
</Link>
<Link
aria-label="Follow on GitHub"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://github.com/AOSSIE-Org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faGithub} size="2xl" />
</Link>
<Link
aria-label="Join on Discord"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://discord.com/invite/6mFZ2S846n"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faDiscord} size="2xl" />
</Link>
<Link
aria-label="Follow on Twitter"
className=" text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://twitter.com/aossie_org"
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon icon={faTwitter} size="2xl" />
</Link>
Expand Down