A cute, 3D claymorphic, mobile-first web application designed to help you craft, evaluate, and execute your personal development plan (PDP). Packed with soft cloudy visuals, 3D animated emojis, motivational pop-ups, custom pastel theme switching, and local storage support.
- Personal Bio & Intro: Add your personal background, introduction, and a motivational quote snippet.
- Mission & Values: Define your core purpose and personal guiding values.
- SWOT Analysis: Interactive grid for Strengths, Weaknesses, Opportunities, and Threats.
- SMART Goal Setter: Segment your goals into customizable timeframes:
- Short-Term Goals (e.g., 1–6 Months)
- Mid-Term Goals (e.g., 1–2 Years)
- Long-Term Goals (e.g., 3–5+ Years)
- M&E Key Indicators: Define qualitative and quantitative metrics to test and validate your plan.
- Progress Reflection Logs: Record periodic check-ins, achievements, roadblocks, and plan adjustments.
- Review Schedule: Set target evaluation frequencies (Weekly, Monthly, Quarterly).
- Strategic Steps: Detailed action pathways mapped directly to your primary SMART goals.
- Portfolio Hub: Manage and organize your active and completed:
- 🚀 Projects
- 📜 Certifications
- ✍️ Exams & Tests
- Task Tracker: Itemized action steps with due date tracking and priority badges.
- Visual Progress Bars: Real-time percentage completion calculation (
0%–100%). - Interactive Status Toggles: Mark items as Not Started, In Progress, or Completed.
- 💡 Daily Spark Pop-up: Opening the app triggers a daily pop-up featuring:
- Thought of the Day
- Health Idea
- Word of the Day
- Happiness Thought
- 📝 Private Scratchpad: A dedicated, hidden space underneath your dashboard for quick personal notes and brainstorming.
- 📄 PDF Export & Share: Export your formatted PDP as a clean, multi-page PDF document or trigger native device sharing.
- 🔔 Local Notification Reminders: Schedule browser-based push notifications for goal deadlines and habit check-ins.
- 🎨 Theme & Aesthetic Customization:
- Soft Cloudy & Claymorphic 3D UI elements (card elevation, soft inner shadows, floating animations).
- 3D Animated Emojis throughout the interface (no sound FX).
- Light Mode (Default) & Dark Mode toggle.
- Theme Palette Selector: Cotton Candy 🍬, Sky Cloud ☁️, Fresh Mint 🌿, Honey Sunshine 🍯, and Sweet Berry 🍓.
- Custom font stack featuring Samsung Sharp Sans with fallback options.
- Frontend: HTML5, CSS3 (Custom 3D Claymorphism & CSS Variables), JavaScript (ES6+)
- Typography: Samsung Sharp Sans / Plus Jakarta Sans / Outfit
- PDF Engine: html2pdf.js (client-side rendering)
- Storage: Browser
localStorageAPI (Zero backend setup required) - Notifications: Native Web Notifications API
- Clone or download this repository:
git clone [https://github.com/your-username/pdp-craft.git](https://github.com/your-username/pdp-craft.git)
2. Navigate into the project directory:
```bash
cd pdp-craft
- Open
index.htmlin your web browser or open it on a mobile device.
- Open the project folder in VS Code.
- Install the Live Server extension.
- Click "Go Live" at the bottom right corner of VS Code to launch with hot-reloading.
pdp-craft/
├── assets/
│ ├── images/ # 3D emoji graphics and cloud assets
│ └── fonts/ # Custom Samsung Sharp Sans font files
├── css/
│ ├── claymorphism.css # 3D shadows, soft cloud aesthetics, and themes
│ └── style.css # Core layout, mobile grid, and typography
├── js/
│ ├── app.js # Core app logic, tab navigation, local storage
│ ├── daily-spark.js # Thought/Health/Word pop-up generator
│ └── pdf-export.js # Document layout & html2pdf initialization
├── index.html # Single-page mobile-first application layout
├── README.md # Project documentation
└── LICENSE # MIT License
- Push your repository to GitHub.
- Navigate to your repository Settings tab.
- Scroll down to Pages (under Code and automation).
- Select
mainbranch as the Source and/ (root)folder. - Click Save. Your site will be live at
https://your-username.github.io/pdp-craft/in a few minutes!
To use PDP Craft like a native mobile app:
- Open your deployed URL in Safari (iOS) or Chrome (Android).
- Tap the Share / Menu icon.
- Tap "Add to Home Screen".
Distributed under the MIT License. See LICENSE for details.
