Converting knowledge into interactive presentation pages

clue

# Document Analysis and Visualization for Web Portfolio Generation




## Content requirements
- Maintain the core information of the original document, but present it in a more readable, visual way
- Add an author information area at the bottom of the page containing:
- **Author's name**: [author's name]
- **Social Media Links**: include at least Twitter/X
- **Copyright information and year**

## Design Style
- Overall style references **Linear App**'s minimalist modern design
- Use a clear visual hierarchy to highlight important content
- The color scheme should be **professional, harmonious, and suitable for long time reading**

## Technical Specifications
- Use **HTML5, TailwindCSS 3.0+ (introduced via CDN)** and necessary JavaScript
- Implement **complete dark/light color mode switching**, default follows system settings
- Clearly structured code with appropriate comments for easy understanding and maintenance.

## Responsive design
- The page must be perfectly displayed on **all devices (cell phone, tablet, desktop)
- Optimize **layout and font size** for different screen sizes
- Ensure **good touch experience on **mobile

## Media Resources
- Use **Markdown image links in documents** (if available)
- Use **Video embed code** from documentation (if available)

## Icons and Visual Elements
- Use specialized icon libraries such as **Font Awesome or Material Icons (brought in through CDN)**
- Choose appropriate **illustrations or charts** for the content topic Showcase data
- Avoid using **emoji** as main icons

## Interactive experience
- Add appropriate **microinteraction effects** to enhance user experience:
- **Button hover** with slight zoom and color change
- **Card element hover** with subtle shadow and border effects
- **Smooth transitions on page scrolling
- Elegant fade-in animation when content blocks are loaded.

## Performance Optimization
- Ensure that **pages load quickly and avoid unnecessarily large resources**.
- **Implement lazy loading** techniques for long page content

## Output requirements
- **Provide a single HTML file **that is fully working, containing all necessary CSS and JavaScript
- Ensure that **the code is W3C compliant with no error warnings**
- **Pages maintain consistent appearance and functionality across different browsers**

### Generation Requirements:
Depending on the type of content of the uploaded file (document, data, image, etc.), please create **a visualization of the page that is best suited to display that content**.

Instructions for use

utilization Claude Sonnet

Be careful not to exceed the context window