aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorValentin Popov <valentin@popov.link>2025-06-11 19:34:34 +0300
committerValentin Popov <valentin@popov.link>2025-06-11 19:34:34 +0300
commit604e507b311171f0f5d914ce28a3d42a2281a5e6 (patch)
tree43395e26f5ddf6dd8ae6c83ba864aeba0e339715 /src
parent3d6aedd272a2c73d65ce79036d63e6916e8f71b5 (diff)
downloadpopov.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.astro4
-rw-r--r--src/components/PostSummary.astro49
-rw-r--r--src/components/Sections/SocialLinks.astro70
-rw-r--r--src/components/Sections/Welcome.astro10
-rw-r--r--src/pages/index.astro15
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>