Traditional personal website

[figoyouwei]

Hi,

I wonder, if I could use Taipy to build simple traditional website like this: https://dalum.vercel.app/

Is it doable? Can you help me layout some skeleton?

[AlexandreSajus]

While it is doable in Taipy, Taipy is not made for that use case and needs a lot of HTML and CSS to style an application properly for that use case.

Here is a simple example that mimics your website (without links, images, and styling):

from taipy.gui import Gui
import taipy.gui.builder as tgb

with tgb.Page() as page:
    with tgb.layout(columns="2 8"):
        with tgb.part("sidebar"):
            tgb.html("h2", "Richard Hendricks")
            tgb.html("p", "Founder of Pied Piper")
        with tgb.part():
            tgb.navbar()
            tgb.html("h2", "About Me")
            tgb.html(
                "p",
                "I'm Richard Hendricks, the CEO and founder of Pied Piper. Originally from Tulsa, Oklahoma, I moved to Silicon Valley to pursue my dream of making a significant impact on the tech industry. My passion lies in creating and developing revolutionary technologies.",
            )
            tgb.html(
                "p",
                "My life's work is dedicated to revolutionizing the world of data compression with Pied Piper's Middle-Out technology. Our aim is to make data storage and transfer more efficient than ever before, thereby improving the technology landscape as a whole. I have had the privilege to lead a team of brilliant minds and together, we've brought Pied Piper to the forefront of innovation.",
            )
            tgb.html("h3", "What I'm doing")
            with tgb.layout(columns="1 1"):
                with tgb.part("card"):
                    tgb.html("h4", "Leading Pied Piper")
                    tgb.html(
                        "p",
                        "I steer the ship of Pied Piper towards creating and implementing game-changing technology.",
                    )
                with tgb.part("card"):
                    tgb.html("h4", "Innovative Tech Development")
                    tgb.html(
                        "p",
                        "Leading the creation of disruptive technology, including the Middle-Out compression algorithm.",
                    )
            tgb.html("br")
            with tgb.layout(columns="1 1"):
                with tgb.part("card"):
                    tgb.html("h4", "Strategic Planning")
                    tgb.html(
                        "p",
                        "Planning and executing strategies to bring Pied Piper's technology to the market.",
                    )
                with tgb.part("card"):
                    tgb.html("h4", "Team Building")
                    tgb.html(
                        "p",
                        "Cultivating a creative and productive work environment to foster innovation and drive growth.",
                    )
            tgb.html("h3", "Testimonials")
            with tgb.layout(columns="1 1"):
                with tgb.part("card"):
                    tgb.html("h4", "Jared Dunn")
                    tgb.html(
                        "p",
                        "Richard's vision for Pied Piper was simply astounding. His meticulous attention to detail...",
                    )
                with tgb.part("card"):
                    tgb.html("h4", "Bertram Gilfoyle")
                    tgb.html(
                        "p",
                        "Despite our disagreements, I have to admit, Richard knew how to build something out of...",
                    )
            tgb.html("h3", "Clients")

root_page = page
page_1 = ""
page_2 = ""
page_3 = ""

pages = {"/": root_page, "about": page_1, "resume": page_2, "portfolio": page_3}

if __name__ == "__main__":
    Gui(pages=pages).run()

[figoyouwei]

Thank you for this effort very much, I will post questions under this, but it is already very good.

[figoyouwei]

Please have a look at your sidebar with navbar code https://github.com/figoyouwei/taipy_success/blob/main/profiler/app.py

Currently, the content of nav page will display below the root, not aligned with root. Please work on further today, thanks.

[AlexandreSajus]

Hey! I think the simplest way to solve this issue is by replicating the sidebar content across all pages:

from taipy.gui import Gui
import taipy.gui.builder as tgb

def sidebar():
    tgb.html("h2", "Richard Hendricks")
    tgb.html("p", "Founder of Pied Piper")

root_page = ""

with tgb.Page() as page_1:
    with tgb.layout(columns="2 8"):
        with tgb.part("sidebar"):
            sidebar()
        with tgb.part():
            tgb.navbar()
            tgb.html("h1", "About")
            tgb.html("p", "This is the about page.")

with tgb.Page() as page_2:
    with tgb.layout(columns="2 8"):
        with tgb.part("sidebar"):
            sidebar()
        with tgb.part():
            tgb.navbar()
            tgb.html("h1", "Resume")
            tgb.html("p", "This is the resume page.")

with tgb.Page() as page_3:
    with tgb.layout(columns="2 8"):
        with tgb.part("sidebar"):
            sidebar()
        with tgb.part():
            tgb.navbar()
            tgb.html("h1", "Portfolio")
            tgb.html("p", "This is the portfolio page.")

pages = {
    "/": root_page,
    "about": page_1,
    "resume": page_2,
    "portfolio": page_3,
}

if __name__ == "__main__":
    Gui(pages=pages).run()

[figoyouwei]

Thanks, it already helps a lot.