juanmanzanero/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from juancmandev/dev

Browse Source 
styles improvements
This commit is contained in:
Juan Manzanero 2024-07-02 04:07:59 +00:00 committed by GitHub
commit 5a4ce8e69f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/footer.tsx
View File

@ -4,8 +4,8 @@ import formatDate from "@/utils/format-date";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="border-t border-secondary px-6 py-10 text-center text-sm font-light md:px-16"> <footer className="border-t border-secondary px-6 py-10 text-center text-sm md:px-16 prose prose-invert">
<section className="space-y-2"> <section>
<p> <p>
Developed by{" "} Developed by{" "}
<strong className="font-bold text-primary">juancmandev</strong> <strong className="font-bold text-primary">juancmandev</strong>
@ -23,36 +23,32 @@ export default function Footer() {
</a> </a>
</Button> </Button>
</p> </p>
<p>Last built {formatDate(new Date())}</p> <p>Last built {formatDate(new Date())}.</p>
</section>
<section className="w-max mx-auto flex items-center gap-12">
<Button
asChild
size={null}
variant="link"
className="flex flex-col justify-center"
>
<a target="_blank" href="https://github.com/juancmandev/website">
<Code className="w-6" />
Source Code
</a>
</Button>
<Button
asChild
size={null}
variant="link"
className="flex flex-col justify-center"
>
<a target="_blank" href="https://www.juancman.dev/rss.xml">
<RssIcon className="w-6" />
RSS feed
</a>
</Button>
</section> </section>
<ul className="mx-auto mt-4 flex max-w-[200px] justify-between">
<li>
<Button
asChild
size={null}
variant="link"
className="flex flex-col justify-center"
>
<a target="_blank" href="https://github.com/juancmandev/website">
<Code className="w-6" />
Source Code
</a>
</Button>
</li>
<li>
<Button
asChild
size={null}
variant="link"
className="flex flex-col justify-center"
>
<a target="_blank" href="https://www.juancman.dev/rss.xml">
<RssIcon className="w-6" />
RSS feed
</a>
</Button>
</li>
</ul>
</footer> </footer>
); );
} }

2
src/layouts/Layout.astro
View File

@ -31,7 +31,7 @@ const { title, description, lang } = Astro.props;
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<main class="px-4 min-h-screen max-w-[65ch] py-32 mx-auto"> <main class="px-4 min-h-screen max-w-[65ch] py-28 mx-auto">
<slot /> <slot />
</main> </main>
<Footer /> <Footer />

60
src/pages/index.astro
View File

@ -17,32 +17,28 @@ sortContentByDate(allProjects);
const last3Projects = allProjects.slice(0, 3); const last3Projects = allProjects.slice(0, 3);
--- ---
<Layout title="juancmandev" description="Welcome to my domain, stranger."> <Layout
<div class="space-y-16"> title="juancmandev"
<section class="flex flex-col items-start gap-5"> description="Welcome to my domain, stranger. I am juancmandev, web developer, Linux enthusiast, and privacy defender."
<div class="space-y-1"> >
<h1 class="text-3xl font-bold text-primary"> <div class="prose prose-invert">
Welcome to my domain, stranger. <h1 class="text-primary">Welcome to my domain, stranger.</h1>
</h1> <p>
<h2 class="text-xl"> I am <span class="font-semibold text-primary">juancmandev</span>, <strong
I am <span class="font-semibold text-primary" >Web Developer</strong
>juancmandev</span >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
>. </p>
</h2> <p>
<p class="text-lg font-light"> This is my <strong>website</strong>, a piece of the Internet that I
I like computers, and all stuff related to technology. could call my <strong>home base</strong>. Here, I share my knowledge
</p> about my career and talk about other topics.
<p class="text-lg font-light"> </p>
Take a seat, drink some tea, and enjoy your stay.
</p>
</div>
</section>
<section> <section>
<h2 class="text-3xl">Latest posts</h2> <h2>Latest posts</h2>
<ul class="mt-4 flex flex-col gap-4"> <ul class="mt-0 p-0 list-none">
{ {
last3Blogs.map((blogpost: any) => ( last3Blogs.map((blogpost: any) => (
<li> <li class="p-0">
<PostItem <PostItem
type="blog" type="blog"
slug={blogpost.slug} slug={blogpost.slug}
@ -53,16 +49,18 @@ const last3Projects = allProjects.slice(0, 3);
)) ))
} }
</ul> </ul>
<LinkButton variant="secondary" href="/blog" className="mt-8" <LinkButton
>More posts</LinkButton variant="secondary"
href="/blog"
className="no-underline">More posts</LinkButton
> >
</section> </section>
<section> <section>
<h2 class="text-3xl">Latest projects</h2> <h2>Latest projects</h2>
<ul class="mt-4 flex flex-col gap-4"> <ul class="mt-0 p-0 list-none">
{ {
last3Projects.map((project: any) => ( last3Projects.map((project: any) => (
<li> <li class="p-0">
<PostItem <PostItem
type="portfolio" type="portfolio"
slug={project.slug} slug={project.slug}
@ -73,8 +71,10 @@ const last3Projects = allProjects.slice(0, 3);
)) ))
} }
</ul> </ul>
<LinkButton variant="secondary" href="/portfolio" className="mt-8" <LinkButton
>More projects</LinkButton variant="secondary"
href="/portfolio"
className="no-underline">More projects</LinkButton
> >
</section> </section>
</div> </div>