From 102fac4f11317ae31ceae01c7cc94d44984ab461 Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 13:39:53 +0300 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20Enhance=20blog=20post?= =?UTF-8?q?=20UI=20and=20add=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit introduces several improvements to the blog post UI: - Adds new icons for tags and calendar using SVG images - Refines the layout and styling of the blog post tags and publish date - Adjusts the overall spacing and padding of the blog area and individual blog posts - Increases the font size of the "Read the article" link for better readability These changes aim to enhance the visual appeal and user experience of the blog section, making it more visually engaging and informative for the readers. --- components/blogpost.tsx | 24 +++++++++++++++--------- public/calendar.svg | 16 ++++++++++++++++ public/tags.svg | 5 +++++ 3 files changed, 36 insertions(+), 9 deletions(-) create mode 100644 public/calendar.svg create mode 100644 public/tags.svg diff --git a/components/blogpost.tsx b/components/blogpost.tsx index 1bc9722..13939db 100644 --- a/components/blogpost.tsx +++ b/components/blogpost.tsx @@ -1,5 +1,8 @@ 'use client'; +import tagsPic from '../public/tags.svg'; +import calendarPic from '../public/calendar.svg' + import AnimatedLink from '../components/animatedLink'; import Image from 'next/image'; @@ -16,10 +19,10 @@ interface BlogAreaProps { export default function BlogArea({ blogposts }: BlogAreaProps) { return ( -
+
{blogposts.map((blogpost, index) => ( -
+
-
    -
  • Games
    • -
  • Science
    • +
      +
    • lang
      • +
    • Games
      • +
    • Science
    {blogpost.body.slice(0, 512)}...
    -
    -

    Posted: {blogpost.publish}

    -
    -
    +
      +
    • lang
      • +

    • {blogpost.publish}

      • +
    + +
    Read the article diff --git a/public/calendar.svg b/public/calendar.svg new file mode 100644 index 0000000..c002b85 --- /dev/null +++ b/public/calendar.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/public/tags.svg b/public/tags.svg new file mode 100644 index 0000000..49c8817 --- /dev/null +++ b/public/tags.svg @@ -0,0 +1,5 @@ + + + + + From 7113768663d4f1d871e52624302e94a27581ba27 Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 13:41:10 +0300 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat(footer):=20Add=20social=20?= =?UTF-8?q?media=20icons=20and=20game/project=20icons=20to=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit adds new SVG icons for Mastodon, GitHub, Instagram, and Steam to the footer. It also adds icons for a gamepad and a project icon. --- app/page.tsx | 88 ++++++++++++++++++++++++++++++++++++++------ public/gamepad.svg | 11 ++++++ public/github.svg | 1 + public/instagram.svg | 1 + public/mastodon.svg | 1 + public/project.svg | 1 + public/steam.svg | 1 + 7 files changed, 93 insertions(+), 11 deletions(-) create mode 100644 public/gamepad.svg create mode 100644 public/github.svg create mode 100644 public/instagram.svg create mode 100644 public/mastodon.svg create mode 100644 public/project.svg create mode 100644 public/steam.svg diff --git a/app/page.tsx b/app/page.tsx index f306f40..a258099 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,14 @@ import searchPic from '../public/search.svg'; +import mastodonPic from '../public/mastodon.svg'; +import githubPic from '../public/github.svg'; +import instagramPic from '../public/instagram.svg'; +import steamPic from '../public/steam.svg'; + +import gamePic from '../public/gamepad.svg'; +import projectPic from '../public/project.svg'; + import Image from "next/image"; import Link from "next/link"; import AnimatedLink from '../components/animatedLink'; @@ -21,6 +29,18 @@ const blogposts = [ publish: '2023-09-25', get_absolute_url: '/blog/science-video-games', }, + { + label: 'How to install Docker & Docker Compose', + body: 'Guide to install Docker & Docker Compose on your machine.', + publish: '2023-09-25', + get_absolute_url: '/blog/docker-installation', + }, + { + label: 'Rocket Science', + body: 'Discover how rocket are work.', + publish: '2023-09-25', + get_absolute_url: '/blog/rocket-science', + }, ]; export default function Home() { @@ -49,7 +69,7 @@ export default function Home() {

    - Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like. + Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.

    @@ -61,20 +81,66 @@ export default function Home() {
      -

    • Socials

      • -
    • Instagram
      • -
    • Mastodon
      • -
    • GitHub
      • -
    • Steam
      • +

    • Socials

      • +
    • + + lang + +
      • +
    • + + lang + +
      • +
    • + + lang + +
      • +
    • + + lang + +
      -

    • Games

      • -
    • Joe The Rabbit
      • +

    • Games

      lang
      • +
    • + Robot Fire +
      -

    • Other Projects

      • -
    • Ader Berry Bot (Telegram)
      • -
    • Store
      • +

    • Other Projects

      lang
      • +
    • + cloudberrygames +
      • +
    • + northfamily +
    diff --git a/public/gamepad.svg b/public/gamepad.svg new file mode 100644 index 0000000..d5f0644 --- /dev/null +++ b/public/gamepad.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/github.svg b/public/github.svg new file mode 100644 index 0000000..afb1814 --- /dev/null +++ b/public/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/instagram.svg b/public/instagram.svg new file mode 100644 index 0000000..8fc9c72 --- /dev/null +++ b/public/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/mastodon.svg b/public/mastodon.svg new file mode 100644 index 0000000..69ab9c0 --- /dev/null +++ b/public/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/project.svg b/public/project.svg new file mode 100644 index 0000000..465269a --- /dev/null +++ b/public/project.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/steam.svg b/public/steam.svg new file mode 100644 index 0000000..ba29e7d --- /dev/null +++ b/public/steam.svg @@ -0,0 +1 @@ + \ No newline at end of file From 67e05438a7cb4cb0ffb357adc0961bc6ebb6d349 Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 13:48:55 +0300 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat(blog):=20Add=20tags=20to?= =?UTF-8?q?=20blog=20posts=20and=20display=20them?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a new `tags` field to the `BlogPost` interface and updates the blog post data to include relevant tags. The `BlogArea` component is updated to display the tags for each blog post. This change allows users to better understand the topics covered in each blog post and improves the overall user experience. --- app/page.tsx | 4 ++++ components/blogpost.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a258099..66f4fcc 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -22,24 +22,28 @@ const blogposts = [ body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.', publish: '2023-10-01', get_absolute_url: '/blog/retro-futurism', + tags: ["science", "retro", "science-friction"] }, { label: 'The Science Behind Video Games', body: 'Discover how video games are pushing the boundaries of technology and human interaction.', publish: '2023-09-25', get_absolute_url: '/blog/science-video-games', + tags: ["science", "math", "games"] }, { label: 'How to install Docker & Docker Compose', body: 'Guide to install Docker & Docker Compose on your machine.', publish: '2023-09-25', get_absolute_url: '/blog/docker-installation', + tags: ["docker", "docker-compose", "linux"] }, { label: 'Rocket Science', body: 'Discover how rocket are work.', publish: '2023-09-25', get_absolute_url: '/blog/rocket-science', + tags: ["rocket", "space", "engineering"] }, ]; diff --git a/components/blogpost.tsx b/components/blogpost.tsx index 13939db..a5fb889 100644 --- a/components/blogpost.tsx +++ b/components/blogpost.tsx @@ -11,6 +11,7 @@ interface BlogPost { body: string; publish: string; get_absolute_url: string; + tags: string[]; } interface BlogAreaProps { @@ -44,8 +45,9 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
    • lang
      • -
    • Games
      • -
    • Science
      • + {blogpost.tags.map((tag, index) => ( +
    • {tag}
      • + ))}
    {blogpost.body.slice(0, 512)}... From e77cdd07ebc614d8eb8f44c9d036dd37cbada4ba Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 14:00:01 +0300 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat(header):=20add=20search=20?= =?UTF-8?q?icon=20and=20update=20header=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes in this commit include: - Add a search icon to the header, which is implemented using the `Image` component from Next.js. - Update the header layout to have a more balanced and centered design, with the site title and search icon aligned. - Adjust the spacing and typography of the header elements to improve the overall visual appearance. These changes are made to enhance the user experience of the header, making it more visually appealing and functional. --- components/blogpost.tsx | 2 +- components/header/main.tsx | 41 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 components/header/main.tsx diff --git a/components/blogpost.tsx b/components/blogpost.tsx index a5fb889..281f5dd 100644 --- a/components/blogpost.tsx +++ b/components/blogpost.tsx @@ -20,7 +20,7 @@ interface BlogAreaProps { export default function BlogArea({ blogposts }: BlogAreaProps) { return ( -
    +
    {blogposts.map((blogpost, index) => (
    diff --git a/components/header/main.tsx b/components/header/main.tsx new file mode 100644 index 0000000..978238d --- /dev/null +++ b/components/header/main.tsx @@ -0,0 +1,41 @@ +import searchPic from '@/public/search.svg'; + + +import Image from "next/image"; +import Link from "next/link"; + +import AnimatedLink from '../animatedLink'; +import HeaderToolbar from "../header/toolbar"; + +export default function MainHeader() { + return ( +
    +
    +
      +
    • + + aderk.tech + +
      • + +
    • + + search + +
      • +
    +
    +
    +

    + Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like. +

    +
    + +
    + ); +} \ No newline at end of file From 600a734ad4a1ccdf6fd2133ba4d9e1403db1d4b6 Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 14:02:40 +0300 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20feat(home):=20Refactor=20header?= =?UTF-8?q?=20and=20remove=20search=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes in this commit focus on refactoring the header component and removing the search icon. The main changes are: - Replaced the `HeaderToolbar` component with a new `MainHeader` component. - Removed the search icon and its associated code. - Improved the layout and styling of the header section. These changes aim to simplify the header structure and remove unnecessary elements, making the page more focused and visually appealing. --- app/page.tsx | 39 +++++---------------------------------- 1 file changed, 5 insertions(+), 34 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 66f4fcc..c034f6f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,3 @@ -import searchPic from '../public/search.svg'; - - import mastodonPic from '../public/mastodon.svg'; import githubPic from '../public/github.svg'; import instagramPic from '../public/instagram.svg'; @@ -13,7 +10,8 @@ import Image from "next/image"; import Link from "next/link"; import AnimatedLink from '../components/animatedLink'; import BlogArea from "../components/blogpost"; -import HeaderToolbar from "../components/header/toolbar"; + +import MainHeader from "@/components/header/main"; // Mock data for blog posts const blogposts = [ @@ -50,34 +48,7 @@ const blogposts = [ export default function Home() { return (
    -
    -
    -
      -
    • - - aderk.tech - -
      • - -
    • - - search - -
      • -
    -
    -
    -

    - Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like. -

    -
    - -
    +
    @@ -132,13 +103,13 @@ export default function Home() {
    -

  • Games

    lang
    • +

  • Games

    lang
  • Robot Fire
    -

  • Other Projects

    lang
    • +

  • Other Projects

    lang
  • cloudberrygames