add logo and favicon

byandrev · Aug 25, 2023 · 898a694 · 898a694
1 parent e580625
commit 898a694
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 48 deletions.
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
@@ -23,6 +23,10 @@ type Props = {
 async function RootLayout({ children, params: { lang = "es" } }: Props) {
   return (
     <html lang={lang} dir={dir(lang)}>
+      <head>
+        <link rel="icon" href="/assets/favicon.ico" sizes="any" />
+      </head>
+
       <body
         className={`bg-white dark:bg-neutral-900 text-gray-700 dark:text-gray-200 antialiased ${font.className}`}
       >
@@ -36,4 +40,4 @@ async function RootLayout({ children, params: { lang = "es" } }: Props) {
   );
 }
 
-export default RootLayout;
+export default RootLayout;
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -1,4 +1,3 @@
-import Container from "@/components/Container";
 import Link from "@/components/Link";
 import { USER_LINKS, USER_PROJECTS } from "@/config";
 import { useTranslation } from "../i18n";
@@ -12,36 +11,34 @@ export default async function Home({ params: { lang } }: Props) {
 
   return (
     <>
-      <Container>
-        <div className="space-y-6">
-          <h1 className="text-2xl font-bold">{t("title")}</h1>
-          <p>{t("description")}</p>
-          <p>{t("phrase")}</p>
-          <p>{t("last_projects")}:</p>
-
-          <ul className="list-disc pl-6">
-            {USER_PROJECTS.map((project) => (
-              <li key={project.url}>
-                <Link href={project.url} target="_blank">
-                  {project.name}
-                </Link>
-              </li>
-            ))}
-          </ul>
-
-          <p>{t("social_links")}:</p>
-
-          <ul className="flex gap-3 pl-2">
-            {USER_LINKS.map((project) => (
-              <li key={project.url}>
-                <Link href={project.url} target="_blank">
-                  {project.text}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </Container>
+      <div className="space-y-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <p>{t("description")}</p>
+        <p>{t("phrase")}</p>
+        <p>{t("last_projects")}:</p>
+
+        <ul className="list-disc pl-6">
+          {USER_PROJECTS.map((project) => (
+            <li key={project.url}>
+              <Link href={project.url} target="_blank">
+                {project.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+
+        <p>{t("social_links")}:</p>
+
+        <ul className="flex gap-3 pl-2">
+          {USER_LINKS.map((project) => (
+            <li key={project.url}>
+              <Link href={project.url} target="_blank">
+                {project.text}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
     </>
   );
 }
@@ -53,4 +50,4 @@ export async function generateMetadata({ params: { lang } }: Props) {
     title: "Andres Parra - Software Engineer | @byandrev",
     description: t("description") + "Andres Parra - Software Engineer",
   };
-}
+}
diff --git a/src/app/[lang]/posts/[slug]/page.tsx b/src/app/[lang]/posts/[slug]/page.tsx
@@ -3,11 +3,10 @@ import "dayjs/locale/es";
 import Image from "next/image";
 
 import { useTranslation } from "@/app/i18n";
-import Container from "@/components/Container";
 import PostContent from "@/components/PostContent";
 import { Post } from "@/interfaces/Post";
-import getPost from "./getPostService";
 import Link from "next/link";
+import getPost from "./getPostService";
 
 type Props = {
   params: { slug: string; lang: string };
@@ -19,7 +18,7 @@ export default async function PostPage({ params: { slug, lang } }: Props) {
   const { t } = await useTranslation(lang);
 
   return (
-    <Container>
+    <div>
       {post ? (
         <div>
           <article>
@@ -60,7 +59,7 @@ export default async function PostPage({ params: { slug, lang } }: Props) {
           </div>
         </div>
       )}
-    </Container>
+    </div>
   );
 }
 

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -5,27 +5,39 @@ import Container from "@/components/Container";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
 import Link from "@/components/Link";
 import ThemeSwitch from "@/components/ThemeSwitch";
+import Image from "next/image";
 
 function Header({ lang }: { lang: string }) {
   const { t } = useTranslation(lang);
 
   return (
-    <header className="py-6 mb-6">
+    <header className="py-6 mb-2">
       <Container>
-        <nav className="flex justify-between">
-          <div className="flex space-x-4 j">
-            <Link href={`/${lang}`} color="text-inherit">
-              {t("menu.about-me")}
-            </Link>
-            <Link href={`/${lang}/posts`} color="text-inherit">
-              {t("menu.posts")}
-            </Link>
+        <div className="flex text-sm justify-between mb-6">
+          <div>
+            <Image
+              src="/assets/logo.svg"
+              width={24}
+              height={24}
+              alt="byandrev logo"
+            />
           </div>
 
           <div className="flex gap-2">
             <LanguageSwitcher lang={lang} />
             <ThemeSwitch />
           </div>
+        </div>
+      </Container>
+
+      <Container>
+        <nav className="flex space-x-4 text-md">
+          <Link href={`/${lang}`} color="text-inherit">
+            {t("menu.about-me")}
+          </Link>
+          <Link href={`/${lang}/posts`} color="text-inherit">
+            {t("menu.posts")}
+          </Link>
         </nav>
       </Container>
     </header>