How to Build a Personal Website for Composers with Astro, Tailwind CSS, and $0 running costs

As a composer writing music for media, having a personal website is an essential tool for promoting your work and connecting with potential collaborators in the industry. Whether you are just starting out or are an experienced composer looking to update your online presence, a well-designed website can serve as an online portfolio that showcases your skills, experience, and unique voice as an artist. By coding the website yourself, you have the opportunity to fully customize the design and functionality of your online presence, creating a unique and personalized experience for your visitors while potentially saving costs.

In this blog post, we will take a look at the process of building a composer website from scratch, specifically geared towards media professionals such as music supervisors, directors, and producers. We will cover everything from designing and organizing the site, to adding content and features, and launching the website.

Whether you are a composer writing for film, television, or video games, this guide will provide valuable insights and tips for creating a professional, effective, and engaging composer website that showcases your work and helps you connect with potential collaborators and opportunities in the media industry.

Personal Requirements

Initially, I had a rough idea of what the website should look/feel like and what pages/sections it should have. I had some technical requirements as well:

• Design/Feel: minimalistic, modern, serious
• Colors: white, black, red (as primary/accent color)
• Pages: Home, About, Blog, Music, Contact
• Technical requirements:
  • Serverless (Jamstack) – i.e. no personal backend management
  • Static Website (Astro = SSG)
  • No JS to client shipping – i.e. server-side rendering
  • Multi Page App (MPG)
  • Markdown Blog

Tech Stack

This is the tech stack I chose based on the requirements I had.

• Figma — Free UI/UX Design Tool
• Astro v1.6.11 — JS/Web Framework
• Tailwind CSS v3.2.4 — CSS Framework
• Vercel — Platform to deploy
• KwesForms — Contact form handling (backend)

UI Mock-Ups with Figma

It is always a good idea to sketch the UI before even starting to write a line of code. This is where you get to plan out the structure and layout of the site and make design choices that reflect your personal style and branding. I do my designs in Figma. For this project, I went for a not-so-detailed mock-up, because I wanted to experiment with spacing, typography, etc. during coding. Since this is my personal project and I do the design and programming by myself, this is okay. However, for other projects, I would definitely go for a much more detailed design mock-up including mobile version designs, clear spacing, detailed typography, etc.

Next step: coding!

Astro Framework

Astro is an all-in-one web framework for building and generating fast, content-focused multi-page websites.

I’m impressed by the simplicity, performance, and available Astro integrations like Tailwind, Image optimization, SEO, etc. The Astro CLI makes it easy to add them to the project.

With Astro, Markdown rendering works out of the box. Ideal to build scalable content websites. Once the content layout is designed and set up, publishing a new post is as easy as adding a new .md file to the file system. Perfect for composer websites which include portfolios, blog posts, news, etc.

Astro has a server-first approach when it comes to rendering. HTML is rendered on the server. Unused JavaScript is stripped away. If there is still client-side JavaScript necessary (eg. for interactivity, animations, DOM manipulations), one profits from high performance anyway because of Astro’s Island architecture.

The server-first MPA (multiple-page app) architecture makes Astro websites fast: Better performance = better engagement = better SEO ranking.

A detailed description of how to work with Astro would go beyond the scope of this post. So please refer to the excellent Astro documentation for more details.

Designing with Tailwind CSS

Tailwind CSS is a utility-class CSS framework. This means that no CSS has to be written, instead, Tailwind’s thoughtful utility-classes can be used directly in HTML.

Why Tailwind? Tailwind advertises that it is easier to write and maintain CSS using these utility-classes. After designing my first few components with Tailwind, I can confirm that. I wonder how I’ve ever written CSS without it! Not only are there tons of pre-defined classes for building a modern-looking website, but Tailwind CSS is already a design system by itself. It provides you with an expertly-engineered color palette (with each color having a corresponding negative/dark-mode color), a spacing system, and a typography system.

Flowbite has a ton of prebuilt UI components using Tailwind CSS utility-classes, which speeds up the coding process even more.

Spacing

I do my spacing in 8px increments (i.e. base unit of 8px or 8px grid). This means that every space, padding, margin, and sizing (height & width) of elements should be a multiple of 8 (i.e. 8, 16, 24, 32, 40, 48, etc.).

Using 8px increments can help to create a harmonious and balanced layout because it allows to align elements with precision and maintain consistent spacing throughout the design. It can also make it easier to create responsive designs because elements can be resized in 8px increments without affecting the overall layout.

