Funeral Invitation Static Site A static website for creating and sending funeral invitations for Papa Ngassi, built by Dylane Kuo Piebeng, a fullstack React and Python developer. Features
Customizable Invitations: Users can input recipient name, date, time, location, and select from 10 invitation templates. Email Sending: Sends invitations via EmailJS (service_2qw2t6i, template_edvuvcb, public key NQTh2lrYXrapks783). Dynamic Preview: Displays a live preview of the invitation as users fill out the form. PDF Download: Generates a styled PDF invitation using jsPDF, including a candle image. Responsive Design: Built with Tailwind CSS and custom styles.css for mobile, tablet, and desktop compatibility. Accessibility: Includes ARIA labels and validation for form inputs. Candle Image: Features a real candle image (assets/candle.jpg) with a flicker animation.
Structure
index.html: Main page with form, preview, and template display. styles.css: Custom styles for invitation cards, candle animation, and responsive design. script.js: Handles form submission, EmailJS integration, PDF generation, and 3D animations. assets/: Contains candle.jpg for the candle image.
Setup
Clone the Repository:git clone cd funeral-invitation
Add Candle Image: Download the candle image from https://images.unsplash.com/photo-1601933973783-43cf8a7d649c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60. Save it as assets/candle.jpg.
Host the Site: Use a static hosting service like Netlify, Vercel, or GitHub Pages. Ensure index.html, styles.css, script.js, and assets/ are in the root directory.
EmailJS Configuration: Log in to EmailJS. Verify that service_2qw2t6i and template_edvuvcb are set up with fields: recipient_name, phone_number, email_address, invitation_content. Use public key NQTh2lrYXrapks783 in script.js.
Testing
Form Submission: Fill out the form with valid data and check the console (F12 > Console) for success/error messages. Email Delivery: Verify emails are received (check spam folder). PDF Download: Click "Télécharger" to generate a PDF with the invitation and candle image. Responsive Design: Test on mobile, tablet, and desktop. Preview: Ensure the invitation preview updates dynamically in #preview.
Dependencies
Tailwind CSS: For responsive design (CDN in index.html). EmailJS: For email sending (CDN in index.html). jsPDF: For PDF generation (CDN in index.html). Merriweather Font: For typography (Google Fonts CDN).
Author Dylane Kuo Piebeng, Fullstack React and Python Developer License © 2025 Famille Mo'o Lekong — All rights reserved.