hero updates

alvareztech · Aug 31, 2022 · f961970 · f961970 · vercel · Aug 31, 2022
1 parent d368241
commit f961970
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -1,8 +1,6 @@
 import Head from 'next/head'
 import Link from 'next/link'
-
-const name = 'ALVAREZ.tech'
-export const siteTitle = 'ALVAREZ.tech, Software Development by Daniel'
+import {titleSite} from "../lib/texts";
 
 const navigation2 = [
   {
@@ -60,7 +58,7 @@ export default function Layout({children, home}) {
 
       <meta property="og:site_name" content="ALVAREZ.tech"/>
       <meta property="og:image" content="https://alvarez.tech/image.png"/>
-      <meta property="og:title" content={siteTitle}/>
+      <meta property="og:title" content={titleSite}/>
 
       <meta property="fb:app_id" content="269827340075535"/>
 
@@ -127,6 +125,25 @@ export default function Layout({children, home}) {
           ))}
         </div>
       </nav>
+
+      {home &&
+        <div className="mx-auto mt-16 max-w-7xl px-4 sm:mt-24">
+          <div className="text-center">
+            <h1
+              className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
+              <span className="block xl:inline">Daniel</span>{' '}
+              <span className="block text-blue-600 xl:inline">Alvarez</span>
+            </h1>
+            <p
+              className="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+              Hi! I&apos;m a software engineer. I share some projects and
+              content I develop in my spare time. Most things are related
+              to <span className="text-blue-500 font-medium">tech</span> and
+              code.
+            </p>
+          </div>
+        </div>
+      }
     </header>
 
 

diff --git a/lib/texts.js b/lib/texts.js
@@ -1,7 +1,5 @@
 export const titleSite = 'ALVAREZ.tech'
 
-export const subtitleSite = 'On this site, I share some small projects and content I develop in my spare time. Most things are related to tech and code.'
-
 export const titleCourses = "Courses"
 export const subtitleCourses = "Some courses I have taught in the past and their resources. 🧐"
 

diff --git a/pages/index.js b/pages/index.js
@@ -1,63 +1,56 @@
 import Head from 'next/head'
 import Layout from '../components/layout'
-import { getAllPosts } from '../lib/posts'
+import {getAllPosts} from '../lib/posts'
 import Link from 'next/link'
 import Date from '../components/date'
-import { classNames, tagColor } from "../lib/util";
-import { titleSite, subtitleSite } from '../lib/texts'
+import {classNames} from "../lib/util";
+import {titleSite} from '../lib/texts'
 
-export default function Home({ posts }) {
+export default function Home({posts}) {
   return (
     <Layout home>
       <Head>
-        <title>{ titleSite }</title>
+        <title>{titleSite}</title>
       </Head>
 
-      <section className="bg-gradient-to-r from-cyan-500 to-blue-500">
-        <div
-          className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
-          <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
-            <span className="block text-gray-800">
-              Hi! I am Daniel
-            </span>
-            <span className="block text-white">
-              { subtitleSite }
-            </span>
-          </h2>
-        </div>
-      </section>
-
       <div
         className="bg-white max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
         <div
           className="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
           <div>
-            <h2 className="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
+            <h2
+              className="text-2xl tracking-tight font-bold text-gray-900 sm:text-3xl">
               Some posts
             </h2>
           </div>
 
-          <div className="mt-12 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
+          <div
+            className="mt-4 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
             {posts.map((post) => (
               <div key={post.slug}>
                 {post.youtubeId &&
                   <Link href={"/" + post.slug}>
-                    <img className='mb-2 drop-shadow-md rounded-lg h-48 w-full object-cover' src={'https://img.youtube.com/vi/' + post.youtubeId + '/mqdefault.jpg'} />
+                    <img
+                      className='mb-2 drop-shadow-md rounded-lg h-48 w-full object-cover'
+                      src={'https://img.youtube.com/vi/' + post.youtubeId + '/mqdefault.jpg'}/>
                   </Link>
                 }
                 <div>
                   <Link href={"/tag/" + post.tags?.[0]}>
                     <a className="inline-block">
-                      <span className={classNames("text-white", "uppercase", getColor(post.tags?.[0]), 'inline-flex items-center px-2 rounded text-sm font-bold')}>
+                      <span
+                        className={classNames("text-white", "uppercase", getColor(post.tags?.[0]), 'inline-flex items-center px-2 rounded text-sm font-bold')}>
                         {post.tags?.[0]}
                       </span>
                     </a>
                   </Link>
                 </div>
                 <Link href={"/" + post.slug}>
                   <a className="block mt-4">
-                    <p className="text-xl font-semibold text-gray-900">{post.title}</p>
-                    <p className="mt-3 text-base text-gray-500">{post.summary}</p>
+                    <p
+                      className="text-xl font-semibold text-gray-900">{post.title}</p>
+                    <p
+                      className="mt-3 text-base text-gray-500">{post.summary}</p>
                   </a>
                 </Link>
                 {post.tags?.slice(1).map(tag => (
@@ -69,7 +62,7 @@ export default function Home({ posts }) {
                 ))}
                 <div className="mt-6 flex items-center">
                   <div className="flex space-x-1 text-sm text-gray-500">
-                    <Date dateString={post.date} />
+                    <Date dateString={post.date}/>
                   </div>
                 </div>
               </div>))}