ajustar estilos

package.json

@@ -34,6 +34,7 @@
 	},
 	"dependencies": {
 		"@astrojs/rss": "4.0.1",
+		"@fortawesome/fontawesome-free": "^6.7.2",
 		"astro": "4.0.8",
 		"astro-font": "^0.0.72"
 	},
@@ -44,9 +45,10 @@
 		"@pagefind/default-ui": "^1.0.4",
 		"@tailwindcss/typography": "0.5.10",
 		"@tinacms/cli": "^1.5.30",
+		"@types/jquery": "^3.5.32",
 		"@typescript-eslint/parser": "^6.16.0",
 		"clsx": "2.0.0",
-		"eslint": "^8.56.0",
+		"eslint": "^8.57.1",
 		"eslint-plugin-astro": "^0.31.0",
 		"eslint-plugin-jsx-a11y": "^6.8.0",
 		"husky": "^8.0.3",

src/components/Category.astro

@@ -7,15 +7,15 @@ const unsluglifyNameCategory = sluglify(name.toLowerCase())
 
 const isActive =
 	activeCategory?.toLocaleLowerCase() === unsluglifyNameCategory ||
-	(currentPath === '/' && name === 'View All')
+	(currentPath === '/posts' && name === 'View All')
 ---
 
 <a
-	href={name === 'View All' ? '/' : sluglify(`/category/${unsluglifyNameCategory}/1`)}
+	href={name === 'View All' ? '/posts' : sluglify(`/category/${unsluglifyNameCategory}/1`)}
 	class={cn(
 		`text-gray-600 dark:text-gray-300  pb-2.5 first-letter:uppercase font-medium hover:text-gray-800 border-b-2 border-opacity-0 dark:border-opacity-0 border-black dark:border-white dark:hover:border-white hover:border-opacity-100 transition-colors duration-150 ease-linear  `,
 		isActive &&
-			`border-black border-b-2 text-black z-10  dark:border-white dark:text-white dark:border-opacity-100 border-opacity-100`
+			`border-black border-b-2 text-black z-10  dark:border-[#16c0f0] dark:text-white dark:border-opacity-100 border-opacity-100`
 	)}
 >
 	{name}

src/components/Header.astro

@@ -3,13 +3,15 @@ import HeaderLink from '@/components/HeaderLink'
 import MenuIcon from './icons/MenuIcon.astro'
 import Search from '@/components/Search'
 import TagIcon from './icons/TagIcon.astro'
-import ToggleTheme from './ToggleTheme.astro'
+// import ToggleTheme from './ToggleTheme.astro'
 import { SOCIALNETWORKS } from '@/data/links'
 ---
 
-<header class='relative flex items-center h-12 font-semibold'>
-	<a class='text-lg mr-auto' href='/'>Home</a>
-
+<header class='relative px-16 navbar flex items-center h-16 font-semibold'>
+	<div class='mr-auto'>
+		<a class='navbar-brand' href='/'><span>j</span>vela</a>
+		<a class='text-lg mr-auto ml-3' href='/posts'>Blog</a>
+	</div>
 	<div
 		id='astro-header-drawer'
 		class='shadow rounded-l-lg md:bg-transparent dark:md:bg-transparent bg-white dark:bg-[#0a0910] md:shadow-none md:rounded-none md:border-none md:h-auto md:static absolute transition-transform duration-300 ease-in translate-x-96 md:translate-x-0 top-12 -right-5 pl-4 pt-6 pb-4 md:p-0 h-[200px] w-[200px] z-50'
@@ -41,7 +43,7 @@ import { SOCIALNETWORKS } from '@/data/links'
 		<div>
 			<Search />
 		</div>
-		<ToggleTheme />
+		<!-- <ToggleTheme /> -->
 		<button id='astro-header-drawer-button' type='button' class='md:ml-6 md:hidden'>
 			<MenuIcon />
 			<span class='sr-only'>Show Menu</span>

src/components/ListCategories.astro

@@ -1,12 +1,12 @@
 ---
