Skip to content

Latest commit

 

History

History
64 lines (51 loc) · 3.36 KB

File metadata and controls

64 lines (51 loc) · 3.36 KB

DavidHE Portfolio - Premium Dark Edition 🌑✨

A modern, high-performance, and aesthetically stunning portfolio website. Recently overhauled with a Full Dark Theme and a Bento Grid design philosophy, showcasing expertise in Full-stack Development, AI Tools, and Digital Content Creation.

🚀 Major Updates (March 2026)

🎨 Premium UI/UX Redesign

  • Full Dark Mode Default: The entire site now features a deep #000 black background for a sleek, professional look.
  • Floating Pill Nav Bar: A modern, glassmorphism-inspired navigation bar with button-style links.
  • Bento Grid Skills: Technical proficiency section redesigned into a clean, interactive Bento Grid with neon-glow pill tags.
  • SVG Iconography: Replaced traditional icons with professional, minimalist SVG icons across the site.
  • Online CV System: A dedicated, print-optimized HTML CV (cv.html) specifically designed for a Project Manager profile, allowing instant "Save as PDF" functionality with a professional layout.

💼 Advanced Work & Case Studies

  • Interactive Project Cards: Projects now feature a landscape-dapper design with hover-to-slide effects.
  • Rich Case Study Modals: Clicking a project opens a wide, immersive modal providing detailed insights, followed by a direct Live Demo link.
  • Featured Projects:
    • Cờ Tướng GenZ: A modern take on Chinese Chess (React/Next.js).
    • IELTS Pro: Comprehensive learning platform (Next.js/Tailwind).
    • Ice Tea: Elegant digital tea culture experience (Vite/React).
    • Game Vui Dòng Tiền VN: Financial education game (Phaser/JS).

✍️ Intelligent Blog System

  • Dark Grid Layout: Articles are presented in a balanced 3-column grid with premium typography.
  • Featured Content:
    • "Zero to One" by Peter Thiel: A deep dive into breakthrough innovation.
    • "Don't Blame Technology": Analysis of customer-driven business disruption.
  • Enhanced Reading Experience: Ultra-wide modals with large typography and optimized line-spacing for focused reading.

✨ Technical Highlights

  • Backend: Flask (Python 3.12)
  • Frontend: Modern CSS3 (Custom Variables, Flexbox, CSS Grid), Vanilla JS, Enhanced Animations.
  • Compatibility: Fully optimized for GitHub Pages (Root index.html) while maintaining Localhost functionality via custom Flask template configuration.
  • Performance: Lazy-loading images, optimized SVG assets, and efficient layout rendering.

📁 Project Structure

.
├── app.py                 # Flask server with root template config
├── index.html             # Main entry (GitHub Pages compatible)
├── static/
│   ├── css/
│   │   └── style.css      # Premium Dark Theme Styles
│   ├── js/
│   │   └── enhanced.js    # Modal & Interaction Logic
│   └── assets/            # Optimized images & Project thumbnails
├── templates/             # Sub-pages (404, Blog archive, etc.)
└── README.md              # Project documentation

🛠️ Installation (Local)

  1. Prerequisites: Python 3.12+
  2. Install Dependencies: pip install -r requirements.txt
  3. Run Server: python app.py
  4. Access: http://localhost:5000

Crafted with ❤️ by DavidHE