Today, a personal portfolio website is no less than real estate on the internet for developers. It's your digital home address, where people can discover who you are, what you do, how they can contact you, and so much more in between. However, many of us don't have our portfolio websites ready despite their importance because, even with modern vibe coding tools, a clean and straightforward portfolio is much harder to design than expected.
That's why, as part of the Sites templates, Appwrite offers a portfolio template that you can deploy in just a few short steps.
Overview of the portfolio template
The Appwrite portfolio template is a personal portfolio app for developers. Built with Next.js and styled with Tailwind CSS, it features several pages:
Landing page with an about section and project listing
Individual project pages
Contact me page with an email form (currently just logs form data on the console)
Deploy the portfolio template on Appwrite
Firstly, you must head to Appwrite Cloud and create an account if you haven't already (or self-host Appwrite 1.7). Next, create your first project, which will lead you to the project overview page.
Head to the Sites page from the left sidebar, click on the Create site button, and select the Clone a template option. This will take you to the Appwrite Sites templates listing, where you should select Portfolio under the Use case category on the left sidebar. This will show you numerous templates, some developed by our team and some by our partners, from which you must click on the Portfolio template option.
After selecting the template, connect a GitHub repository now (you can do this later, too). Leave the production branch and root directory as is, update the domain name if you want, and click the Deploy button. You can watch the deployment logs as Appwrite builds your site.
After your site has been successfully deployed, Appwrite will show you a Congratulations page. You can view the site by clicking the Visit site button, or view the site configuration (deployments, logs, domains, usage, and settings) by clicking the Go to dashboard button.
Making changes and deploying them to the site
To learn how to make changes in the portfolio site, let's update the contact form action to email you whenever someone submits a message. For this demo, we shall use Resend, a popular API service for sending emails.
First, create an account on Resend, then go to the API Keys tab in the left sidebar to create a new API key. Save this API key for later usage.
Note: While this isn't mandatory for the demo, for production apps, you should add and verify a domain to send emails via Resend.
Next, you must update the environment variables of our Appwrite Site. Head back to your Appwrite project, visit Sites from the left sidebar, and click on your portfolio site. Head to the Settings tab of your site, scroll down to the Environment variables section, and create the following environment variables:
RESEND_API_KEY: The Resend API key you created earlier
EMAIL_ADDRESS: The email address you want to receive contact form messages on
Lastly, clone the repository Appwrite created for your portfolio site. Enter the directory, and install Resend's Node.js library by running the following command:
npm install resend
Then, head to the src/actions/contact.ts file and update it to the following:
'use server'
import { Resend } from "resend"
export const submitContactForm = async (formData: FormData) => {
try {
const rawFormData = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
}
console.log(rawFormData);
const resendApiKey = process.env.RESEND_API_KEY;
const emailAddress = process.env.EMAIL_ADDRESS;
if (!resendApiKey || !emailAddress) {
throw new Error('Missing environment variables for Resend API key or email address');
}
const resend = new Resend(resendApiKey);
await resend.emails.send({
from: 'Acme <onboarding@resend.dev>', // You can switch this out with an email of your domain once added to Resend
to: [emailAddress],
subject: `New message from ${rawFormData.name}`,
text: `Name: ${rawFormData.name}\n\nEmail: ${rawFormData.email}\n\nSubject: ${rawFormData.subject}\n\nMessage: ${rawFormData.message}`
});
} catch (error) {
console.error('Error sending email:', error);
throw new Error('Failed to send contact form. Please try again later.');
}
}
You can now commit these changes and push them to GitHub, automatically deploying the updated site to Appwrite.
Next steps
And with that, the personal portfolio template is deployed to Appwrite Sites. You can explore other templates or deploy any other websites you'd like.
For more information about Appwrite Sites:
