What is Calais?
Calais is a portfolio template intended to be used to showcase your work as a designer or developer.
It is kept minimal so that rather than the website itself, the contents get the attention they deserve. Your blog posts, your designs or side projects, everything that you are proud of.
The page structure
This template comes with a homepage and six other pages covering the main parts of a portfolio:
- The About me page contains some basic content and a work experience including a CV
- A blog posts list page and a sample blog post (you are reading that one right now)
- A page dedicted to your projects and another one that serves as a case study
- A typical contact form page that allows visitors to reach out to you.
Let' have a quick look at the features of each of them.
Home
The homepage is mainly just a starting point for the visitors to explore the other pages and at the same time have a quick overview of you and your work. It will keep recurring visitors updated and delivers quick links to your socials.
The Resume
The About me page is the space that contains the resume. You should your main work experiences visible on that page itself while the rest should land on the downloadable file.
Work
Your work is the most important part of a portfolio website. On this page, you should show off the best of what you have created.
Make sure that you link all of the projects to where it is currently used. However, if you have more background details about the project that you want to share, feel free to use the Case Study template to add more details to it.
Blog
All blog posts are grouped by year. Those titles also serve as the anchor when you want to link to a specific year.
As you can see on this page, a blog post comes with various different elements and all of them have been designed:
- Heading 1 to 4
- Paragraph
- Sorted & Unsorted List
- Images
- Links
- Horizontal line (hr)
- Blockquote
- Bold text
- Code block
Syntax Highlighting
The code block in a blog article is just a simple one that comes with the Tailwind typography plugin. You can exchange this for a proper syntax highlighting like Prism or Highlight.js depending on your needs.
<article class='prose'>
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of
eating garlic bread with cheese to their children, with the food
earning such an iconic status in our culture that kids will often
dress up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may
be linked to a series of rabies cases springing up around the
country.
</p>
<!-- ... -->
</article>Blockquote
A quote like the one below is also part of a typical markdown driven blog post. However, in Calais, this blockquote looks in a way that it can also be used as a note or aside if necessary.
Hey there,
This is actually a blockquote but if you want to, you can also use this as a note. But you do not have to.
Contact Form
The contact form is currently not implemented but we have provided a submit function which will randomly throw an error, so that you can see the error or success messages in action. Go ahead and try click the submit button.