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 { Metadata } from 'next'
import { Navbar } from '@/components/blog/navbar'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Despre', title: 'Despre',
@@ -7,49 +8,136 @@ export const metadata: Metadata = {
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="max-w-3xl mx-auto"> <>
<h1 className="text-4xl font-bold mb-8">Despre Mine</h1> <Navbar />
<div className="min-h-screen bg-[rgb(var(--bg-primary))]">
<div className="prose dark:prose-invert max-w-none"> <div className="max-w-4xl mx-auto px-6 py-16">
<p className="text-lg leading-relaxed mb-6"> {/* Classification Header */}
Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat în <div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
dezvoltarea web modernă cu Next.js, React și TypeScript. <p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
&gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
</p> </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> {/* Main Content */}
<ul className="space-y-2"> <div className="space-y-8">
<li>Tutoriale despre dezvoltare web</li> {/* Introduction Section */}
<li>Ghiduri practice pentru Next.js și React</li> <section className="border-2 border-[rgb(var(--border-primary))] p-8">
<li>Sfaturi despre design și UX</li> <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
<li>Experiențe din proiecte reale</li> <p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
</ul> 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> {/* Content Section */}
<p>Acest blog este construit cu:</p> <section className="border-2 border-[rgb(var(--border-primary))] p-8">
<ul className="space-y-2"> <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))]">
<li> &gt; CE VEI GĂSI AICI
<strong>Next.js 15</strong> - Framework React pentru producție </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> <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 <strong>TypeScript</strong> - Pentru type safety
</li> </p>
<li> </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ă <strong>Tailwind CSS</strong> - Pentru stilizare rapidă
</li> </p>
<li> </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 <strong>Markdown</strong> - Pentru conținut
</li> </p>
</ul> </div>
</div>
</section>
<h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2> {/* Contact Section */}
<p> <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{' '} 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 email@example.com
</a>{' '} </a>{' '}
sau mă poți găsi pe rețelele sociale. sau mă poți găsi pe rețelele sociale.
</p> </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> </div>
</div>
</>
) )
} }

42
app/globals.css
View File

@@ -45,6 +45,7 @@
} }
@layer utilities { @layer utilities {
/* Scrollbar hiding utility */
.scrollbar-hide { .scrollbar-hide {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
@@ -129,6 +130,7 @@
opacity: 0.8; opacity: 0.8;
} }
/* Consolidated keyframes to avoid duplication */
@keyframes glitch-1 { @keyframes glitch-1 {
0%, 0%,
100% { 100% {
@@ -211,46 +213,6 @@
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); 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 */
.border-pulse { .border-pulse {
animation: pulse-border 2s ease-in-out infinite; animation: pulse-border 2s ease-in-out infinite;

1
next.config.js
View File

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