Creating a Voiceover Portfolio Website Using Toolips.jl in Julia
Written on
Chapter 1: Introduction
In this tutorial, I will demonstrate how to build an audio portfolio website for a friend using Toolips.jl, a versatile web-development framework for Julia. The Toolips module has significantly evolved since its initial release, and the latest version, 0.2, has introduced numerous enhancements. These include the ability to create compiled applications and mobile apps, along with major core updates and an extension for Toolips defaults. If you're unfamiliar with Toolips, you can explore the project on GitHub:
One of my friends specializes in voice work and requires a better platform to showcase his talents. Currently, his website leaves much to be desired, which presents a perfect opportunity for me to utilize Toolips and enhance his online presence.
Project Setup
To begin, we need to create a new Toolips project. As expected, I’ll be using the new_webapp method to ensure we’re developing a web application. I'll opt for Toolips Unstable version 0.2.0, so this modification will occur after initializing the project.
using Toolips
Toolips.new_webapp("KevinsVoice")
After setting up the project, we will adjust the environment:
pkg> rm Toolips
Creating the Main Application
The next step involves developing a method to generate new audio sections for the website.
module KevinsVoice
using Toolips
using ToolipsSession
using ToolipsDefaults
function new_audiosection(c::Connection, md::String, audiosrc::String)
# Logic to create a new audio section
end
The home function serves as the default route for your server.
function home(c::Connection)
write!(c, p("helloworld", text = "hello world!"))
end
This function will handle the homepage layout and will include audio sections composed of markdown and audio elements.
function new_audiosection(name::String, c::Connection, md::String, audiosrc::String)
# Implementation details
end
We will also route the audio files to be accessible through the server.
Chapter 2: Enhancements and Features
To improve the user interface, I'll create a header section with the website's name and additional markdown content. This will provide better organization and aesthetics.
function home(c::Connection)
styles::Component{:sheet} = stylesheet("kevinsvoice")
write!(c, styles)
bod = body("main")
header_div = div("header", align = "center")
get_voiceb = button("getvoiceb", text = "get my voice!")
push!(header_div, h("mainheading", 1, text = "Kevin's Voice"), get_voiceb)
# Additional content
end
Next, we will create a request section for clients to inquire about vocal work.
reqv_div = div("requestv", open = false)
style!(reqv_div, "z-index" => "2", "text-align" => "center", "position" => "fixed", "top" => -20percent, "height" => 20percent, "transition" => ".5s", "margin-left" => 40percent, "width" => 20percent)
We will also implement functionality for the button to reveal the request section.
on(c, get_voiceb, "click") do cm::ComponentModifier
style!(cm, reqv_div, "top" => 50percent)
end
This video demonstrates the simplicity of creating a website with Julia in less than a minute.
This video introduces beginners to their first Julia code, perfect for anyone who feels hesitant to start.
Concluding Thoughts
Now that the primary features for user interaction have been established, the next steps will involve implementing file uploads and management. This will utilize ToolipsRemote along with ToolipsUploader to facilitate user submissions directly through the website.
For those interested in trying out Toolips for themselves, I've created a repository on GitHub:
If you're looking for a similar website, I offer this as a service through my GitHub sponsors. This not only provides you with a functional site but also supports my ongoing projects.
Thank you for following along, and happy coding! Stay tuned for part two coming soon!