From 52175a4264f97653f11839de8fab3f944b438d5f Mon Sep 17 00:00:00 2001 From: amirzenoozi Date: Tue, 26 Dec 2023 14:50:48 +0100 Subject: [PATCH] :sparkles: Feat: Add External Link Section --- src/components/flex-row/index.tsx | 5 ++- src/components/flex-row/style.scss | 4 ++ src/pages/home/index.tsx | 60 ++++++++++++++++++++++++++++++ src/pages/home/style.scss | 52 ++++++++++++++++++++++++++ src/styles/reset.scss | 2 +- 5 files changed, 120 insertions(+), 3 deletions(-) diff --git a/src/components/flex-row/index.tsx b/src/components/flex-row/index.tsx index ed6d693..6e49d51 100644 --- a/src/components/flex-row/index.tsx +++ b/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 = ({ children }) => { +const FlexRow: React.FC = ({ stretch = false, children }) => { return ( -
+
{ children }
); diff --git a/src/components/flex-row/style.scss b/src/components/flex-row/style.scss index 2b3597e..870a4c4 100644 --- a/src/components/flex-row/style.scss +++ b/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; + } } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index dca6a4d..26d795f 100644 --- a/src/pages/home/index.tsx +++ b/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 = [ + { + 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() { ))} +
+ + + {blogNewsList.map((item: News) => ( + + +
+ {item.title} +
+

{item.title}

+

{item.description}

+ + + ))} + + +
); } diff --git a/src/pages/home/style.scss b/src/pages/home/style.scss index 421501a..43439ab 100644 --- a/src/pages/home/style.scss +++ b/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% { diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 7abca41..018a348 100644 --- a/src/styles/reset.scss +++ b/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; }