raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱mobile responsiveness for navbar Menu

Browse Source
This commit is contained in:
RJ
2025-12-05 15:51:16 +02:00
parent bba507a7e8
commit 919e638144
8 changed files with 355 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/[locale]/page.tsx
View File

@@ -2,7 +2,7 @@ import { Link } from '@/src/i18n/navigation'
import Image from 'next/image'
import { getAllPosts } from '@/lib/markdown'
import { formatDate } from '@/lib/utils'
import { ThemeToggle } from '@/components/theme-toggle'
import { HeroHeader } from '@/components/layout/hero-header'
import { setRequestLocale, getTranslations } from 'next-intl/server'
type Props = {
@@ -29,29 +29,11 @@ export default async function HomePage({ params }: Props) {
<div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
<div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
{/* Logo */}
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
<div className="flex items-center gap-3">
<Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
<span className="font-mono text-xs text-slate-500 uppercase tracking-widest">
{t('terminalVersion')}
</span>
</div>
<div className="flex gap-4 items-center">
<Link
href="/blog"
className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
>
[{tNav('blog')}]
</Link>
<Link
href="/about"
className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
>
[{tNav('about')}]
</Link>
<ThemeToggle />
</div>
</div>
<HeroHeader
terminalVersion={t('terminalVersion')}
blogLabel={tNav('blog')}
aboutLabel={tNav('about')}
/>
<div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
<p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">

80
app/globals.css
View File

@@ -449,3 +449,83 @@
margin-bottom: 3rem;
}
}
/* === MOBILE RESPONSIVE UTILITIES === */
@media (max-width: 767px) {
.show-mobile-only {
display: block;
}
.hide-mobile {
display: none !important;
}
}
@media (min-width: 768px) {
.show-mobile-only {
display: none !important;
}
.hide-mobile {
display: block;
}
}
/* === BUTTON GLITCH EFFECT === */
@layer utilities {
.glitch-btn-cyber {
--glitch-shimmy: 5;
--glitch-clip-1: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
--glitch-clip-2: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
--glitch-clip-3: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
--glitch-clip-4: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
--glitch-clip-5: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
--glitch-clip-6: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
}
.glitch-overlay {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
color: var(--neon-cyan);
z-index: 10;
}
.glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {
display: flex;
animation: glitch-btn-animate 2s infinite;
}
@keyframes glitch-btn-animate {
0% { clip-path: var(--glitch-clip-1); }
2%, 8% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
6% { clip-path: var(--glitch-clip-2); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
9% { clip-path: var(--glitch-clip-2); transform: translate(0, 0); }
10% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
13% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
14%, 21% { clip-path: var(--glitch-clip-4); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
25%, 30% { clip-path: var(--glitch-clip-5); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
35%, 45% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * -1%), 0); }
40% { clip-path: var(--glitch-clip-6); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
50% { clip-path: var(--glitch-clip-6); transform: translate(0, 0); }
55% { clip-path: var(--glitch-clip-3); transform: translate(calc(var(--glitch-shimmy) * 1%), 0); }
60% { clip-path: var(--glitch-clip-3); transform: translate(0, 0); }
61%, 100% { clip-path: var(--glitch-clip-4); }
}
.glitch-btn-subtle {
--glitch-shimmy: 2;
}
.glitch-overlay-pink { color: var(--neon-pink); }
.glitch-overlay-purple { color: var(--neon-purple); }
.glitch-overlay-magenta { color: var(--neon-magenta); }
@media (prefers-reduced-motion: reduce) {
.glitch-btn-cyber:is(:hover, :focus-visible) .glitch-overlay {
animation: none;
display: none;
}
}
}