feat(cv): auto-linkify URLs in work segment titles, descriptions and content

Add Linkify component that detects https:// URLs in text and renders
them as clickable links colored with the segment's branchBorderColor.

Made-with: Cursor
master
sii42400 2026-04-16 16:06:04 +02:00
parent 71256a83f1
commit 501a055c0c
2 changed files with 22 additions and 8 deletions

View File

@ -378,7 +378,7 @@ export const content_pl = [
type: "workSubSegment",
tabs: 1,
title: "00x097 Trade - Platforma analizy technicznej krypto & stock market z detekcją wzorców harmonicznych",
description: "Zaprojektowałem i zbudowałem pełnostackową platformę do analizy kryptowalut z naciskiem na automatyczną detekcję wzorców harmonicznych i wskaźniki techniczne. Backend oparty na FastAPI z asynchronicznym PostgreSQL (asyncpg), kolejką zadań Celery (RabbitMQ + Redis) oraz integracjami z API Binance, MEXC i Yahoo Finance. Frontend dostarcza interaktywny interfejs wykresów TradingView z poziomami Fibonacciego, wskaźnikami RSI, MACD, OBV oraz panelem wizualizacji wzorców harmonicznych. Wdrożony na Kubernetes (bare metal) z automatycznymi pipeline'ami synchronizacji i analizy.",
description: "Zaprojektowałem i zbudowałem pełnostackową platformę do analizy kryptowalut z naciskiem na automatyczną detekcję wzorców harmonicznych i wskaźniki techniczne. Backend oparty na FastAPI z asynchronicznym PostgreSQL (asyncpg), kolejką zadań Celery (RabbitMQ + Redis) oraz integracjami z API Binance, MEXC i Yahoo Finance. Frontend dostarcza interaktywny interfejs wykresów TradingView z poziomami Fibonacciego, wskaźnikami RSI, MACD, OBV oraz panelem wizualizacji wzorców harmonicznych. Wdrożony na Kubernetes (bare metal) z automatycznymi pipeline'ami synchronizacji i analizy. Aplikacja jest dostępna pod adresem: https://00x097.com",
image: "",
branchBorderColor: "rgb(153, 69, 255)",
mainBorderColor: "#ffd748",
@ -1121,7 +1121,7 @@ export const content_en = [
type: "workSubSegment",
tabs: 1,
title: "00x097 Trade - Stock & Crypto Technical Analysis Platform with Harmonic Pattern Detection",
description: "Designed and built a full-stack cryptocurrency analysis platform focused on automated harmonic pattern detection and technical indicators. Backend built on FastAPI with async PostgreSQL (asyncpg), Celery task queue (RabbitMQ + Redis), and integrations with Binance, MEXC, and Yahoo Finance APIs. Frontend delivers an interactive TradingView-based charting interface with Fibonacci levels, RSI, MACD, OBV indicators, and a harmonic pattern visualization panel. Deployed on Kubernetes (bare metal) with automated sync and analysis pipelines.",
description: "Designed and built a full-stack cryptocurrency analysis platform focused on automated harmonic pattern detection and technical indicators. Backend built on FastAPI with async PostgreSQL (asyncpg), Celery task queue (RabbitMQ + Redis), and integrations with Binance, MEXC, and Yahoo Finance APIs. Frontend delivers an interactive TradingView-based charting interface with Fibonacci levels, RSI, MACD, OBV indicators, and a harmonic pattern visualization panel. Deployed on Kubernetes (bare metal) with automated sync and analysis pipelines. Application is available at: https://00x097.com",
image: "",
branchBorderColor: "rgb(153, 69, 255)",
mainBorderColor: "#ffd748",

View File

@ -4,6 +4,20 @@ import { content_pl } from "../content/kamil"
import { content_en } from "../content/kamil"
import { loadCaptchaEnginge, LoadCanvasTemplate, validateCaptcha } from 'react-simple-captcha'
const Linkify = ({ text, color }) => {
const urlRegex = /(https?:\/\/[^\s,)]+)/g;
const parts = text.split(urlRegex);
return parts.map((part, i) =>
urlRegex.test(part) ? (
<a key={i} href={part} target="_blank" rel="noopener noreferrer" style={{ color: color || "inherit" }}>
{part}
</a>
) : (
part
)
);
};
const SimpleCaptchaWrapper = ({ onVerified, language }) => {
const [error, setError] = React.useState(null);
@ -202,20 +216,20 @@ const SegmentListWork = ({ segment, tabs, borderSize }) => {
>
{
segment.content.length > 0 ?
segment.title + ":"
<><Linkify text={segment.title} color={segment.branchBorderColor} />:</>
:
segment.lastElement === true ?
segment.title + "."
<><Linkify text={segment.title} color={segment.branchBorderColor} />.</>
:
segment.noElements === true ?
segment.title + ","
<><Linkify text={segment.title} color={segment.branchBorderColor} />,</>
:
segment.title + ":"
<><Linkify text={segment.title} color={segment.branchBorderColor} />:</>
}
</div>
{segment.description && (
<div className="segment_description">
{segment.description}
<Linkify text={segment.description} color={segment.branchBorderColor} />
</div>
)}
{
@ -232,7 +246,7 @@ const SegmentListWork = ({ segment, tabs, borderSize }) => {
(item, index) => {
return (
<li key={ index } style={{ color: segment.branchBorderColor || "inherit" }}>
<span style={{ color: "#a6a6a6" }}>{ item + "," }</span>
<span style={{ color: "#a6a6a6" }}><Linkify text={item} color={segment.branchBorderColor} />,</span>
</li>
)
}