-import { getCategories } from '@/utils'
 import Category from '@/components/Category'
+import { getCategories } from '@/utils'
 const categories = await getCategories()
 
 const { activeCategory } = Astro.props
 ---
 
-<div class='relative flex flex-wrap min-w-full gap-5'>
+<div class='justify-center mt-12 relative flex flex-wrap min-w-full gap-10'>
 	<Category />
 	{
 		categories.map((category: string) => (

src/components/ListPosts.astro

@@ -1,7 +1,7 @@
 ---
-import type { CollectionEntry } from 'astro:content'
 import PostCard from '@/components/PostCard'
 import { cn } from '@/utils'
+import type { CollectionEntry } from 'astro:content'
 
 type Props = {
 	posts: CollectionEntry<'blog'>[]
@@ -13,7 +13,7 @@ const { posts, FirstBig = false } = Astro.props
 
 <section
 	class={cn(
-		`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3  gap-8 mt-3`,
+		`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3  justify-center max-w-7xl w-full mx-auto  gap-10 mt-3 `,
 		FirstBig && `md:[&>*:first-child]:col-span-2`
 	)}
 >

src/components/TitlePage.astro

@@ -1,14 +1,9 @@
 ---
-import Title from './Title.astro'
-import Shape from './icons/Shape.astro'
 type Props = {
 	title: string
 }
 
 const { title } = Astro.props
 ---
 
-<div class='flex justify-start items-center gap-2 title'>
-	<Shape />
-	<Title>{title}</Title>
-</div>
+<!-- <div class='flex justify-start items-center gap-2 title'> --><!-- <Shape /> --><!-- <Title>{title}</Title> --><!-- </div> -->

src/content/blog/test-file.mdx

@@ -0,0 +1,12 @@
+---
+heroImage: /src/assets/images/WhatsApp Image 2024-12-29 at 19.17.53.jpeg
+category: Category 1
+description: fefefe
+pubDate: 2025-01-05T23:00:00.000Z
+tags:
+  - ' 2'
+  - '[1]'
+title: test file
+---
+
+tetssts

src/layouts/BaseLayout.astro

@@ -1,9 +1,9 @@
 ---
 import BaseHead from '@/components/BaseHead'
-import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-import ProviderTheme from '@/components/ProviderTheme'
+import Header from '@/components/Header'
 import ProviderAnimations from '@/components/ProviderAnimations'
+import ProviderTheme from '@/components/ProviderTheme'
 import TwSizeIndicator from '@/components/TwSizeIndicator'
 import EditBlog from '@/components/editBlog'
 const { title, description, image, articleDate } = Astro.props
@@ -16,9 +16,9 @@ const { title, description, image, articleDate } = Astro.props
 		<ProviderAnimations />
 	</head>
 
-	<body class='bg-white text-stone-950 dark:bg-[#0a0910] dark:text-white'>
+	<body class='bg-[#263445] dark:text-white'>
 		<main
-			class='px-5 sm:mx-auto sm:max-w-2xl sm:px-8 lg:px-0 antialiased md:max-w-6xl grid gap-12 mt-4 overflow-hidden md:overflow-visible'
+			class='px-5 mt-16 sm:mx-auto sm:max-w-2xl sm:px-8 lg:px-0 antialiased md:max-w-full grid gap-12 overflow-hidden md:overflow-visible'
 		>
 			<Header />
 			<slot />

src/pages/index.astro

@@ -1,23 +1,74 @@
 ---
 import ListCategories from '@/components/ListCategories'
 import ListPosts from '@/components/ListPosts'
+
 import TitlePage from '@/components/TitlePage'
 import BaseLayout from '@/layouts/BaseLayout'
 import { getPosts } from '@/utils'
 import { siteConfig } from '@/site-config'
 
-const MAX_POSTS = 5 // max number of posts to show on the home page
+const MAX_POSTS = 3 // max number of posts to show on the home page
 const posts = await getPosts(MAX_POSTS)
 ---
 
 <BaseLayout title='Home'>
-	<TitlePage title={siteConfig.title} />
-	<ListCategories />
-
-	<div>
-		<h2 class='text-lg font-medium tracking-wide text-end'>Latest Posts</h2>
-		<ListPosts FirstBig={true} posts={posts} />
+	<div class='home'>
+		<div class='overlay'>
+			<div class=''>
+				<div class='intro display-table'>
+					<div class='display-table-cell'>
+						<div class='text-center'>
+							<h1>Jose Vela</h1>
+							<p class='text-center my-9' aria-label="Hi! I'm a developer">
+								I'm A <span class='typewriter thick'></span>
+							</p>
+							<div class='my-btn'>
+								<a href='#contact' class='main-btn custom-btn mr-8'>Contact Me</a>
+								<a
+									href='https://drive.google.com/file/d/174KjrqbZBOi60N-1JiScRbpo33-SfwU1/view?usp=sharing'
+									class='main-btn'
+									target='_blank'>Download CV</a
+								>
+							</div>
+						</div>
+					</div>
+					<ul class='list-unstyled text-left'>
+						<li>
+							<a
+								href='https://www.linkedin.com/in/jose-vela-333244181/'
+								aria-label='LinkedIn Profile '
+								target='_blank'><i class='fab fa-linkedin'></i></a
+							>
+						</li>
+						<li>
+							<a href='https://github.com/vela91' aria-label='GitHub Profile ' target='_blank'
+								><i class='fab fa-github'></i></a
+							>
+						</li>
+						<li>
+							<a href='https://x.com/vela_code91' aria-label='Twitter Profile ' target='_blank'
+								><i class='fab fa-twitter'></i></a
+							>
+						</li>
+						<li>
+							<a href='https://wa.me/34613353955' aria-label='WhatsApp Contact ' target='_blank'
+								><i class='fab fa-whatsapp'></i></a
+							>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
 	</div>
+	<!-- <TitlePage title={siteConfig.title} /> -->
+	<!-- <ListCategories /> -->
+
+	<section class='grif justify-center mx-auto'>
+		<h2 class='font-bold my-8 tracking-wide text-left'>Latest Posts</h2>
+		<!-- <div class="m-x-auto max-w-7xl flex justify-center"> -->
+		<ListPosts FirstBig={false} posts={posts} />
+		<!-- </div> -->
+	</section>
 </BaseLayout>
 
 <script>

src/pages/posts.astro

@@ -0,0 +1,39 @@
+---
+import ListCategories from '@/components/ListCategories'
+import ListPosts from '@/components/ListPosts'
+import TitlePage from '@/components/TitlePage'
+import BaseLayout from '@/layouts/BaseLayout'
+import { getPosts } from '@/utils'
+import { siteConfig } from '@/site-config'
+
+// const MAX_POSTS = 5 // max number of posts to show on the home page
+const posts = await getPosts()
+---
+
+<BaseLayout title='Blog'>
+	<!-- <TitlePage title={siteConfig.title} /> -->
+	<ListCategories />
+
+	<div>
+		<!-- <h2 class='text-lg font-medium tracking-wide text-end'>Latest Posts</h2> -->
+		<ListPosts FirstBig={false} posts={posts} />
+	</div>
+</BaseLayout>
+
+<script>
+	import { animate } from 'motion'
+	const showAnimations = localStorage.getItem('animations') === 'true'
+
+	if (showAnimations) {
+		animate(
+			'.title',
+			{ y: [80, 0], opacity: [0, 1] },
+			{
+				duration: 2.5,
+				opacity: { duration: 3 },
+
+				offset: [0, 0.55, 0.75]
+			}
+		)
+	}
+</script>

src/pages/tags/index.astro

@@ -1,6 +1,6 @@
 ---
-import BaseLayout from '@/layouts/BaseLayout'
 import TitlePage from '@/components/TitlePage'
+import BaseLayout from '@/layouts/BaseLayout'
 import { getTags } from '@/utils'
 const tags = await getTags()
 ---