build update

Author: wem2017

package.json

@@ -18,7 +18,6 @@
     "clsx": "^2.1.0",
     "fast-glob": "^3.2.11",
     "feed": "^4.2.2",
-    "html2pdf.js": "^0.13.0",
     "next": "^14.0.4",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",

src/app/contact/page.jsx

@@ -5,6 +5,7 @@ import {
   PhoneIcon,
   LocationIcon,
   TelegramIcon,
+  FacebookMessengerIcon,
 } from '@/components/SocialIcons'
 import { SimpleLayout } from '@/components/SimpleLayout'
 import { personal } from '@/data/personal'
@@ -99,6 +100,13 @@ export default function Contact() {
           href={personal.social.telegram.url}
           external
         />
+        <ContactCard
+          icon={FacebookMessengerIcon}
+          label="Messenger"
+          value="Chat with me"
+          href={personal.social.messenger.url}
+          external
+        />
         <ContactCard
           icon={LocationIcon}
           label="Location"

src/app/resume/page.jsx

@@ -23,7 +23,7 @@ export const metadata = {
 export default function Resume() {
   return (
     <Container className="mt-16 sm:mt-32">
-      <div className="mb-6 flex items-end justify-end gap-4">
+      <div className="mb-6 flex items-end justify-end gap-4 print:hidden">
         <div className="flex-shrink-0">
           <DownloadPdfButton />
         </div>

src/components/DownloadPdfButton.jsx

@@ -1,44 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-
 export function DownloadPdfButton() {
-  const [isGenerating, setIsGenerating] = useState(false)
-
-  const handleDownload = async () => {
-    setIsGenerating(true)
-    try {
-      // Dynamically import html2pdf to avoid SSR issues
-      const html2pdf = (await import('html2pdf.js')).default
-
-      const element = document.getElementById('resume-content')
-
-      const opt = {
-        margin: [0.5, 0.5, 0.5, 0.5],
-        filename: 'Wem_Senior_Software_Engineer_Resume.pdf',
-        image: { type: 'jpeg', quality: 1 },
-        jsPDF: {
-          unit: 'in',
-          format: 'letter',
-          orientation: 'portrait',
-        },
-        pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
-      }
-
-      await html2pdf().set(opt).from(element).save()
-    } catch (error) {
-      console.error('Error generating PDF:', error)
-      alert('Failed to generate PDF. Please try again.')
-    } finally {
-      setIsGenerating(false)
-    }
+  const handleDownload = () => {
+    // Use the browser's native print dialog which produces pixel-perfect PDF
+    // The @media print styles in tailwind.css handle the layout
+    window.print()
   }
 
   return (
     <button
       onClick={handleDownload}
-      disabled={isGenerating}
-      className="group inline-flex items-center gap-2 rounded-full bg-zinc-800 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-zinc-800/5 transition hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-zinc-700 dark:hover:bg-zinc-600"
+      className="print:hidden group inline-flex items-center gap-2 rounded-full bg-zinc-800 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-zinc-800/5 transition hover:bg-zinc-700 dark:bg-zinc-700 dark:hover:bg-zinc-600"
     >
       <svg
         viewBox="0 0 24 24"
@@ -53,7 +25,7 @@ export function DownloadPdfButton() {
           stroke="currentColor"
         />
       </svg>
-      {isGenerating ? 'Generating PDF...' : 'Download PDF'}
+      Download PDF
     </button>
   )
 }

src/components/SocialIcons.jsx

@@ -76,3 +76,11 @@ export function TelegramIcon(props) {
     </svg>
   )
 }
+
+export function FacebookMessengerIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+      <path d="M12 2C6.36 2 2 6.13 2 11.7c0 2.91 1.2 5.42 3.15 7.18.16.15.26.36.27.58l.05 1.82c.02.63.66 1.04 1.24.79l2.03-.8c.17-.07.36-.09.55-.05.93.26 1.93.4 2.96.4 5.64 0 10.25-4.13 10.25-9.7S17.64 2 12 2zm6.12 7.55l-3 4.63c-.47.73-1.46.91-2.15.38l-2.38-1.79a.6.6 0 00-.72 0l-3.21 2.44c-.43.33-.99-.22-.7-.68l3-4.63c.47-.73 1.46-.91 2.15-.38l2.38 1.79a.6.6 0 00.72 0l3.21-2.44c.43-.33.99.22.7.68z" />
+    </svg>
+  )
+}

src/data/personal.js

@@ -28,12 +28,16 @@ export const personal = {
       url: 'https://t.me/huynhdeveloper',
       label: 'Follow on Telegram',
     },
+    messenger: {
+      url: 'https://m.me/huynhdung18041993',
+      label: 'Message on Messenger',
+    },
   },
 
   contact: {
     title: 'Contact me.',
     intro:
-      "Feel free to contact me via LinkedIn, Telegtam, or email. I'll respond when free time. If you have an interesting project or collaboration opportunity, I'd love to hear from you.",
+      "Feel free to contact me via LinkedIn, Telegram, Messenger, or email. I'll respond when free time. If you have an interesting project or collaboration opportunity, I'd love to hear from you.",
   },
 
   copyright: {

src/styles/tailwind.css

@@ -2,3 +2,151 @@
 @import 'tailwindcss/components';
 @import './prism.css';
 @import 'tailwindcss/utilities';
+
+@media print {
+  /* Force light mode colors for print */
+  html {
+    color-scheme: light !important;
+  }
+
+  body {
+    background: white !important;
+    color: black !important;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Remove dark mode backgrounds */
+  .dark\:bg-black,
+  .dark\:bg-zinc-900,
+  .dark\:bg-zinc-800 {
+    background-color: transparent !important;
+  }
+
+  /* Hide non-resume elements */
+  header,
+  footer,
+  nav {
+    display: none !important;
+  }
+
+  /* Hide the fixed background decoration */
+  .fixed.inset-0 {
+    display: none !important;
+  }
+
+  /* Remove top margin for print */
+  .mt-16.sm\:mt-32,
+  .mt-16 {
+    margin-top: 0 !important;
+  }
+
+  /* Reset container max-width for print to use full page */
+  #resume-content {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Ensure proper bullet point rendering */
+  ul.list-disc,
+  .list-disc {
+    list-style-type: disc !important;
+    padding-left: 1.5em !important;
+  }
+
+  ul.list-inside,
+  .list-inside {
+    list-style-position: inside !important;
+  }
+
+  .list-disc li {
+    display: list-item !important;
+    list-style-type: disc !important;
+  }
+
+  .list-disc li::marker {
+    font-size: inherit !important;
+    color: inherit !important;
+  }
+
+  /* Ensure borders are visible */
+  .border,
+  .border-zinc-200,
+  .border-b-2,
+  .divide-y > * + * {
+    border-color: #e4e4e7 !important;
+  }
+
+  /* Force text colors for print */
+  .text-zinc-900,
+  .dark\:text-zinc-100 {
+    color: #18181b !important;
+  }
+
+  .text-zinc-700,
+  .dark\:text-zinc-300 {
+    color: #3f3f46 !important;
+  }
+
+  .text-zinc-600,
+  .dark\:text-zinc-400 {
+    color: #52525b !important;
+  }
+
+  .text-zinc-500 {
+    color: #71717a !important;
+  }
+
+  .text-blue-500,
+  .dark\:text-blue-400 {
+    color: #3b82f6 !important;
+  }
+
+  /* Ensure backgrounds for skill badges */
+  .bg-zinc-100,
+  .dark\:bg-zinc-800 {
+    background-color: #f4f4f5 !important;
+  }
+
+  /* Shadows for logo containers */
+  .shadow-md {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
+  }
+
+  /* Ring borders for logo containers */
+  .ring-1.ring-zinc-900\/5 {
+    box-shadow: 0 0 0 1px rgb(24 24 27 / 0.05) !important;
+  }
+
+  /* SVG icon fills for print */
+  .fill-zinc-500,
+  .dark\:fill-zinc-400 {
+    fill: #71717a !important;
+  }
+
+  .stroke-zinc-400,
+  .dark\:stroke-zinc-500 {
+    stroke: #a1a1aa !important;
+  }
+
+  /* Page break control */
+  section {
+    break-inside: avoid;
+  }
+
+  li {
+    break-inside: avoid;
+  }
+
+  h2 {
+    break-after: avoid;
+  }
+
+  /* Print page settings */
+  @page {
+    size: letter;
+    margin: 0.5in;
+  }
+}
+