fix(portfolio): fixed navbar positioning with viewport compensation

.gitignore

@@ -37,6 +37,7 @@ next-env.d.ts
 
 # AI
 CLAUDE.md
+.cursor
 
 # Personal files
 gptPrompt.md

apps/lab/docusaurus.config.js

@@ -58,6 +58,11 @@ const config = {
 
   themeConfig: {
     image: 'img/lab-social-card.jpg',
+    colorMode: {
+      defaultMode: 'dark',
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
     navbar: {
       title: 'Lab',
       logo: {

apps/portfolio/app/[locale]/layout.tsx

@@ -144,7 +144,7 @@ export default async function LocaleLayout({
         <NextIntlClientProvider messages={messages}>
           <Providers>
             <Navigation />
-            <main>{children}</main>
+            <main className="pt-16">{children}</main>
             <Footer />
           </Providers>
         </NextIntlClientProvider>

apps/portfolio/src/shared/components/layout/Navigation.tsx

@@ -29,7 +29,7 @@ import { fadeInUp } from '@/shared/utils/motion';
 export function Navigation() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
 
   // Prevent hydration mismatch by only rendering theme icon after mount
   useEffect(() => {
@@ -63,7 +63,7 @@ export function Navigation() {
   };
 
   const toggleTheme = () => {
-    setTheme(theme === 'dark' ? 'light' : 'dark');
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   };
 
   const localeOptions = useMemo(
@@ -97,7 +97,7 @@ export function Navigation() {
 
   return (
     <m.nav
-      className="sticky top-0 z-40 w-full backdrop-blur-sm bg-background/95 border-b border-border"
+      className="fixed inset-x-0 top-0 z-40 w-full backdrop-blur-sm bg-background/95 border-b border-border"
       aria-label={tNavigation('ariaLabel')}
       initial={{ y: -48, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
@@ -177,7 +177,7 @@ export function Navigation() {
               className="inline-flex items-center justify-center rounded-md font-mono font-medium transition-colors px-3 py-2 bg-transparent text-foreground hover:bg-background-secondary w-10 h-10"
               aria-label={tNavigation('theme.toggle')}
             >
-              {mounted ? (theme === 'dark' ? '☀️' : '🌙') : null}
+              {mounted ? (resolvedTheme === 'dark' ? '☀️' : '🌙') : null}
             </button>
 
             {/* Mobile Menu Button */}

apps/portfolio/src/shared/constants/navigation.ts

@@ -5,6 +5,8 @@
  * used in Navigation and Footer components.
  */
 
+import { personalInfo } from './personal';
+
 export interface NavSection {
   key: 'home' | 'about' | 'projects' | 'contact';
   sectionId: string;
@@ -35,8 +37,8 @@ export const NAV_SECTIONS: NavSection[] = [
 ];
 
 export const SOCIAL_LINK_URLS = {
-  github: 'https://github.com/usuario',
-  linkedin: 'https://linkedin.com/in/usuario',
+  github: personalInfo.social.github,
+  linkedin: personalInfo.social.linkedin,
 } as const;
 
 export type SocialLinkKey = keyof typeof SOCIAL_LINK_URLS;

apps/portfolio/tests/shared/components/layout/Footer.test.tsx

@@ -54,13 +54,16 @@ describe('Footer Component', () => {
     it('should have correct href for GitHub link', () => {
       renderFooter();
       const githubLink = screen.getByRole('link', { name: /github/i });
-      expect(githubLink).toHaveAttribute('href', 'https://github.com/usuario');
+      expect(githubLink).toHaveAttribute('href', 'https://github.com/GMNAPI');
     });
 
     it('should have correct href for LinkedIn link', () => {
       renderFooter();
       const linkedinLink = screen.getByRole('link', { name: /linkedin/i });
-      expect(linkedinLink).toHaveAttribute('href', 'https://linkedin.com/in/usuario');
+      expect(linkedinLink).toHaveAttribute(
+        'href',
+        'https://www.linkedin.com/in/angel-hidalgo-barreiro'
+      );
     });
 
     it('should open social links in new tab', () => {

apps/portfolio/tests/shared/components/layout/Navigation.test.tsx

@@ -112,10 +112,10 @@ describe('Navigation Component', () => {
   });
 
   describe('Styles', () => {
-    it('should have sticky positioning', () => {
+    it('should have fixed positioning', () => {
       renderNavigation();
       const nav = screen.getByRole('navigation');
-      expect(nav).toHaveClass('sticky');
+      expect(nav).toHaveClass('fixed');
     });
 
     it('should have proper z-index', () => {
@@ -316,6 +316,7 @@ describe('Navigation Component', () => {
 
       mockUseTheme.mockReturnValue({
         theme: 'light',
+        resolvedTheme: 'light',
         setTheme: mockSetTheme,
       });
 
@@ -332,6 +333,7 @@ describe('Navigation Component', () => {
 
       mockUseTheme.mockReturnValue({
         theme: 'dark',
+        resolvedTheme: 'dark',
         setTheme: mockSetTheme,
       });