AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from AderKonstantin/dev

Browse Source 
Dev
This commit is contained in:
AderKonstantin
2025-03-26 15:40:06 +03:00
committed by GitHub
parent 28d1dc8d50 c89df4cf2f
commit ea8d8c880d
4 changed files with 96 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/layout.tsx
View File

@@ -1,6 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import MainHeader from "@/components/header/main";
import MainFooter from "@/components/footer/main";
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'AderKI Blog', title: 'AderKI Blog',
@@ -32,7 +34,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body <body
className={`bg-black text-white font-sans`} className={`bg-black text-white font-sans`}
> >
{children}
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader />
{children}
<MainFooter />
</div>
</body> </body>
</html> </html>
); );

86
app/page.tsx
View File

@@ -1,17 +1,6 @@
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';
import BlogArea from "../components/blogpost"; import BlogArea from "../components/blogpost";
import MainHeader from "@/components/header/main";
// Mock data for blog posts // Mock data for blog posts
const blogposts = [ const blogposts = [
@@ -47,77 +36,8 @@ const blogposts = [
export default function Home() { export default function Home() {
return ( return (
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6"> <main>
<MainHeader /> <BlogArea blogposts={blogposts} />
</main>
<main>
<BlogArea blogposts={blogposts} />
</main>
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3>Socials</h3></li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://www.instagram.com/aderkitty/">
<Image
src={instagramPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://mastodon.social/@aderkonstantin">
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://github.com/AderKonstantin">
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://steamcommunity.com/yourprofile">
<Image
src={steamPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li>
<li className="text-xl">
<AnimatedLink href="#">northfamily</AnimatedLink>
</li>
</ul>
</footer>
</div>
); );
} }

5
components/blogpost.tsx
View File

@@ -3,6 +3,7 @@
import tagsPic from '../public/tags.svg'; import tagsPic from '../public/tags.svg';
import calendarPic from '../public/calendar.svg' import calendarPic from '../public/calendar.svg'
import Link from 'next/link';
import AnimatedLink from '../components/animatedLink'; import AnimatedLink from '../components/animatedLink';
import Image from 'next/image'; import Image from 'next/image';
@@ -46,7 +47,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
<ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4"> <ul className="blogpost-tags inline-flex items-center flex-row space-x-4 mb-4">
<li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li> <li className="tag inline px-2 py-1 rounded-full"><Image src={tagsPic} alt="lang" width={24} height={24} className='inline-flex justify-baseline filter brightness-0 invert' /></li>
{blogpost.tags.map((tag, index) => ( {blogpost.tags.map((tag, index) => (
<li className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base">{tag}</li> <li key={`${tag}-${index}`} className="tag inline border border-slate-400 px-2 py-1 rounded-full text-base"><Link href="#">{tag}</Link></li>
))} ))}
</ul> </ul>
<div className="blogpost-description text-base mb-4"> <div className="blogpost-description text-base mb-4">
@@ -54,7 +55,7 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
</div> </div>
<div className="blogpost-other flex flex-row justify-between items-end mt-auto"> <div className="blogpost-other flex flex-row justify-between items-end mt-auto">
<ul className="text-base inline-flex justify-end items-center"> <ul className="text-base inline-flex justify-end items-center">
<li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert"/></li> <li className="inline px-2 py-1"><Image src={calendarPic} alt="lang" width={24} height={24} className="filter brightness-0 invert" /></li>
<li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li> <li className="inline"><p className='inline mx-2'>{blogpost.publish}</p></li>
</ul> </ul>

81
components/footer/main.tsx Normal file
View File

@@ -0,0 +1,81 @@
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';
export default function MainFooter() {
return (
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3>Socials</h3></li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://www.instagram.com/aderkitty/">
<Image
src={instagramPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://mastodon.social/@aderkonstantin">
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://github.com/AderKonstantin">
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://steamcommunity.com/yourprofile">
<Image
src={steamPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert" /></li>
<li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li>
<li className="text-xl">
<AnimatedLink href="#">northfamily</AnimatedLink>
</li>
</ul>
</footer>
);
}