100 lines
5.7 KiB
TypeScript
100 lines
5.7 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
const About = () => {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="space-y-4"
|
|
>
|
|
<h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
|
|
About Me
|
|
</h1>
|
|
|
|
<div className="border border-primary/50 p-6 bg-background/50 box-glow">
|
|
<p className="font-pixel text-lg text-foreground/90 leading-relaxed mb-4">
|
|
Hello, traveler. I'm Jory — a maker, tinkerer, and digital explorer navigating through hardware and code.
|
|
</p>
|
|
|
|
<p className="font-pixel text-foreground/80 leading-relaxed">
|
|
From building custom speaker systems and experimenting with X-ray machines to running self-hosted server infrastructure, I love diving deep into projects that blend the physical and digital worlds.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
{/* Skills/Interests taking left half */}
|
|
<div className="md:w-1/2 flex flex-col gap-4">
|
|
<div className="p-4 border border-primary/30">
|
|
<h2 className="font-minecraft text-xl text-primary text-glow mb-2">Technical Skills</h2>
|
|
<ul className="font-pixel text-foreground/80 space-y-1">
|
|
<li>{'>'} Web Development (React, TypeScript)</li>
|
|
<li>{'>'} Self-Hosting & VPS Infrastructure</li>
|
|
<li>{'>'} Linux System Administration</li>
|
|
<li>{'>'} Audio Engineering & DSP</li>
|
|
</ul>
|
|
</div>
|
|
<div className="p-4 border border-primary/30">
|
|
<h2 className="font-minecraft text-xl text-primary text-glow mb-2">Current Interests</h2>
|
|
<ul className="font-pixel text-foreground/80 space-y-1">
|
|
<li>{'>'} DIY Electronics & Hardware</li>
|
|
<li>{'>'} DJ Mixing & Audio Visualization</li>
|
|
<li>{'>'} Speaker Design & Crossovers</li>
|
|
<li>{'>'} Automation & Scripting</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ASCII Art on right - centered in remaining space */}
|
|
<div className="md:w-1/2 flex items-center justify-center">
|
|
<pre className="font-mono text-[5px] sm:text-[6px] md:text-[7px] lg:text-[8px] xl:text-[9px] text-primary/50 leading-[1.15] select-none whitespace-pre">
|
|
{` ,#/**,*,
|
|
.*,.*, .*,/#%##%%%%%%%%%%###(((
|
|
.*/((######%%%%##%%%%%%%%%%%###(##/((
|
|
..,**/(#((((#%####%%%#%%%%%%%%%%%%%#%%##(((*,.
|
|
,/#########%%#%%%%%%###%%%%%%%#%%%#######(##((((//,*
|
|
*(###%%%%%%######(//(//((/(#(########%#%%%%######(#(//
|
|
,(##%%%##((((/(//*************//////((####%%%%%###%#((/*
|
|
.###%%%##((/***/************************//((##%%%%###%%%(/.
|
|
((#%%%#(/*****,,,*********,,,*****,*********/(##%%%%%##%%%%#/.
|
|
.((%%%%#(/*,,,,,,,,,,,,,,,,,,,,,,,*,,*,*********/((#%%%%%%#####(*. ,
|
|
//#%%%#(/*,,,,,,,,,,,,,,,,,,,,,*,,,,,,,,**********//#%%%%%%%%%%%##(/,.
|
|
,#######(/**,,,,,,,,,,,,,,,,,,,,,,,,,,*,,,,,*******///(%%%%%%%##(/((/,
|
|
.#####%#(/****,,,,,,,,,,,,,,,,,,,,,,,,,,,,*********///(##%%%%%%#(/*..
|
|
.#(#%%%#(/***,,,********,,,,,,,,,,,,,,**//////(((/////(#%%%%%%#(/,. ,.
|
|
,/#%%%%#(/****/////((#%%###/***,,,***/(##((/*****/((//##%%%%%%/(/,.
|
|
(#%%%#(***********,**********,,,**////************//##%##%#, ,... .
|
|
/(%%#(/**,,***//(#%%##(////**,,,*/((///#%%%%##(//***/(#%##.
|
|
*//#((/,,,,**/(//(#%#/*(//******/////(/*(##(/(/(//***/(##(/.
|
|
//***/(*,,,*********/****/**//**//////////*/**********/(#(//*
|
|
.******/*,,,****************//****///(/////////*********/((//
|
|
,,***/**,,,******************/****///////****/*************,
|
|
.**,,,*,,,***************///*****///(//**********/********
|
|
*****,,,,*************/******,***////*************,****
|
|
.,**,,,*******,***,***////////((/(//*************,**,
|
|
.**,,,******,**,,*****/**/////////*************,*,
|
|
.,********,************///**//////**********,#%(
|
|
.,******************//////(////////*********,%%%%%%,
|
|
,*************/////((((((((((((//********/*(%%%%%%%#
|
|
.*****************************************/%%%%%%%%%%.
|
|
*%%%%%%%(/*******,,,,***************************(%%%%%%%%%%%%/
|
|
,%%%%%%%%%%%%%#/*****,,,,,,,,,,,*,,*******,,*******/#%%%%%%%%%%%%%%*
|
|
/##%%%%%%%%%%%%%%%%/*//*****,,,,,,,,,,,,****,*******//(/#%%%%%%%%%%%%%%%%%#/
|
|
.%%#%%%%%%%%%%%%%%%%%%%/***/(/***,**,,,,,,,,,,*******/((////(%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%(******/////**************//((/******(%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%(/**,,,*******/((((//////////*******/(%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%(/**,,,,******,,,,,,,,,,************/(%%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%%(/***,,*****,,,,,,,,,,,****//******//(#%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%%%#(/****,********,,,,,,****///*******//(#%%%%%%%%%%%%%%%%%%
|
|
%%%%%%%%%%%%%%%%%%%%###(/******,,****,,*****/****/*******//((%%%%%%%%%%%%%%%%%%*
|
|
(%%%%%%%%%%%%%%%#((((((//****,,,,***************/******///%%%%%%%%%%%%%%%%%%%%,
|
|
/%%%%%%%%%%%%%%%#(((((////***,,,*********************//#%%%%%%%%%%%%%%%%%%%%%%`}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default About;
|