57c685666e
Replaces the previous description with a statement on AI usage and a stance against derogatory terms like "skid".
84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { FileCode2, Terminal, Database, Server, GitBranch, Layout } from 'lucide-react';
|
||
|
||
const TECH_STACKS = [
|
||
{
|
||
name: 'TypeScript',
|
||
desc: 'Strict syntactical superset of JavaScript',
|
||
icon: FileCode2
|
||
},
|
||
{
|
||
name: 'Python',
|
||
desc: 'Data structures, scripting & automation',
|
||
icon: Terminal
|
||
},
|
||
{
|
||
name: 'MySQL',
|
||
desc: 'Relational database management',
|
||
icon: Database
|
||
},
|
||
{
|
||
name: 'Node.js',
|
||
desc: 'Server-side JavaScript runtime',
|
||
icon: Server
|
||
},
|
||
{
|
||
name: 'Git',
|
||
desc: 'Version control & collaboration',
|
||
icon: GitBranch
|
||
},
|
||
{
|
||
name: 'HTML5',
|
||
desc: 'Semantic web markup & accessibility',
|
||
icon: Layout
|
||
}
|
||
];
|
||
|
||
const About: React.FC = () => {
|
||
return (
|
||
<section id="about" className="bg-[#f2f2f2] py-16">
|
||
<div className="max-w-[980px] mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
|
||
|
||
{/* Left Column: Bio - Vertically Centered */}
|
||
<div className="md:col-span-2 space-y-6">
|
||
<h3 className="text-2xl font-display font-medium text-[#333] border-b border-[#ccc] pb-2">
|
||
Why m5rcel?
|
||
</h3>
|
||
<div className="flex gap-6 items-center">
|
||
<img src="https://github.com/m4rcel-lol.png" alt="m4rcel-lol Avatar" className="w-[120px] h-[120px] rounded shadow-md border border-white" />
|
||
<div className="space-y-4">
|
||
<p className="text-sm text-[#444] font-sans leading-relaxed">
|
||
It’s not just about writing code. It’s about creating an experience that feels magical. From the moment the page loads, everything should feel responsive, fluid, and intuitive.
|
||
</p>
|
||
<p className="text-sm text-[#444] font-sans leading-relaxed">
|
||
I mainly use AI to write everything I do, it was made to help out people, right? I don't fucking like the term "skid", if u think people using AI are skids then fuck off.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column: Skills (Sidebar style) */}
|
||
<div className="md:col-span-1 bg-white border border-[#d6d6d6] rounded-md shadow-sm p-5 h-fit">
|
||
<h3 className="text-lg font-bold text-[#333] mb-4 font-sans text-center border-b border-[#eee] pb-2">Tech Stacks</h3>
|
||
|
||
<ul className="space-y-4">
|
||
{TECH_STACKS.map((tech, i) => (
|
||
<li key={i} className="flex items-start gap-3">
|
||
<div className="mt-0.5 text-[#555]">
|
||
<tech.icon size={18} strokeWidth={2} />
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-bold text-[#333]">{tech.name}</div>
|
||
<div className="text-[11px] text-[#666] leading-tight mt-0.5">{tech.desc}</div>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default About; |