diff options
author | Valentin Popov <valentin@popov.link> | 2025-06-11 19:34:34 +0300 |
---|---|---|
committer | Valentin Popov <valentin@popov.link> | 2025-06-11 19:34:34 +0300 |
commit | 604e507b311171f0f5d914ce28a3d42a2281a5e6 (patch) | |
tree | 43395e26f5ddf6dd8ae6c83ba864aeba0e339715 /src | |
parent | 3d6aedd272a2c73d65ce79036d63e6916e8f71b5 (diff) | |
download | popov.link-604e507b311171f0f5d914ce28a3d42a2281a5e6.tar.xz popov.link-604e507b311171f0f5d914ce28a3d42a2281a5e6.zip |
refactor: update blog layout and components
- Removed the PostSummary component and replaced it with a new PostElement component for better post display.
- Introduced SocialLinks and Welcome sections to enhance the homepage layout.
- Updated the index page to utilize the new sections, improving overall structure and user experience.
Diffstat (limited to 'src')
-rw-r--r-- | src/components/PostElement.astro | 4 | ||||
-rw-r--r-- | src/components/PostSummary.astro | 49 | ||||
-rw-r--r-- | src/components/Sections/SocialLinks.astro | 70 | ||||
-rw-r--r-- | src/components/Sections/Welcome.astro | 10 | ||||
-rw-r--r-- | src/pages/index.astro | 15 |
5 files changed, 88 insertions, 60 deletions
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro index e213ce7..e5a9c50 100644 --- a/src/components/PostElement.astro +++ b/src/components/PostElement.astro @@ -14,6 +14,10 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY" <style lang="scss"> @use "../scss/variables" as *; + a { + color: $colorText; + } + small { font-size: $fontSizeBase * 0.75; opacity: 0.5; diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro deleted file mode 100644 index a3fbb29..0000000 --- a/src/components/PostSummary.astro +++ /dev/null @@ -1,49 +0,0 @@ ---- -import { type CollectionEntry } from "astro:content"; -import dayjs from "dayjs"; - -type Props = { - readonly post: CollectionEntry<"blog">; -}; - -const { post } = Astro.props; -const { remarkPluginFrontmatter } = await post.render(); -const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"); ---- - -<style lang="scss"> - @use "../scss/variables" as *; - - a { - color: $colorText; - display: block; - padding-bottom: 3rem; - - &:visited { - color: $colorText; - } - } - - h2 { - color: $colorBlossom; - font-size: 1.25em; - margin: 0.5em 0; - } - - div { - font-size: $fontSizeBase * 0.75; - opacity: 0.5; - } -</style> - -<a href={`/blog/${post.slug}`}> - <article> - <div> - <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> - <span>•</span> - <span>{remarkPluginFrontmatter.minutesRead}</span> - </div> - <h2>{post.data.title}</h2> - <p>{post.data.description}</p> - </article> -</a> diff --git a/src/components/Sections/SocialLinks.astro b/src/components/Sections/SocialLinks.astro new file mode 100644 index 0000000..dbad5ef --- /dev/null +++ b/src/components/Sections/SocialLinks.astro @@ -0,0 +1,70 @@ +<style lang="scss"> + @use "../../scss/variables" as *; + + div { + margin-bottom: 2rem; + } + + a { + display: inline-block; + margin: 0 0.5rem; + color: $colorText; + text-decoration: none; + } + a svg { + vertical-align: middle; + } +</style> + +<section> + <div> + <a href="https://github.com/valentineus" title="GitHub" target="_blank"> + <svg + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path + d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" + > + </path> + </svg> + </a> + <a href="mailto:valentin@popov.link" title="E-Mail" target="_blank"> + <svg + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> + <polyline points="22,6 12,13 2,6"></polyline> + </svg> + </a> + <a href="/feed.xml" title="RSS" target="_blank"> + <svg + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M4 11a9 9 0 0 1 9 9"></path> + <path d="M4 4a16 16 0 0 1 16 16"></path> + <circle cx="5" cy="19" r="1"></circle> + </svg> + </a> + </div> +</section> diff --git a/src/components/Sections/Welcome.astro b/src/components/Sections/Welcome.astro new file mode 100644 index 0000000..5d64206 --- /dev/null +++ b/src/components/Sections/Welcome.astro @@ -0,0 +1,10 @@ +<section> + <div> + <h1>Hi, I'm Valentin Popov 👋</h1> + <p> + I'm a professional software developer currently working as a project manager and team lead. On my personal + website, I share insights, ideas, and articles on software development, leadership, and the digital world. + </p> + <p>Welcome, and feel free to explore!</p> + </div> +</section> diff --git a/src/pages/index.astro b/src/pages/index.astro index 56ccdff..87bd89c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,17 +1,10 @@ --- -import { getCollection } from "astro:content"; import Layout from "../layouts/BaseLayout.astro"; -import PostSummary from "../components/PostSummary.astro"; - -const posts = await getCollection("blog", ({ data }) => { - return data.draft !== true; -}); - -posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()); +import SocialLinksSection from "../components/Sections/SocialLinks.astro"; +import WelcomeSection from "../components/Sections/Welcome.astro"; --- <Layout> - <section style={{ "margin-top": "3rem" }}> - {posts.map((post) => <PostSummary post={post} />)} - </section> + <WelcomeSection /> + <SocialLinksSection /> </Layout> |