diff --git a/@dasig/images/5-tech-icons-and-their-meaning.avif b/@dasig/images/5-tech-icons-and-their-meaning.avif new file mode 100644 index 0000000..a18ba8e Binary files /dev/null and b/@dasig/images/5-tech-icons-and-their-meaning.avif differ diff --git a/@dasig/images/5-tech-icons-and-their-meaning.webp b/@dasig/images/5-tech-icons-and-their-meaning.webp new file mode 100644 index 0000000..9975ab6 Binary files /dev/null and b/@dasig/images/5-tech-icons-and-their-meaning.webp differ diff --git a/@dasig/images/bluetooth.avif b/@dasig/images/bluetooth.avif new file mode 100644 index 0000000..2f45bd3 Binary files /dev/null and b/@dasig/images/bluetooth.avif differ diff --git a/@dasig/images/bluetooth.webp b/@dasig/images/bluetooth.webp new file mode 100644 index 0000000..27e2711 Binary files /dev/null and b/@dasig/images/bluetooth.webp differ diff --git a/@dasig/images/lets-make-this-hello-world-joke-more-interesting.avif b/@dasig/images/lets-make-this-hello-world-joke-more-interesting.avif new file mode 100644 index 0000000..cbb9fbf Binary files /dev/null and b/@dasig/images/lets-make-this-hello-world-joke-more-interesting.avif differ diff --git a/@dasig/images/lets-make-this-hello-world-joke-more-interesting.webp b/@dasig/images/lets-make-this-hello-world-joke-more-interesting.webp new file mode 100644 index 0000000..2788fdf Binary files /dev/null and b/@dasig/images/lets-make-this-hello-world-joke-more-interesting.webp differ diff --git a/@dasig/images/power.avif b/@dasig/images/power.avif new file mode 100644 index 0000000..4b0c8f2 Binary files /dev/null and b/@dasig/images/power.avif differ diff --git a/@dasig/images/power.webp b/@dasig/images/power.webp new file mode 100644 index 0000000..d97bec5 Binary files /dev/null and b/@dasig/images/power.webp differ diff --git a/@dasig/images/the-beauty-of-music.avif b/@dasig/images/the-beauty-of-music.avif new file mode 100644 index 0000000..7848c1d Binary files /dev/null and b/@dasig/images/the-beauty-of-music.avif differ diff --git a/@dasig/images/the-beauty-of-music.webp b/@dasig/images/the-beauty-of-music.webp new file mode 100644 index 0000000..c30f1a0 Binary files /dev/null and b/@dasig/images/the-beauty-of-music.webp differ diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro index 4f8e92c..cc19751 100644 --- a/src/components/ArticleCard.astro +++ b/src/components/ArticleCard.astro @@ -14,7 +14,7 @@ interface Props { categoryColor: string } -const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, categoryColor } = Astro.props +const { title, subtitle, date, imageA, imageW, alt = 'article image', minutes, url, category = 'Technology', categoryColor = 'blue' } = Astro.props ---
@@ -29,7 +29,7 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate - {category} + {category} {minutes} min read @@ -59,7 +59,7 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate $red: #521d2c .article - max-width: 30rem + max-width: 23rem height: auto background-color: color.adjust(#0A0A0A, $lightness: 9%) border-radius: 1rem @@ -69,19 +69,21 @@ const { title, subtitle, date, imageA, imageW, alt, minutes, url, category, cate height: auto &__title - font-size: 1rem + font-size: 0.8rem font-weight: 700 font-family: fonts.$Literata &__subtitle - font-size: 0.75rem + font-size: 0.65rem font-weight: 500 opacity: 0.8 .dateandtime + font-family: fonts.$Inter width: 100% padding: 0.5rem 0 0 0 - font-size: 0.75rem + font-size: 0.5rem + font-weight: 500 opacity: 0.6 .picture diff --git a/src/content/articles/5-tech-icons-and-their-meaning.md b/src/content/articles/5-tech-icons-and-their-meaning.md index ad46656..0aecd19 100644 --- a/src/content/articles/5-tech-icons-and-their-meaning.md +++ b/src/content/articles/5-tech-icons-and-their-meaning.md @@ -4,14 +4,14 @@ title: "5 Tech Icons And Their Meaning" subtitle: "The meaning behind these technology icons" date: "Dec 9, 2024" minutes: 5 -url: "read/5-tech-icons-and-their-meaning" +category: Technology --- - + + + + 5 Tech Icons And Their Meaning + An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more. @@ -21,8 +21,56 @@ But there are few icons that have ambiguous designs. Although they are highly re ## Power Icon -Image created by the Author + + + + 5 Tech Icons And Their Meaning + An incomplete circle with a small line interfering with its arc — that’s an odd representation for a power button, isn’t it?. However, there’s actually a meaning behind it that ties closely to how electronic machines work. Every machine that operates on electricity understands just two digits: 1 and 0. In simple terms, this translates to the presence of electricity (1) and the absence of electricity (0), or on and off, if you prefer. Going back to the icon, if you look closely, you’ll see that it is just a smooth collaboration between 1 and 0. + +## Bluetooth Icon + + + + + 5 Tech Icons And Their Meaning + + +Unlike the other entries on this list, this icon has nothing to do with technology but rather with history. Have you wondered where the name “Bluetooth” came from and why a name like that was chosen for a technology that had nothing to do with dental or even colors? + +To explain the icon, we need to go back to the years between 958 and 986, during which a Viking king known as King Harald Gormsson, also referred to as Harald Bluetooth, was in power. + +Why him? Why would a viking’s name get adapted for a technology used for wireless connections? + +If he were to have a resume, it might include “Uniting Denmark and Norway” in the achievements section, along with “Connecting warring tribes peacefully.” It’s like connecting conflicting devices together and having them unite to share a common function. For example, a speaker and a phone connect to play music seamlessly. + +The icon consists of two letters: the initial of his first name “H,” represented in Old Norse as (ᚼ), and the initial of his nickname “B,” depicted as (ᛒ). + +## Save Icon + + + + + 5 Tech Icons And Their Meaning + + +When you save a file on your computer or device, the data is sent straight to your storage. Regardless of whether it is an HDD or SSD, it will securely store the file’s data. It would be logical for the icon representing file saving to be depicted as a hard drive. However, oddly, that wasn’t the case. That leads to the question, why the icon designers went with that one? + +The icon was designed to represent a floppy disk, the original portable storage before flash drives, memory cards, and optical discs. + +And they looked like this: + +## RSS Icon + +RSS is a method for staying updated on news and content from different websites. Consider it a notification email that keeps you informed whenever a site publishes new content. But to set it up, you’ll need an RSS reader, and the site should provide an RSS feeder. + +For example: https://medium.com/@patalcala/feed + +Now, for the icon. A dot that represents the source, with two concentric arcs that represent radio waves. RSS is used for giving out news publicly, and, back in the day, people used to receive news only from radios. In short, the icon is a tribute to the old days of receiving news. + +--- + +Thank you for reading. \ No newline at end of file diff --git a/src/content/articles/lets-make-this-hello-world-joke-more-interesting.md b/src/content/articles/lets-make-this-hello-world-joke-more-interesting.md index 4b70ff6..7b89bbb 100644 --- a/src/content/articles/lets-make-this-hello-world-joke-more-interesting.md +++ b/src/content/articles/lets-make-this-hello-world-joke-more-interesting.md @@ -4,9 +4,15 @@ title: "Let’s Make This Hello World Joke More Interesting" subtitle: "hello_world(“print”)" date: "Sep 23, 2024" minutes: 8 -url: "read/lets-make-this-hello-world-joke-more-interesting" +category: Technology --- + + + + Let’s Make This Hello World Joke More Interesting + + An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more. The quick brown fox jumps over the lazy dog. hahahah \ No newline at end of file diff --git a/src/content/articles/the-beauty-of-music.md b/src/content/articles/the-beauty-of-music.md new file mode 100644 index 0000000..f9cb66c --- /dev/null +++ b/src/content/articles/the-beauty-of-music.md @@ -0,0 +1,44 @@ +--- +slug: "the-beauty-of-music" +title: "The Beauty of Music" +subtitle: "The thing our ears love" +date: "Sep 17, 2024" +minutes: 2 +category: Poem +--- + + + + + 5 Tech Icons And Their Meaning + + +Melody, harmony, rhythm, beat, and tempo +Perfect formula; like an ideal pitch of a piano +Also, for other instruments like guitar, violin or cello +Combine them, you’ll have an orchestra ready to go + +Music tampers with emotions, sided on positive and negative +Tone stirs the soul; either makes us alive or depressive +But either lane, we can’t deny the beauty it gives +Whatever road it brought us, we can’t help but forgive + +The power it holds, we simply cannot contain +A universal language that speaks directly to our brain +With every note, a new memory is obtained +And the emotions it evokes are forever sustained + +The reflection in our hearts, reminds us with our past +Or the realization, makes future plan that last +Whatever music had cooked, I’m not gonna ask +Because the spark of its magic will never unmask + +Listen, listen, a great melody is playing +A smile drew again, and I’m not even trying +Like a cloud in still, calming and refreshing +Even a raining cloud, won’t stop us from dancing + +So, whatever genre you love to adore +Rap, jazz, pop, rock or any rhythmic roar +Never stick with it, a lot of music you can explore +Appreciate the diversity, you’ll surely love music more \ No newline at end of file diff --git a/src/images/5-tech.png b/src/images/5-tech-icons-and-their-meaning.png similarity index 100% rename from src/images/5-tech.png rename to src/images/5-tech-icons-and-their-meaning.png diff --git a/src/images/bluetooth.png b/src/images/bluetooth.png new file mode 100644 index 0000000..950a69f Binary files /dev/null and b/src/images/bluetooth.png differ diff --git a/src/images/lets-make-this-hello-world-joke-more-interesting.png b/src/images/lets-make-this-hello-world-joke-more-interesting.png new file mode 100644 index 0000000..978fb6a Binary files /dev/null and b/src/images/lets-make-this-hello-world-joke-more-interesting.png differ diff --git a/src/images/power.png b/src/images/power.png new file mode 100644 index 0000000..fe66dce Binary files /dev/null and b/src/images/power.png differ diff --git a/src/images/the-beauty-of-music.png b/src/images/the-beauty-of-music.png new file mode 100644 index 0000000..40f2df1 Binary files /dev/null and b/src/images/the-beauty-of-music.png differ diff --git a/src/pages/index.astro b/src/pages/index.astro index 0e2b71e..7c906ed 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,14 +1,35 @@ --- import Layout from '../layouts/Layout.astro' -import { Page, Row, Image, Logo } from '../../@dasig' +import { Page, Row, Logo } from '../../@dasig' import ArticleCard from '../components/ArticleCard.astro' -import TechA from '../../@dasig/images/5-tech.avif' -import TechW from '../../@dasig/images/5-tech.webp' -import logoA from '../../@dasig/images/logo.avif' -import logoW from '../../@dasig/images/logo.webp' - const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true })) + +function getArticleData(post: any) { + const slug = post.frontmatter.slug + const alt = slug.replace(/-/g, ' ') + const category = post.frontmatter.category + let categoryColor + + if (category === 'Technology') { + categoryColor = 'blue' + } else if (category === 'Poem') { + categoryColor = 'yellow' + } + + return { + category: post.frontmatter.category, + categoryColor: categoryColor, + url: `read/${slug}`, + title: post.frontmatter.title, + subtitle: post.frontmatter.subtitle, + imageA: `../@dasig/images/${slug}.avif`, + imageW: `../@dasig/images/${slug}.webp`, + alt: alt, + minutes: post.frontmatter.minutes, + date: post.frontmatter.date, + } +} --- @@ -20,7 +41,12 @@ const articles = Object.values(import.meta.glob('../content/articles/*.md', { ea
- {articles.map((post: any) => )} + { + articles.map((post: any) => { + const data = getArticleData(post) + return + }) + }
diff --git a/src/pages/read/[article].astro b/src/pages/read/[article].astro index 15deb6b..c61e4ea 100644 --- a/src/pages/read/[article].astro +++ b/src/pages/read/[article].astro @@ -1,9 +1,10 @@ --- import Layout from '../../layouts/Layout.astro' import ArticleComponent from '../../components/Article.astro' +import { Page, Column } from '../../../@dasig' export async function getStaticPaths() { - const articles: any = await Astro.glob('../../content/articles/*.md') + const articles: any = Object.values(import.meta.glob('../../content/articles/*.md', { eager: true })) const paths = articles.map((article: any) => ({ params: { article: article.frontmatter.slug }, })) @@ -12,16 +13,17 @@ export async function getStaticPaths() { const { article } = Astro.params -// Dynamically import the article based on the slug const articleModule: any = await import(`../../content/articles/${article}.md`) const frontmatter = articleModule.frontmatter const content = await articleModule.compiledContent() --- -
- -
+ + + + +