Refactor frontend components and backend migrations
- Removed TradingGraph component from frontend/src/components/trading. - Updated home page to import Services component and TradingGraph from new path. - Modified PortfolioPage to return null instead of PortfolioGrid. - Added initial migrations for account, advertisement, commerce, configuration, downloader, gopay, stripe, trading212, and zasilkovna apps in the backend. - Created Services component with subcomponents for Kinematografie, Drone Service, and Website Service. - Implemented TradingGraph component with dynamic data generation and canvas rendering. - Updated DonationShop component to display donation tiers with icons and descriptions.
This commit is contained in:
@@ -1,36 +0,0 @@
|
||||
import { FaCoffee, FaBatteryFull, FaMicrochip } from "react-icons/fa";
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
type Tier = { id: string; title: string; price: number; desc: string; color: string; icon: ReactNode };
|
||||
|
||||
const tiers: Tier[] = [
|
||||
{ id: 'coffee', title: 'Coffee', price: 3, desc: 'Fuel late-night coding sessions.', color: 'var(--c-other)', icon: <FaCoffee /> },
|
||||
{ id: 'battery', title: 'Drone Battery', price: 30, desc: 'Extend aerial filming time.', color: 'var(--c-other)', icon: <FaBatteryFull /> },
|
||||
{ id: 'gpu', title: 'GPU Upgrade', price: 200, desc: 'Speed up rendering and ML tasks.', color: 'var(--c-other)', icon: <FaMicrochip /> },
|
||||
];
|
||||
|
||||
export default function DonationShop() {
|
||||
return (
|
||||
<section id="shop" className="section">
|
||||
<div className="container">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-2 text-rainbow">Support My Creative Journey</h2>
|
||||
<p className="text-brand-text/80">Instead of buying products, consider donating to support my creative journey.</p>
|
||||
<div className="grid md:grid-cols-3 gap-6 mt-6">
|
||||
{tiers.map(t => (
|
||||
<div key={t.id} className="card p-5 flex flex-col">
|
||||
<div className="text-5xl mb-3 inline-flex items-center justify-center w-20 h-20 rounded-xl bg-brandGradient text-white shadow-glow">
|
||||
{t.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold" style={{ color: t.color }}>{t.title}</h3>
|
||||
<p className="text-[var(--c-lines)] mt-1">{t.desc}</p>
|
||||
<div className="mt-auto flex items-center justify-between pt-4">
|
||||
<span className="text-2xl font-bold" style={{ color: t.color }}>${t.price}</span>
|
||||
<button className="px-4 py-2 rounded-lg font-semibold text-brand-text bg-gradient-to-r from-[var(--c-other)] to-[var(--c-lines)] hover:shadow-glow transition-all" onClick={() => alert(`Thank you for supporting with ${t.title}!`)}>Donate</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Modal from "../common/Modal";
|
||||
|
||||
type Project = {
|
||||
id: string;
|
||||
title: string;
|
||||
image: string; // public/ path
|
||||
description: string;
|
||||
link?: string;
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
id: "perlica",
|
||||
title: "Perlica",
|
||||
image: "/portfolio/perlica.png",
|
||||
description: "E-commerce redesign with modern UI and Django backend integration.",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
id: "epinger",
|
||||
title: "Epinger",
|
||||
image: "/portfolio/epinger.png",
|
||||
description: "Landing page with responsive layout and animation system.",
|
||||
link: "#",
|
||||
},
|
||||
{
|
||||
id: "davo1",
|
||||
title: "Davo",
|
||||
image: "/portfolio/davo1.png",
|
||||
description: "Portfolio template and component library built with Vite + Tailwind.",
|
||||
link: "#",
|
||||
},
|
||||
];
|
||||
|
||||
export default function PortfolioGrid() {
|
||||
const [active, setActive] = useState<Project | null>(null);
|
||||
return (
|
||||
<section id="portfolio" className="section">
|
||||
<div className="container">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-2 text-rainbow">My Work</h2>
|
||||
<p className="text-[var(--c-lines)] mb-6 max-w-2xl">Selected projects combining engineering, design systems, performance optimization and infrastructure. Click a tile for details.</p>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{projects.map((p) => (
|
||||
<button
|
||||
key={p.id}
|
||||
className="card overflow-hidden text-left"
|
||||
onClick={() => setActive(p)}
|
||||
>
|
||||
<div className="aspect-[16/10] w-full overflow-hidden">
|
||||
<img src={p.image} alt={p.title} className="w-full h-full object-cover hover:scale-105 transition-transform" />
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-semibold tracking-wide text-rainbow">{p.title}</h3>
|
||||
<p className="text-xs text-[var(--c-lines)] mt-1 uppercase">View details →</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal open={!!active} onClose={() => setActive(null)} title={active?.title}>
|
||||
<div className="space-y-3">
|
||||
{active && (
|
||||
<>
|
||||
<img src={active.image} alt={active.title} className="w-full rounded" />
|
||||
<p>{active.description}</p>
|
||||
{active.link && (
|
||||
<a href={active.link} target="_blank" rel="noreferrer" className="inline-block px-4 py-2 glow border rounded">
|
||||
Visit project
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
export default function TradingGraph() {
|
||||
return (
|
||||
<section id="live" className="py-20 bg-gradient-to-b from-brand-bg to-brand-bgLight">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-rainbow">Live Performance</h2>
|
||||
<div className="card p-4 md:p-6">
|
||||
<div className="mb-3 text-sm text-brand-text/60">Trading212 graph placeholder</div>
|
||||
<div className="aspect-[16/9] w-full rounded border border-brand-lines/50 bg-brand-bg/40 grid place-items-center">
|
||||
<span className="text-brand-text/60">Graph will appear here</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user