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

feat/improve-about-page #9

Merged
raresj merged 2 commits from feat/improve-about-page into master 2025-12-02 16:10:35 +00:00
Conversation 0 Commits 2 Files Changed 18 +129 -80
3 changed files with 129 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 38c2c5217c - Show all commits

146
app/about/page.tsx
View File

@@ -1,4 +1,5 @@
import { Metadata } from 'next'
import { Navbar } from '@/components/blog/navbar'
export const metadata: Metadata = {
title: 'Despre',
@@ -7,49 +8,136 @@ export const metadata: Metadata = {
export default function AboutPage() {
return (
<div className="max-w-3xl mx-auto">
<h1 className="text-4xl font-bold mb-8">Despre Mine</h1>
<div className="prose dark:prose-invert max-w-none">
<p className="text-lg leading-relaxed mb-6">
Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat în
dezvoltarea web modernă cu Next.js, React și TypeScript.
<>
<Navbar />
<div className="min-h-screen bg-[rgb(var(--bg-primary))]">
<div className="max-w-4xl mx-auto px-6 py-16">
{/* Classification Header */}
<div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
<p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
&gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
</p>
<h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
DESPRE MINE_
</h1>
</div>
<h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
<ul className="space-y-2">
<li>Tutoriale despre dezvoltare web</li>
<li>Ghiduri practice pentru Next.js și React</li>
<li>Sfaturi despre design și UX</li>
<li>Experiențe din proiecte reale</li>
</ul>
{/* Main Content */}
<div className="space-y-8">
{/* Introduction Section */}
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
<div className="border-l-4 border-[var(--neon-cyan)] pl-6">
<p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat
în dezvoltarea web modernă cu Next.js, React și TypeScript.
</p>
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
STATUS: ACTIVE // LEVEL: SENIOR DEV
</p>
</div>
</section>
<h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
<p>Acest blog este construit cu:</p>
<ul className="space-y-2">
<li>
<strong>Next.js 15</strong> - Framework React pentru producție
{/* Content Section */}
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
&gt; CE VEI GĂSI AICI
</h2>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
Tutoriale despre dezvoltare web
</span>
</li>
<li>
<li className="flex items-start gap-3">
<span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
Ghiduri practice pentru Next.js și React
</span>
</li>
<li className="flex items-start gap-3">
<span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
Sfaturi despre design și UX
</span>
</li>
<li className="flex items-start gap-3">
<span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
<span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
Experiențe din proiecte reale
</span>
</li>
</ul>
</section>
{/* Tech Stack Section */}
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
&gt; TEHNOLOGII FOLOSITE
</h2>
<p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
SYSTEM STACK // VERSION 2.0
</p>
<div className="grid gap-4">
<div className="border border-[rgb(var(--border-primary))] p-4">
<h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
[FRAMEWORK]
</h3>
<p className="font-mono text-sm text-[rgb(var(--text-primary))]">
<strong>Next.js 16</strong> - Framework React pentru producție
</p>
</div>
<div className="border border-[rgb(var(--border-primary))] p-4">
<h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
[LANGUAGE]
</h3>
<p className="font-mono text-sm text-[rgb(var(--text-primary))]">
<strong>TypeScript</strong> - Pentru type safety
</li>
<li>
</p>
</div>
<div className="border border-[rgb(var(--border-primary))] p-4">
<h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
[STYLING]
</h3>
<p className="font-mono text-sm text-[rgb(var(--text-primary))]">
<strong>Tailwind CSS</strong> - Pentru stilizare rapidă
</li>
<li>
</p>
</div>
<div className="border border-[rgb(var(--border-primary))] p-4">
<h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
[CONTENT]
</h3>
<p className="font-mono text-sm text-[rgb(var(--text-primary))]">
<strong>Markdown</strong> - Pentru conținut
</li>
</ul>
</p>
</div>
</div>
</section>
<h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>
<p>
{/* Contact Section */}
<section className="border-2 border-[rgb(var(--border-primary))] p-8">
<h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
&gt; CONTACT
</h2>
<div className="border-l-4 border-[var(--neon-pink)] pl-6">
<p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed mb-4">
Mă poți contacta pe{' '}
<a href="mailto:email@example.com" className="text-primary-600 hover:text-primary-700">
<a
href="mailto:email@example.com"
className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
>
email@example.com
</a>{' '}
sau mă poți găsi pe rețelele sociale.
</p>
<p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-wider">
RESPONSE TIME: &lt; 24H // STATUS: MONITORED
</p>
</div>
</section>
</div>
</div>
</div>
</>
)
}

42
app/globals.css
View File

@@ -45,6 +45,7 @@
}
@layer utilities {
/* Scrollbar hiding utility */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
@@ -129,6 +130,7 @@
opacity: 0.8;
}
/* Consolidated keyframes to avoid duplication */
@keyframes glitch-1 {
0%,
100% {
@@ -211,46 +213,6 @@
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
0%,
100% {
transform: translate(0, 0);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
25% {
transform: translate(-3px, 2px);
clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
}
50% {
transform: translate(3px, -2px);
clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
}
75% {
transform: translate(-2px, -1px);
clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
}
}
@keyframes glitch-2 {
0%,
100% {
transform: translate(0, 0);
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
25% {
transform: translate(3px, -2px);
clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
}
50% {
transform: translate(-3px, 2px);
clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
}
75% {
transform: translate(2px, 1px);
clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
}
}
/* Border Pulse Animation */
.border-pulse {
animation: pulse-border 2s ease-in-out infinite;

1
next.config.js
View File

@@ -70,7 +70,6 @@ const nextConfig = {
// Performance Optimization
// ============================================
// Compress static pages (reduces bandwidth)
compress: true,