improve fonts and UI

2026-05-03 19:59:53 +02:00
parent 16e7547fcc
commit 02d7b7918e
11 changed files with 4266 additions and 142 deletions
--- a/components/Education.tsx
+++ b/components/Education.tsx
@@ -39,7 +39,6 @@ function EduCard({ item }: { item: EducationItem }) {
      onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#6b5730")}
      onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
    >
-      {/* Corner accent */}
      <div
        style={{
          position: "absolute",
@@ -53,7 +52,6 @@ function EduCard({ item }: { item: EducationItem }) {
      />

      <div
-        className="font-mono"
        style={{
          fontFamily: "var(--font-jetbrains), monospace",
          fontSize: "0.62rem",
@@ -77,7 +75,6 @@ function EduCard({ item }: { item: EducationItem }) {
      )}

      <h3
-        className="font-display"
        style={{
          fontFamily: "var(--font-bebas), sans-serif",
          fontSize: "1.3rem",
@@ -91,7 +88,7 @@ function EduCard({ item }: { item: EducationItem }) {
      </h3>
      <p
        style={{
-          fontFamily: "var(--font-lora), serif",
+          fontFamily: "var(--font-jetbrains), monospace",
          fontSize: "0.85rem",
          color: "#6b7280",
          lineHeight: 1.5,
@@ -103,70 +100,125 @@ function EduCard({ item }: { item: EducationItem }) {
  );
 }

-function CertCard({ item }: { item: CertificateItem }) {
+function CertCard({ item, index }: { item: CertificateItem; index: number }) {
  return (
    <div
      style={{
        border: "1px solid #1c1f26",
-        padding: "1.75rem",
        background: "#0e1014",
        position: "relative",
        overflow: "hidden",
-        transition: "border-color 0.3s",
-        flex: 1,
+        transition: "border-color 0.3s, box-shadow 0.3s",
        display: "flex",
        flexDirection: "column",
      }}
-      onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#c8a96e")}
-      onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#1c1f26")}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = "#c8a96e";
+        e.currentTarget.style.boxShadow = "0 8px 32px rgba(200, 169, 110, 0.08)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = "#1c1f26";
+        e.currentTarget.style.boxShadow = "none";
+      }}
    >
      <div
-        className="font-mono"
        style={{
-          fontFamily: "var(--font-jetbrains), monospace",
-          fontSize: "0.62rem",
-          letterSpacing: "0.12em",
-          color: "#c8a96e",
-          marginBottom: "1rem",
+          padding: "1.5rem 1.75rem",
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
        }}
      >
-        {item.date}
-      </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: "1.25rem" }}>
+          <div
+            style={{
+              width: "36px",
+              height: "36px",
+              borderRadius: "8px",
+              background: index === 0
+                ? "linear-gradient(135deg, rgba(200,169,110,0.15), rgba(200,169,110,0.05))"
+                : "rgba(255,255,255,0.03)",
+              border: "1px solid rgba(200,169,110,0.2)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#c8a96e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <circle cx="12" cy="8" r="6" />
+              <path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11" />
+            </svg>
+          </div>
+          <div
+            style={{
+              fontFamily: "var(--font-jetbrains), monospace",
+              fontSize: "0.58rem",
+              letterSpacing: "0.14em",
+              color: "#c8a96e",
+              textTransform: "uppercase",
+            }}
+          >
+            {item.date}
+          </div>
+        </div>

-      <h3
-        className="font-display"
-        style={{
-          fontFamily: "var(--font-bebas), sans-serif",
-          fontSize: "1.15rem",
-          letterSpacing: "0.04em",
-          color: "#e2e4e9",
-          lineHeight: 1.3,
-          marginBottom: "0.5rem",
-        }}
-      >
-        {item.name}
-      </h3>
-      <p
-        style={{
-          fontFamily: "var(--font-lora), serif",
-          fontSize: "0.85rem",
-          color: "#6b7280",
-          lineHeight: 1.5,
-          marginBottom: "1rem",
-        }}
-      >
-        {item.issuer}
-      </p>
-      
-      <div style={{
-        fontFamily: "var(--font-jetbrains), monospace",
-        fontSize: "0.55rem",
-        color: "#4a5060",
-        letterSpacing: "0.12em",
-        textTransform: "uppercase",
-        marginTop: "auto"
-      }}>
-        ID: {item.credentialId}
+        <h3
+          style={{
+            fontFamily: "var(--font-bebas), sans-serif",
+            fontSize: "1.25rem",
+            letterSpacing: "0.04em",
+            color: "#e2e4e9",
+            lineHeight: 1.3,
+            marginBottom: "0.5rem",
+          }}
+        >
+          {item.name}
+        </h3>
+
+        <p
+          style={{
+            fontFamily: "var(--font-jetbrains), monospace",
+            fontSize: "0.78rem",
+            color: "#6b7280",
+            lineHeight: 1.5,
+            marginBottom: "1.25rem",
+          }}
+        >
+          {item.issuer}
+        </p>
+
+        <div
+          style={{
+            marginTop: "auto",
+            paddingTop: "1rem",
+            borderTop: "1px solid rgba(255,255,255,0.04)",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <div
+            style={{
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              background: "#c8a96e",
+              opacity: 0.4,
+              flexShrink: 0,
+            }}
+          />
+          <span
+            style={{
+              fontFamily: "var(--font-jetbrains), monospace",
+              fontSize: "0.55rem",
+              color: "#4a5060",
+              letterSpacing: "0.08em",
+            }}
+          >
+            {item.credentialId}
+          </span>
+        </div>
      </div>
    </div>
  );
@@ -179,7 +231,6 @@ export default function Education({ education, certificates }: EducationProps) {
        <div style={{ marginBottom: "4rem" }}>
          <div className="section-label" style={{ marginBottom: "0.75rem" }}>Academic Background</div>
          <h2
-            className="font-display"
            style={{
              fontFamily: "var(--font-bebas), sans-serif",
              fontSize: "clamp(2.5rem, 6vw, 5rem)",
@@ -188,7 +239,7 @@ export default function Education({ education, certificates }: EducationProps) {
              lineHeight: 1,
            }}
          >
-            Education
+            Education &amp; Certificates
          </h2>
          <div style={{ width: "48px", height: "1px", background: "#c8a96e", marginTop: "1rem" }} />
        </div>
@@ -210,37 +261,35 @@ export default function Education({ education, certificates }: EducationProps) {
        </div>

        {certificates && certificates.length > 0 && (
-          <div style={{ marginTop: "6rem" }}>
-            <div style={{ marginBottom: "3rem" }}>
-              <div className="section-label" style={{ marginBottom: "0.75rem" }}>Licenses & Certifications</div>
-              <h3
-                className="font-display"
+          <div style={{ marginTop: "4rem" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "2rem" }}>
+              <div
                style={{
-                  fontFamily: "var(--font-bebas), sans-serif",
-                  fontSize: "clamp(2rem, 4vw, 3.5rem)",
-                  letterSpacing: "0.04em",
-                  color: "#e2e4e9",
-                  lineHeight: 1,
+                  fontFamily: "var(--font-jetbrains), monospace",
+                  fontSize: "0.62rem",
+                  letterSpacing: "0.22em",
+                  textTransform: "uppercase",
+                  color: "#c8a96e",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.6rem",
                }}
              >
-                Certificates
-              </h3>
-              <div style={{ width: "32px", height: "1px", background: "#c8a96e", marginTop: "1rem" }} />
+                <span style={{ display: "inline-block", width: "20px", height: "1px", background: "#c8a96e" }} />
+                Licenses &amp; Certifications
+              </div>
+              <div style={{ flex: 1, height: "1px", background: "#1c1f26" }} />
            </div>
-            
+
            <div
              style={{
                display: "grid",
-                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 340px), 1fr))",
-                gap: "1px",
-                background: "#1c1f26",
-                border: "1px solid #1c1f26",
+                gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 420px), 1fr))",
+                gap: "1.25rem",
              }}
            >
-              {certificates.map((cert) => (
-                <div key={cert.name} style={{ background: "#07080a", display: "flex" }}>
-                  <CertCard item={cert} />
-                </div>
+              {certificates.map((cert, i) => (
+                <CertCard key={cert.credentialId} item={cert} index={i} />
              ))}
            </div>
          </div>