raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🖼️ updated landing page styling

Browse Source
This commit was merged in pull request #1.
This commit is contained in:
RJ
2025-11-10 12:47:29 +02:00
parent b28b9bd137
commit 6ee39c4438
7 changed files with 257 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/globals.css
View File

@@ -8,4 +8,32 @@
.scrollbar-hide::-webkit-scrollbar { .scrollbar-hide::-webkit-scrollbar {
display: none; display: none;
} }
/* Industrial/Terminal aesthetic utilities */
.grid-bg {
background-image: url('/grid.svg');
}
.noise-bg {
background-image: url('/noise.svg');
}
.scanline {
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.3) 2px,
rgba(0, 0, 0, 0.3) 4px
);
}
/* Grayscale filter with instant toggle */
.grayscale {
filter: grayscale(100%);
}
.grayscale-0 {
filter: grayscale(0%);
}
} }

57
app/layout.tsx
View File

@@ -1,65 +1,52 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { Inter } from 'next/font/google' import { JetBrains_Mono } from 'next/font/google'
import Link from 'next/link'
import './globals.css' import './globals.css'
const inter = Inter({ subsets: ['latin'] }) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
template: '%s | Blog & Portofoliu', template: '%s | Terminal Blog',
default: 'Blog & Portofoliu', default: 'Terminal Blog - Build. Write. Share.',
}, },
description: 'Blog personal despre dezvoltare web și design', description: 'Explorează idei despre dezvoltare, design și tehnologie',
metadataBase: new URL('http://localhost:3000'), metadataBase: new URL('http://localhost:3000'),
authors: [{ name: 'Nume Autor' }], authors: [{ name: 'Terminal User' }],
keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript'], keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript', 'terminal'],
openGraph: { openGraph: {
type: 'website', type: 'website',
locale: 'ro_RO', locale: 'ro_RO',
siteName: 'Blog & Portofoliu', siteName: 'Terminal Blog',
}, },
robots: { robots: {
index: true, index: true,
follow: true, follow: true,
}, },
icons: {
icon: '/favicon.ico',
},
} }
export default function RootLayout({ export default function RootLayout({
children, children,
breadcrumbs,
}: { }: {
children: React.ReactNode children: React.ReactNode
breadcrumbs: React.ReactNode
}) { }) {
return ( return (
<html lang="ro"> <html lang="ro" className={jetbrainsMono.variable}>
<body className={inter.className}> <body className="font-mono bg-zinc-900 text-slate-100">
<div className="min-h-screen bg-white dark:bg-gray-900">
<header className="border-b border-gray-200 dark:border-gray-700">
<nav className="container mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<Link href="/" className="text-2xl font-bold text-primary-600">
Blog
</Link>
<div className="flex space-x-6">
<Link href="/" className="hover:text-primary-600">Acasă</Link>
<Link href="/blog" className="hover:text-primary-600">Blog</Link>
<Link href="/about" className="hover:text-primary-600">Despre</Link>
</div>
</div>
</nav>
</header>
{breadcrumbs}
<main className="container mx-auto px-4 py-8">
{children} {children}
</main>
<footer className="border-t border-gray-200 dark:border-gray-700 mt-12"> {/* Footer - from worktree-agent-1 */}
<div className="container mx-auto px-4 py-6 text-center text-gray-600 dark:text-gray-400"> <footer className="border-t-4 border-slate-800 bg-slate-900">
© 2025 Blog & Portofoliu. Toate drepturile rezervate. <div className="container mx-auto px-4 py-8">
<div className="border-2 border-slate-800 p-6">
<p className="text-center text-slate-500 font-mono text-xs uppercase tracking-wider">
© 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
</p>
</div>
</div> </div>
</footer> </footer>
</div>
</body> </body>
</html> </html>
) )

210
app/page.tsx
View File

@@ -1,59 +1,207 @@
import Link from 'next/link' import Link from 'next/link'
import Image from 'next/image'
import { getAllPosts } from '@/lib/markdown' import { getAllPosts } from '@/lib/markdown'
import { formatDate } from '@/lib/utils' import { formatDate } from '@/lib/utils'
export default async function HomePage() { export default async function HomePage() {
const allPosts = await getAllPosts() const allPosts = await getAllPosts()
const featuredPosts = allPosts.slice(0, 3) const featuredPosts = allPosts.slice(0, 6)
return ( return (
<div className="space-y-12"> <main className="min-h-screen bg-zinc-900">
<section className="text-center py-12"> {/* Hero Section - from worktree-agent-2 */}
<h1 className="text-5xl font-bold mb-4">Bun venit pe Blog</h1> <section className="relative min-h-screen flex items-center justify-center bg-zinc-900 overflow-hidden">
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"> <div className="absolute inset-0 grid-bg opacity-10"></div>
Explorează articole despre dezvoltare web, design și tehnologie. <div className="absolute inset-0 scanline"></div>
Învață din experiențe practice și tutoriale detaliate. <div className="absolute inset-0 noise-bg"></div>
<div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
<div className="border-4 border-slate-700 bg-slate-900/80 p-8 md:p-12">
{/* Logo */}
<div className="mb-8 flex items-center justify-between border-b-2 border-slate-800 pb-4">
<div className="flex items-center gap-3">
<Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
<span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
</div>
<div className="flex gap-4">
<Link href="/blog" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[BLOG]</Link>
<Link href="/about" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[ABOUT]</Link>
</div>
</div>
<div className="border-l-4 border-cyan-900 pl-6 mb-8">
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-100 uppercase tracking-tight mb-6">
BUILD. WRITE.<br/>SHARE.
</h1>
<p className="text-base md:text-lg lg:text-xl text-slate-400 font-mono leading-relaxed max-w-2xl">
&gt; Explorează idei despre dezvoltare, design și tehnologie_
</p> </p>
<div className="mt-8 space-x-4"> </div>
<Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
Vezi toate articolele <div className="flex gap-4 flex-wrap mt-12">
<Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-900 text-slate-100 border-2 border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-800 hover:border-cyan-600 rounded-none">
[EXPLOREAZĂ BLOG]
</Link> </Link>
<Link href="/about" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition"> <Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600 rounded-none">
Despre mine [DESPRE MINE]
</Link> </Link>
</div> </div>
</div>
</div>
</section> </section>
<section> {/* Featured Posts Grid - from worktree-agent-1 */}
<h2 className="text-3xl font-bold mb-8">Articole Recente</h2> <section className="py-24 bg-slate-900 border-t-4 border-slate-800">
<div className="max-w-7xl mx-auto px-6">
<div className="border-l-4 border-emerald-900 pl-6 mb-12">
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
ARCHIVE ACCESS // RECENT ENTRIES
</p>
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
&gt; POSTĂRI RECENTE_
</h2>
</div>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{featuredPosts.map((post) => ( {featuredPosts.map((post, index) => (
<article key={post.slug} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition"> <article
{post.frontmatter.image && ( key={post.slug}
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 object-cover rounded-lg mb-4" /> className="group relative bg-slate-900 border-4 border-slate-700 overflow-hidden hover:border-cyan-900"
>
<div className="aspect-video relative overflow-hidden bg-zinc-900">
{post.frontmatter.image ? (
<Image
src={post.frontmatter.image}
alt={post.frontmatter.title}
fill
className="object-cover grayscale group-hover:grayscale-0"
/>
) : (
<div className="w-full h-full bg-zinc-800 flex items-center justify-center">
<span className="font-mono text-6xl text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
</div>
)} )}
<h3 className="text-xl font-semibold mb-2"> <div className="absolute inset-0 bg-zinc-900/60"></div>
<Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition"> <div className="absolute top-0 left-0 right-0 bg-slate-900 border-b-2 border-slate-700 px-4 py-2">
<span className="font-mono text-xs text-cyan-400 uppercase tracking-wider">
FILE#{String(index + 1).padStart(3, '0')} // {post.frontmatter.category}
</span>
</div>
</div>
<div className="p-6 border-t-4 border-slate-800">
<div className="border-l-4 border-emerald-900 pl-4">
<h3 className="text-xl font-mono font-bold text-slate-100 mb-3 uppercase tracking-tight">
{post.frontmatter.title} {post.frontmatter.title}
</Link>
</h3> </h3>
<p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p> <p className="text-slate-400 text-sm leading-relaxed mb-4 font-mono">
<div className="flex items-center justify-between text-sm text-gray-500"> {post.frontmatter.description}
</p>
<div className="flex items-center gap-4 text-xs text-slate-500 font-mono mb-4">
<span>{formatDate(post.frontmatter.date)}</span> <span>{formatDate(post.frontmatter.date)}</span>
<span>{post.readingTime} min citire</span> <span>//</span>
<span>{post.readingTime} MIN</span>
</div>
</div>
<Link
href={`/blog/${post.slug}`}
className="inline-flex items-center text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-300 border-2 border-slate-700 px-4 py-2 hover:border-cyan-900"
>
[ACCESEAZĂ] &gt;&gt;
</Link>
</div> </div>
</article> </article>
))} ))}
</div> </div>
{allPosts.length > 6 && (
<div className="mt-12 text-center">
<Link
href="/blog"
className="inline-flex items-center px-8 py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600"
>
[VEZI TOATE ARTICOLELE] &gt;&gt;
</Link>
</div>
)}
</div>
</section> </section>
<section className="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg"> {/* Stats Section - from worktree-agent-1 */}
<h2 className="text-3xl font-bold mb-4">Vrei să afli mai multe?</h2> <section className="py-24 bg-zinc-900 border-y-4 border-slate-800">
<p className="text-lg text-gray-600 dark:text-gray-400 mb-6">Explorează arhiva completă de articole</p> <div className="max-w-7xl mx-auto px-6">
<Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition"> <div className="border-l-4 border-teal-900 pl-6 mb-12">
Vezi toate articolele → <p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
</Link> SYSTEM STATISTICS // DATABASE METRICS
</section> </p>
<h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
&gt; METRICI_
</h2>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
<div className="text-6xl font-mono font-bold text-cyan-400 mb-4">
{allPosts.length}+
</div>
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
ARTICOLE PUBLICATE
</p>
</div>
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
<div className="text-6xl font-mono font-bold text-emerald-400 mb-4">
50K+
</div>
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
CITITORI LUNARI
</p>
</div>
<div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
<div className="text-6xl font-mono font-bold text-teal-400 mb-4">
99%
</div>
<p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
SATISFACȚIE
</p>
</div>
</div>
</div>
</section>
{/* Newsletter CTA - from worktree-agent-1 */}
<section className="py-24 bg-slate-900 border-t-4 border-slate-800">
<div className="max-w-3xl mx-auto px-6">
<div className="border-4 border-slate-700 bg-zinc-900 p-12">
<p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
NEWSLETTER SUBSCRIPTION
</p>
<h2 className="text-3xl font-mono font-bold text-slate-100 uppercase mb-4">
&gt; RĂMÂI LA CURENT_
</h2>
<p className="text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-900 pl-4">
Primește cele mai noi articole direct în inbox
</p>
<form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-700">
<input
type="email"
placeholder="email@exemplu.com"
className="flex-1 px-6 py-4 bg-slate-800 text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-700 focus:bg-slate-750 focus:outline-none placeholder:text-slate-600"
/>
<button
type="submit"
className="px-8 py-4 bg-cyan-900 text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-700"
>
[ABONEAZĂ-TE]
</button>
</form>
<p className="text-slate-600 font-mono text-xs mt-4 uppercase">
// Fără spam. Dezabonare oricând.
</p>
</div>
</div>
</section>
</main>
) )
} }

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

8
public/grid.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(148, 163, 184, 0.1)" stroke-width="1"/>
</pattern>
</defs>
<rect width="100" height="100" fill="url(#grid)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

6
public/noise.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<filter id="noiseFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/>
</filter>
<rect width="100%" height="100%" filter="url(#noiseFilter)" opacity="0.05"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B