Basic template

Author: pintoderian

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"]
 }

.prettierignore

@@ -0,0 +1,3 @@
+/.next
+/build
+/node_modules

app/components/header/_children/btn-language.js

@@ -0,0 +1,16 @@
+import { useLanguageStore } from '@/store/language';
+import dataES from '@/data/es/data';
+import dataEN from '@/data/en/data';
+
+const BtnLanguage = () => {
+  const { language, setLanguage, setData } = useLanguageStore();
+
+  const handleLanguage = () => {
+    setLanguage(language === 'ES' ? 'EN' : 'ES');
+    setData(language === 'ES' ? dataES : dataEN);
+  };
+
+  return <button onClick={handleLanguage}>{language}</button>;
+};
+
+export default BtnLanguage;

app/components/header/_children/btn-theme.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { IconDark, IconLight } from '../../icons';
+
+const BtnTheme = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const handleTheme = () => {
+    return setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  if (!mounted) {
+    return (
+      <button className="bg-gray-200 rounded-lg dark:bg-neutral-800 px-1.5 py-1.5 hover:ring-2 ring-gray-300 transition-all">
+        <span className="block w-5 h-5"></span>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      className="bg-gray-200 rounded-lg dark:bg-neutral-800 px-1.5 py-1.5 hover:ring-2 ring-gray-300 transition-all"
+      onClick={handleTheme}
+    >
+      {theme === 'light' ? <IconDark /> : <IconLight />}
+    </button>
+  );
+};
+
+export default BtnTheme;

app/components/header/index.js

@@ -0,0 +1,36 @@
+'use client';
+
+import Link from 'next/link';
+import BtnLanguage from './_children/btn-language';
+import BtnTheme from './_children/btn-theme';
+import useTranslate from '@/hooks/useTranslate';
+
+const Header = () => {
+  const { translate } = useTranslate();
+  return (
+    <header className="flex items-center justify-between flex-row w-full py-4 border-b border-neutral-100 dark:border-neutral-800">
+      <nav className="w-8/12">
+        <ul className="flex flex-row gap-4">
+          <li className="font-semibold text-neutral-800 dark:text-white">
+            <Link href="#about">{translate('about')}</Link>
+          </li>
+          <li className="font-normal text-neutral-600 dark:text-neutral-500">
+            {translate('experience')}
+          </li>
+          <li className="font-normal text-neutral-600 dark:text-neutral-500">
+            {translate('proyects')}
+          </li>
+          <li className="font-normal text-neutral-600 dark:text-neutral-500">
+            {translate('skills')}
+          </li>
+        </ul>
+      </nav>
+      <div className="btn-actions flex flex-row justify-end gap-4 w-4/12">
+        <BtnLanguage />
+        <BtnTheme />
+      </div>
+    </header>
+  );
+};
+
+export default Header;

app/components/icons/index.js

@@ -0,0 +1,43 @@
+export const IconDark = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+    </svg>
+  );
+};
+
+export const IconLight = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="4"></circle>
+      <path d="M12 2v2"></path>
+      <path d="M12 20v2"></path>
+      <path d="m4.93 4.93 1.41 1.41"></path>
+      <path d="m17.66 17.66 1.41 1.41"></path>
+      <path d="M2 12h2"></path>
+      <path d="M20 12h2"></path>
+      <path d="m6.34 17.66-1.41 1.41"></path>
+      <path d="m19.07 4.93-1.41 1.41"></path>
+    </svg>
+  );
+};

app/globals.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

app/layout.js

@@ -1,17 +1,37 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import localFont from 'next/font/local';
+import './globals.css';
+import { Providers } from './provider';
 
-const inter = Inter({ subsets: ['latin'] })
+const graphik = localFont({
+  src: [
+    {
+      path: '../public/fonts/Graphik-Regular.ttf',
+      weight: '400',
+      style: 'normal'
+    },
+    {
+      path: '../public/fonts/Graphik-Medium.ttf',
+      weight: '600',
+      style: 'bold'
+    }
+  ],
+  variable: '--font-graphik',
+  display: 'swap'
+});
 
 export const metadata = {
   title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  description: 'Generated by create next app'
+};
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" className={`${graphik.variable}`} suppressHydrationWarning>
+      <body className="text-black bg-white dark:text-white dark:bg-[#111010]">
+        <Providers>
+          <div className="px-8 max-w-[1100px] mx-auto">{children}</div>
+        </Providers>
+      </body>
     </html>
-  )
+  );
 }