feat: add posts page, changed icons to react-icons

This commit is contained in:
2026-01-20 01:51:12 +03:00
parent 873b4bfc0d
commit 700073571e
7 changed files with 189 additions and 206 deletions

View File

@@ -1,41 +1,36 @@
import searchPic from '@/public/search.svg';
import searchPic from "@/public/search.svg";
import Image from "next/image";
import Link from "next/link";
import Toolbar from "./toolbar";
import AnimatedLink from '../animatedLink';
import HeaderToolbar from "../header/toolbar";
import AnimatedLink from "../animatedLink";
export default function MainHeader() {
return (
<header className="flex flex-col">
<div className="flex flex-row mt-12 mb-22">
<header className="flex flex-col mt-4">
<div className="flex flex-row">
<ul className="w-full flex flex-row justify-between items-baseline list-none">
<li className="text-4xl">
<AnimatedLink href="https://blog.aderk.tech/en">
aderk.tech
<AnimatedLink href="/">
blog.aderk.org
</AnimatedLink>
</li>
<li className="text-6xl flex items-center justify-center filter brightness-0 invert">
<li className="text-6xl flex items-center justify-center filter brightness-0 dark:invert">
<Link href="#">
<Image
src={searchPic}
alt="search"
width={32}
height={32}
/>
<Image src={searchPic} alt="search" width={28} height={28} />
</Link>
</li>
</ul>
</div>
<div className="text-2xl mb-20">
<p className="leading-10">
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, thats im like.
<div className="text-lg mb-4 mt-6">
<p className="leading-8">
Этот блог - хроника моего погружения в мир компьютерной архитектуры. <br />
Здесь я документирую процесс изучения и проектирования CPU и GPU на основе открытой архитектуры RISC-V. <br />
</p>
</div>
<HeaderToolbar />
<Toolbar></Toolbar>
</header>
);
}

View File

@@ -1,64 +1,36 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import globePic from '../../public/globe.svg';
import emailPic from '../../public/email.svg';
import rssPic from '../../public/rss-feed.svg';
import settingsPic from '../../public/settings.svg';
import AnimatedLink from '../animatedLink';
"use client";
import Link from "next/link";
import { FaGlobe, FaEnvelope, FaRss } from "react-icons/fa";
export default function Toolbar() {
return (
<div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
<div className="flex items-baseline">
<p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
</div>
<div className="flex items-baseline">
<ul className="inline-flex items-center gap-4">
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={globePic}
alt="lang"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={emailPic}
alt="email"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={rssPic}
alt="rss"
width={32}
height={32}
/>
</Link>
</li>
<li className="inline filter brightness-0 invert">
<Link href="#">
<Image
src={settingsPic}
alt="settings"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
</div>
);
return (
<div className="flex h-16 justify-between items-center dark:border-white border-black border-t border-b">
<div className="flex items-baseline">
<p>
<Link href="#">Science</Link> |{" "}
<Link href="#">Software</Link> |{" "}
<Link href="#">Hardware</Link>
</p>
</div>
<div className="flex items-baseline">
<ul className="inline-flex items-center gap-4">
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="#">
<FaGlobe size={24} />
</Link>
</li>
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="emailto:konstantin@aderk.org">
<FaEnvelope size={24} />
</Link>
</li>
<li className="inline text-gray-800 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
<Link href="#">
<FaRss size={24} />
</Link>
</li>
</ul>
</div>
</div>
);
}