Tailwind includes a comprehensive numeric spacing scale where each spacing unit corresponds to 0.25rem or 4px by default browser settings. So only using Tailwind spacing units dividable by 2 (2, 4, 6, 8) will do the job, while having the advantage of rem units being applied. One of the main advantages of using rem is that it scales based on the root element (usually the html element) of the page, rather than the parent element like em. This means that if you change the font size of the root element, all elements on the page that are specified in rem units will also be resized accordingly. This can be useful for creating responsive designs because it allows you to adjust the size of elements based on the size of the viewport or device.

Color

Color is an important element of branding and personal style, and choosing the right color/colors for the website can have a significant impact on the overall look and feel of the site.

I went for the Tailwind default neutral color palette for the background and text color. The background color is not 100% white, and the text color is not 100% black. Using a fully white background with fully black text can cause eye strain and make the text difficult to read for some people. A slightly off-white or light-gray background with darker gray text can reduce glare and improve readability.

Since wine-red is my personal brand color, I chose Tailwind’s red-900 as the primary color. Since red is a rather intense color, I decided to use it more as an accent color, for hover effects, links, and buttons.

Typography

Typography, like color, serves as a design and branding element, but it also has the important function of making written language legible, readable, and visually appealing when displayed.

For my website, I chose Poppins with its style variations as the typeface. It is a sans-serif typeface with a clean and modern design, fitting my initial branding requirements.

Styling text is pretty forward with Tailwind’s utility classes. The most important ones for me are Font Size, Font Weight, Letter Spacing, and Line Height. Please see the Tailwind documentation for more information.

Styling markdown blog posts is a little bit trickier tho because Tailwind resets all default CSS settings from Astro by default. Accessing the markdown content directly via utility classes isn’t possible, since the markdown is rendered in a placeholder HTLM element <slot/>. Luckily Tailwind provides us with a plugin for such scenarios: @tailwindcss/typography. (This blog post is formatted using the CSS this plugin applies.) Unfortunately, the default settings will result in a not-so-consistent typography styling: the plugin applies different colors to headings, paragraphs, and listings. So one has to change them manually using the prose prefix.

Content and Features

Home

Since this is typically the first thing visitors see, the home page should feature the most important content using a clear and concise layout. The hero section includes a one-liner about me and my work as a composer and a picture. “License Music for Your Next Project” acts here kinda as a CTA and the links lead to my portfolio, where tracks can be licensed. (I’m planning to include an on-site audio player to showcase my favorite work. A SoundCloud or Spotify playlist embedding would also be an option. But for now, this is fine.)

About

A short bio about me and what I do. A bio can help to establish credibility by highlighting former education, experience, and achievements. Furthermore, a bio can differentiate you from other composers by showcasing your unique voice and perspective as an artist.

Blog

Currently, there are non-categorized blog posts sorted by date. In the future, I will include categories like News, Current Projects, Tips, etc.

Social Media

All relevant social media profiles should be linked somewhere on the website. I decided to put them in the footer. So they are visible on every page.

Contact

A contact form provides a professional and convenient way to reach out to somebody. Since I do not manage any backend for this website and am therefore not able to program the send-an-email functionality by myself, I solved the contact form problem by using Kwesforms, a service for managing the contact form business logic (i.e. the backend functionality for sending an email).

Why Kwesforms? It is free to use for up to 100 submissions a month and has a built-in validation functionality.

Press Kit

As a composer, artist, or musician, it is useful to include press material like text, and high-quality pictures that can be used one-to-one by journalists. This can be placed on a dedicated page. For now, it is not necessary for me, but I will definitely include it in the future.

Deploying the Website

Deploying a website on Vercel is a simple and straightforward process. You connect basically a Vercel project to the website’s GitHub repo, and choose how the website should be built i.e. which framework is being used. That’s it. For new commits, the website get’s automatically rebuilt.

Why Vercel? No server management, fast and automatic deployment, global CDN (= fast and responsive for users around the world), free for basic usage.

$0 Running Costs? What’s the Catch?

Coding a website by yourself requires web design and coding/programming skills. This approach is rather time-consuming compared to website builder systems, but allows for full customizability and is totally free.

The hosting on Vercel is free for personal projects and you are relying on a .vercel.app domain. If you wish to add a custom domain to your project (e.g. yourname.com) you need to purchase one. Such personal domains are usually very cheap starting from about $10 per year.

A custom domain incurs running costs of only $10 per year. By comparison, a Webflow website with a custom domain costs $14 per month or $168 per year.

I am using the .vercel.app domain for now, but will buy and add a custom domain soon.

Conclusion

I hope this blog post has provided you with some helpful insights and tips for building your own personal composer website. Whether you’re a seasoned pro or just starting out, I hope you’ll find the information and resources provided here to be useful as you embark on your own journey to create a unique online presence.

I plan to update the website on an incremental basis as needed.