Kjera

Welcome to Kjera, a versatile template designed to seamlessly embed 3D objects and molecules into your presentations. Kjera leverages the capabilities of modern web technologies to create interactive and engaging presentations. To make the most out of the Kjera template, users should have a basic understanding of HTML and JavaScript which enables you to customize your presentations and integrate 3D models effectively.

Key Features

• Modern Web Standards and Libraries
• Interactive Elements
• Smooth Presentation Delivery
• 3D Molecular Rendering
• 3D Object Rendering
• Mathematical Expressions
• Dynamic Content Loading via GitHub API

Usage

Follow the steps below to use this template:

1. Click the "Use this template" button to create a new repository on GitHub
2. Set up the new GitHub repository name, description and visibility
3. Clone the new repository to your local machine
4. Check the example slides for demonstration and further customization

The example slides is also hosted HERE for preview.

Adding New Slides

Under the slide_container, each section stands for a slide. Set the data-state attribute for further callback customization.

<!--Template page-->
<section data-state="slide_id">
    <p class="slide-title">Template Slide for Demonstration</p>
    <div class="box_style_rightbound">
        <p class="slide_item_style1">Context 1</p>
        <p class="slide_item_style1">Context 2</p>
        <p class="slide_item_style1">Context 3</p>
    </div>
</section>

Positioning Text Boxes

Check the style.css for the pre-defined box types (class name start with "box_style_").

To defined a new box type, add the following code to the style sheet.

.box_style_custom{
    position: absolute;
    inset: 50% 60% 10% 10% !important; /* manually set the borders */
    padding: 10px !important;
    font-size: 20px;
    text-align: center;
}

Slide-Specific Callback Function

Reveal.addEventListener( 'slidechanged', function( event ) {
    if (event.currentSlide && event.currentSlide.getAttribute('data-state') == "slide_id") {  // Replace here the slide data-state
        // Your code here
    }
});

Kind Recommendations

• Use a smart IDE or AI copilot to help you write the code and focus on writing the content
• Use a local server to preview your slides
• Different screen resolutions may affect the layout, might need to zoom in/out to adjust the layout

Readmap

1. Support more 3D object file types
2. Animation of molecular dynamics trajectories

If you have more awesome ideas, please let me know by creating an issue.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Without the following libraries, this project would not be possible:
Reveal.js: Presentation framework
Three.js: 3D object rendering
3Dmol.js: 3D molecule rendering
MathJax: LaTeX rendering
jQuery: DOM element manipulation