Updates dependencies and implements portfolio
Updates eslint and typescript-eslint dependencies. Migrates to a new portfolio structure with components, styling, route management, and internationalization. Adds project display with multiple project types using custom components. Adds image assets to be displayed in experience sections
This commit is contained in:
Louis
144
src/components/Experience/custom/CustomStripe.tsx
Normal file
144
src/components/Experience/custom/CustomStripe.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { TFunction } from "i18next";
|
||||
|
||||
export const CustomStripe = ({ t }: { t: TFunction }) => {
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="mt-8 space-y-8">
|
||||
<header className="border-b border-secondary/10 pb-4">
|
||||
<h2 className="text-2xl font-semibold text-secondary mb-2">{t('experience.customs.stripe.title')}</h2>
|
||||
<p className="text-secondary/60">{t('experience.customs.stripe.subtitle')}</p>
|
||||
</header>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.overview.title')}</h3>
|
||||
<p className="text-secondary/70">{t('experience.customs.stripe.overview.description')}</p>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.architecture.title')}</h3>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.architecture.frontend.title')}</h4>
|
||||
<ul className="space-y-2 text-secondary/70">
|
||||
<li className="flex gap-2">
|
||||
<span className="font-semibold text-accent">{t('experience.customs.stripe.architecture.frontend.tech')}:</span>
|
||||
<span>JavaScript natif, jQuery</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<span className="font-semibold text-accent">{t('experience.customs.stripe.architecture.frontend.features')}:</span>
|
||||
<span>{t('experience.customs.stripe.architecture.frontend.features_list')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.architecture.backend.title')}</h4>
|
||||
<ul className="list-disc list-inside space-y-2 text-secondary/70">
|
||||
<li>{t('experience.customs.stripe.architecture.backend.integration')}</li>
|
||||
<li>{t('experience.customs.stripe.architecture.backend.abstraction')}</li>
|
||||
<li>{t('experience.customs.stripe.architecture.backend.extensibility')}</li>
|
||||
<li>{t('experience.customs.stripe.architecture.backend.logging')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.architecture.security.title')}</h4>
|
||||
<ul className="list-disc list-inside space-y-2 text-secondary/70">
|
||||
<li>{t('experience.customs.stripe.architecture.security.webhooks')}</li>
|
||||
<li>{t('experience.customs.stripe.architecture.security.idempotence')}</li>
|
||||
<li>{t('experience.customs.stripe.architecture.security.reconciliation')}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.challenges.title')}</h3>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.challenges.decoupling.title')}</h4>
|
||||
<p className="text-secondary/70">{t('experience.customs.stripe.challenges.decoupling.description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-2">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.challenges.errors.title')}</h4>
|
||||
<p className="text-secondary/70">{t('experience.customs.stripe.challenges.errors.description')}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.stack.title')}</h3>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.stack.frontend.title')}</h4>
|
||||
<ul className="space-y-2 text-secondary/70 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>JavaScript natif</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>jQuery</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.stack.backend.title')}</h4>
|
||||
<ul className="space-y-2 text-secondary/70 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>PHP</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>API Stripe</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>MySQL</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary/50 p-5 rounded-lg border border-secondary/10 space-y-3">
|
||||
<h4 className="text-lg font-medium text-secondary">{t('experience.customs.stripe.stack.tools.title')}</h4>
|
||||
<ul className="space-y-2 text-secondary/70 text-sm">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>Webhooks Stripe</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">•</span>
|
||||
<span>{t('experience.customs.stripe.stack.tools.abstraction')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-accent">{t('experience.customs.stripe.results.title')}</h3>
|
||||
<ul className="space-y-2 text-secondary/70">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">✓</span>
|
||||
<span>{t('experience.customs.stripe.results.operational')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">✓</span>
|
||||
<span>{t('experience.customs.stripe.results.extensible')}</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-accent mt-1">✓</span>
|
||||
<span>{t('experience.customs.stripe.results.stable')}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer className="border-t border-secondary/10 pt-6">
|
||||
<p className="text-sm text-secondary/60 italic">{t('experience.customs.stripe.tags')}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user