✨ Feat: Add External Link Section

src/components/flex-row/index.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import './style.scss';
 
 interface FlexRowProps {
+	stretch?: boolean;
 	children: React.ReactNode;
 }
 
-const FlexRow: React.FC<FlexRowProps> = ({ children }) => {
+const FlexRow: React.FC<FlexRowProps> = ({ stretch = false, children }) => {
 	return (
-		<div className={'row'}>
+		<div className={['row', stretch && 'row--stretch'].join(' ')}>
 			{ children }
 		</div>
 	);

src/components/flex-row/style.scss

@@ -6,4 +6,8 @@ $grid-gutter: 16px;
     flex-direction: row;
     margin: 0 (- calc($grid-gutter / 2)) (-$grid-gutter);
     width: 100%;
+
+    &--stretch {
+        align-items: stretch;
+    }
 }

src/pages/home/index.tsx

@@ -20,6 +20,13 @@ interface Experience {
 	objectives: string[];
 }
 
+interface News {
+	title: string;
+	image: string;
+	description: string;
+	link: string;
+}
+
 
 function Home() {
 	const {t} = useTranslation(['experience']);
@@ -86,6 +93,32 @@ function Home() {
 			objectives: rabinObjectives,
 		}
 	];
+	const blogNewsList: Array<News> = [
+		{
+			link: 'https://amirzenoozi.medium.com/decoding-persian-news-unleashing-the-power-of-analytics-86868be4756b',
+			title: 'Decoding Persian News: Unleashing the Power of Analytics',
+			image: 'https://miro.medium.com/v2/resize:fit:720/format:webp/1*GBCVi-VCviTgc_9oT5Wy8Q.jpeg',
+			description: 'Welcome to an exciting journey where we explore Persian News through the lens of analytics. Join me as we dive into the world of news analysis and uncover meaningful insights using charts and numbers. In this exploration, we aim to shed light on Persian News stories by harnessing the power of data visualization and quantitative analysis.',
+		},
+		{
+			link: 'https://amirzenoozi.medium.com/make-a-simple-url-shortener-app-with-node-js-express-js-rest-api-5cce40413d2b',
+			title: 'Make a Simple URL Shortener app with Node.js & Express.js + Rest API',
+			image: 'https://miro.medium.com/v2/resize:fit:720/format:webp/1*L3tLt-PRP6hs--1oiq6Fbg.png',
+			description: 'Have you ever thought to learn a Node.js ? Trying out simple projects such as ToDoApps & WeathersApp will help you learn new things quickly so I decided to create a simple URL shortener with Node.js & Express.js and become familiar with Node.js Applications.',
+		},
+		{
+			link: 'https://amirzenoozi.medium.com/how-to-have-angular-environment-structure-in-react-applications-without-cra-e970443e9068',
+			title: 'How To Have Angular Environment Structure in React Applications Without CRA',
+			image: 'https://miro.medium.com/v2/resize:fit:720/format:webp/1*ctW9S9Y5nAAqL7a45Dk4AA.png',
+			description: 'If you have an experience with Angular you are familiar with the environment structure in this project I think it’s so cool to have a different environment value in development and production mode in React applications so I decide to use this structure in React applications.',
+		},
+		{
+			link: 'https://amirzenoozi.medium.com/find-dominant-common-color-with-telegram-bot-b5bfad2b8fe8',
+			title: 'Find Dominant Common Color With Telegram Bot',
+			image: 'https://miro.medium.com/v2/resize:fit:720/format:webp/1*WH1Kyb4Ixpf8JnJpWf8bzg.jpeg',
+			description: 'In the last few days, I decided to play with the telegram bot but I need to have a simple scenario for my application so I think “finding the most common colors” can be the best choice for me.',
+		}
+	]
 
 	return (
 		<>
@@ -201,6 +234,33 @@ function Home() {
 					))}
 				</Container>
 			</section>
+			<section className={'links'}>
+				<Container>
+					<FlexRow stretch={true}>
+						{blogNewsList.map((item: News) => (
+							<FlexCol
+								xs={24}
+								sm={12}
+								md={8}
+								xl={6}
+							>
+								<a
+									className={'links-item'}
+									href={item.link}
+									target={'_blank'}
+									rel="noreferrer"
+								>
+									<figure>
+										<img src={item.image} alt={item.title} />
+									</figure>
+									<h3>{item.title}</h3>
+									<p>{item.description}</p>
+								</a>
+							</FlexCol>
+						))}
+					</FlexRow>
+				</Container>
+			</section>
 		</>
 	);
 }

src/pages/home/style.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import '../../styles/index';
 
 
@@ -277,6 +278,57 @@
     }
 }
 
+.links {
+    position: relative;
+    background-color: #342627;
+    padding: px-to-rem(50) px-to-rem(20);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    overflow: hidden;
+    color: #c7bbb3;
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: px-to-rem(16);
+        background-color: #433535;
+        border-radius: px-to-rem(8);
+        height: 100%;
+        box-sizing: border-box;
+
+        > figure {
+            overflow: hidden;
+            border-radius: px-to-rem(8);
+            font-size: 0;
+            margin-bottom: px-to-rem(8);
+        }
+        > h3 {
+            font-size: px-to-rem(18);
+            font-weight: 700;
+            margin-bottom: px-to-rem(8);
+            margin-top: 0;
+        }
+        > p {
+            overflow: hidden;
+            line-height: 1.2;
+            font-size: px-to-rem(14);
+            height: px-to-rem(16.9 * 4);
+            text-align: justify;
+            text-align-last: left;
+            margin-top: auto;
+        }
+    }
+
+    @include respond-to(md) {
+        padding: px-to-rem(50);
+    }
+}
 
 @keyframes moving-animation {
     0% {

src/styles/reset.scss

@@ -38,7 +38,7 @@ img {
     width: 100%;
 }
 
-p {
+p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure, figcaption, blockquote, dl, dd {
     margin: 0;
 }