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> | 
