Yesterday, I came up with the idea to build a personal website for my sister's birthday. Because her birthday is today, I, being the nice sister I am, woke up early to cram in a few hours of work into the project I named after her:

Anabel Personal Website Template

It's built on purple because she loves purple.

The website is built on TailwindCSS. The template colors and fonts can easily be changed from the variables in the src/before.css file:

:root {

    /* Display & Body */
    --font-display: "Baloo Paaji 2";
    --font-body: "Lato";
    --color-display: theme(colors.gray.700);  /* color of display fonts */
    --color-body: theme(colors.purple.100);  /* body background color */

    ...etc.
}

Usage

It's very easy to work with. After downloading the repository, cd to the root folder and run:

npm install
npm start

Hot module replacement begins. Edit any of the files within src/, then navigate to http://localhost:1234 to view the result.s

(The repository also contains a build within the dist/ folder. Just load the compiled dist/before.css file into any webpage you'd like.)

Card Components

The template contains two basic types of card components:

The first is a card-within-the-card style component, best used for the Employment History and Education sections of a resume.

The second is a list style component, best used for card categories like Skills, Hobbies, Languages, etc.

Conclusion

This project was fun to build, and I enjoyed it (almost!) every step of the way. Next, I plan to create a Routify (Svelte) template based on Anabel to make creating a multi-page Anabel website easier.

That's it for today! I hope you enjoyed reading this post as much as I enjoyed creating Anabel. Leave comments below to let me know what you think, or alert me to any errors in the code. ;)