- {/* Avatar */}
-
+
-
-
- {/* Body */}
+
- WM
-
-
-
- About
-
- {SITE.about1}
-{SITE.about2}
+ ++ {SITE.about1} +
++ {SITE.about2} +
-
Stack
++ Stack +
- {SITE.skills.map(s => (
-
+ {SITE.skills.map((s) => (
+
{s}
))}
diff --git a/components/CommitSection.tsx b/components/CommitSection.tsx
index ad966f8..1b28568 100644
--- a/components/CommitSection.tsx
+++ b/components/CommitSection.tsx
@@ -7,19 +7,20 @@ import type { GiteaRepo, GiteaCommit, HeatmapEntry } from '@/lib/types';
const CELL = 12, GAP = 3, STEP = CELL + GAP;
const DAY_LABEL_W = 26;
const WEEKS = 52;
-// Luminosity levels (white-on-dark glow effect)
+
const LEVELS = [
- 'rgba(255,255,255,0.04)', // 0
- 'rgba(255,255,255,0.13)', // 1-2
- 'rgba(255,255,255,0.28)', // 3-5
- 'rgba(255,255,255,0.50)', // 6-9
- 'rgba(255,255,255,0.80)', // 10+
+ 'rgba(15,23,42,0.05)',
+ 'rgba(15,23,42,0.12)',
+ 'rgba(15,23,42,0.22)',
+ 'rgba(15,23,42,0.38)',
+ 'rgba(15,23,42,0.62)',
];
+
function getLevel(n: number) {
if (n === 0) return 0;
- if (n <= 2) return 1;
- if (n <= 5) return 2;
- if (n <= 9) return 3;
+ if (n <= 2) return 1;
+ if (n <= 5) return 2;
+ if (n <= 9) return 3;
return 4;
}
@@ -35,31 +36,47 @@ function timeAgo(s: string) {
return `${Math.floor(days / 30)}mo`;
}
-// ── Stat card ──
-function Stat({ label, value, sub }: { label: string; value: string | number; sub: string }) {
+// ── Stat item ──
+function Stat({
+ label,
+ value,
+ sub,
+}: {
+ label: string;
+ value: string | number;
+ sub: string;
+}) {
return (
-
- {label}
- {value}
- {sub}
+ ();
- data.forEach(e => {
+ data.forEach((e) => {
const k = new Date(e.timestamp * 1000).toISOString().split('T')[0];
m.set(k, (m.get(k) || 0) + e.contributions);
});
return m;
}, [data]);
- // Build 52-week grid starting from Sunday 51 weeks ago
const { weeks, monthLabels } = useMemo(() => {
const today = new Date();
today.setHours(0, 0, 0, 0);
@@ -88,6 +105,7 @@ function ContributionCalendar({ data }: { data: HeatmapEntry[] }) {
}
weeks.push(week);
}
+
return { weeks, monthLabels };
}, [dateMap]);
@@ -95,16 +113,19 @@ function ContributionCalendar({ data }: { data: HeatmapEntry[] }) {
const svgH = 7 * STEP + 20;
return (
-
+
+ {label}
+
+
+ {value}
+
+ {sub}
);
}
// ── Contribution Calendar ──
function ContributionCalendar({ data }: { data: HeatmapEntry[] }) {
- const [tooltip, setTooltip] = useState<{ x: number; y: number; date: string; count: number } | null>(null);
+ const [tooltip, setTooltip] = useState<{
+ x: number;
+ y: number;
+ date: string;
+ count: number;
+ } | null>(null);
const dateMap = useMemo(() => {
const m = new Map
-
-
- Contribution Calendar · last 12 months
+
+
+
-
+
- {/* Tooltip */}
{tooltip && (
);
}
-// ── Monthly bar chart ──
+// ── Monthly chart ──
function MonthlyChart({ data }: { data: HeatmapEntry[] }) {
const months = useMemo(() => {
return Array.from({ length: 12 }, (_, i) => {
@@ -172,7 +223,7 @@ function MonthlyChart({ data }: { data: HeatmapEntry[] }) {
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
const label = d.toLocaleDateString('en-US', { month: 'short' });
const count = data
- .filter(e => {
+ .filter((e) => {
const ed = new Date(e.timestamp * 1000);
return `${ed.getFullYear()}-${String(ed.getMonth() + 1).padStart(2, '0')}` === key;
})
@@ -181,30 +232,29 @@ function MonthlyChart({ data }: { data: HeatmapEntry[] }) {
});
}, [data]);
- const maxVal = Math.max(...months.map(m => m.count), 1);
- const barW = 100 / 12;
+ const maxVal = Math.max(...months.map((m) => m.count), 1);
return (
-
Less
{LEVELS.map((c, i) => (
-
+
))}
More
@@ -112,35 +133,65 @@ function ContributionCalendar({ data }: { data: HeatmapEntry[] }) {
+ className="fixed z-50 pointer-events-none px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-900 bg-white/95 border border-slate-200 shadow-xl whitespace-nowrap"
+ style={{ left: tooltip.x + 12, top: tooltip.y - 36 }}
+ >
{tooltip.count}
- {' contribution'}{tooltip.count !== 1 ? 's' : ''}
- {tooltip.date}
+ {' contribution'}
+ {tooltip.count !== 1 ? 's' : ''}
+ {tooltip.date}
)}
-
+
+
Monthly activity
{months.map((m, i) => {
const pct = (m.count / maxVal) * 100;
return (
-
+
- {m.label}
+ {m.label}
);
})}
@@ -215,41 +265,49 @@ function MonthlyChart({ data }: { data: HeatmapEntry[] }) {
// ── Recent commits ──
function RecentCommits({ commits }: { commits: GiteaCommit[] }) {
- if (!commits.length) return (
-
No recent commits.
- ); + if (!commits.length) { + returnNo recent commits.
; + } + return ( -
-
+
+
Recent commits
-
-
- {commits.slice(0, 10).map((c, i) => {
+
+
-
- - ---- - {c._repo} - - - {sha} - - {date ? timeAgo(date) : ''} +
- +
); @@ -261,11 +319,11 @@ function RecentCommits({ commits }: { commits: GiteaCommit[] }) { // ── Main section ── export default function CommitSection() { - const [repos, setRepos] = useState+ ++ +-{msg}
{msg}
(null); + const [error, setError] = useState (null); useEffect(() => { async function load() { @@ -289,65 +347,108 @@ export default function CommitSection() { return ( - -- Contributions +
+
- {/* Stats row */} --+- - - - ++ {/* Left side */} +++- {/* Calendar */} -+ + + + - {loading ? ( -- {/* Monthly + commits */} -- - +- ) : error ? ( -+ {loading ? ( ++ + ++ ) : error ? ( +++ ) : ( +Could not load heatmap
+{error}
++ )} + -- ) : ( -Could not load heatmap
-{error}
-- )} - -- {loading - ? - :-- } - - {loading - ? ( -); diff --git a/components/Contact.tsx b/components/Contact.tsx index 1529eba..9e4cc94 100644 --- a/components/Contact.tsx +++ b/components/Contact.tsx @@ -46,8 +46,8 @@ export default function Contact() { widgetIdRef.current = window.turnstile.render(turnstileRef.current, { sitekey: TURNSTILE_SITE_KEY, - theme: 'dark', - callback: token => { + theme: 'light', + callback: (token) => { setTurnstileToken(token); setErrorMessage(''); }, @@ -144,30 +144,26 @@ export default function Contact() { className="py-24 px-6" aria-labelledby="contact-heading" > -- {[...Array(5)].map((_, i) => ( --- -- - + {/* Right side */} +++ + {!!repos.length && ( ++ {loading ? ( + + ) : ( ++ ++ )} + + {loading ? ( ++ ) : ( ++ {[...Array(5)].map((_, i) => ( +- ))} + ))} ++ +-+ + ++ )} + + + Projects + +- ) - :+ {repos.slice(0, 6).map((repo) => ( + + {repo.name} + + ))} +- } + )} + - Get in touch +- Let’s work together.
-- Open to interesting roles, collaborations, and serious product ideas. +
-+{/* Left side contact cards */} @@ -306,7 +301,7 @@ export default function Contact() { {TURNSTILE_SITE_KEY ? ( ) : ( -diff --git a/components/Footer.tsx b/components/Footer.tsx index 212c3b8..bf7498b 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -2,15 +2,23 @@ import { GITEA_URL, GITEA_USERNAME } from '@/lib/config'; export default function Footer() { return ( -+
Captcha is not configured correctly.
)} @@ -326,13 +321,13 @@ export default function Contact() { {status === 'sent' && ( -+
Thanks — your message has been sent.
)} {status === 'error' && errorMessage && ( -{errorMessage}
+{errorMessage}
)} - +
-
+ {commits.slice(0, 10).map((c) => {
const sha = (c.sha || '').slice(0, 7);
- const msg = (c.commit?.message || '').split('\n')[0].slice(0, 64);
+ const msg = (c.commit?.message || '').split('\n')[0].slice(0, 72);
const date = c.created || c.commit?.author?.date;
- const isLast = i === Math.min(9, commits.length - 1);
+
return (
-