Is Bostami the Best Tailwind Portfolio Template for Beginners?

How I Rebuilt a Slow Portfolio Site Using the Bostami Template

I have spent the last ten years building, fixing, and optimizing websites for clients. I have worked on huge e-commerce platforms, small business sites, and personal blogs.

If there is one thing I have learned after building hundreds of sites, it is this: people do not like waiting for pages to load.

A few weeks ago, a freelance UI designer named Marcus sent me an email. He was upset. He told me:

"I built my portfolio on a popular page builder last year. It looks nice, but whenever I send my portfolio link to potential clients, they tell me it takes almost six seconds to open on their phones. I think I am losing freelance jobs because my site is so slow."

I opened his site on my phone. He was right. It felt heavy and lagged every time I tried to scroll. It was packed with heavy plugins, giant uncompressed images, and messy code.

I told Marcus we needed to scrap his old setup and start fresh with a modern, lightweight template. We decided to use the Bostami Template.

In this guide, I will share how we rebuilt his portfolio, why this template works so well for beginners, and how you can use it to launch your own fast portfolio site in just one afternoon.

What Is Bostami? (In Simple Words)

Bostami is a modern, personal portfolio template made for designers, developers, freelancers, and creative workers.

It comes packed with ready-to-use sections like: A personal profile card (with your avatar, job title, and social links) An "About Me" section A resume and experience timeline A portfolio grid with filter buttons A blog layout A working contact form

What makes Bostami unique is that it includes three different technical options inside one package: 1. Pure HTML5 + Tailwind CSS version (Great if you just want simple files you can open directly in any browser). 2. React version (Great if you want dynamic user components). 3. Next.js version (Great if you want top speed, smooth page transitions, and good Google SEO ratings).

Which Version Should a Beginner Pick?

When you unzip Bostami, you might wonder which folder you should open first. Let us break them down simply so you don't get lost.

bostami-main-package/
├── HTML/           &lt;-- Simple static files (No coding tools needed)
├── React/          &lt;-- React single-page app structure
└── NextJS/         &lt;-- Next.js pre-rendered setup (Best overall speed &amp; SEO)

Option A: Pure HTML Version

If you have never touched a command line terminal before and you just want to edit simple text files, use the HTML folder. You double-click index.html, and it opens right up inside your Google Chrome browser.

If you prefer starting with pure static code without messing around with Node packages or build scripts, you can always download HTML Templates that work straight out of the box.

Option B: Next.js Version (What We Picked for Marcus)

We picked the Next.js version for Marcus because it pre-renders your pages before visitors open them. When someone clicks a link on your site, the new page appears instantly without any white flashing or loading spinners.

Unboxing the Template: What the Files Look Like

Let us look at the Next.js folder inside Bostami. Here is how the main files are organized:

bostami-nextjs/
├── public/                &lt;-- Put your photos, avatars, and resume PDF here
├── src/
│   ├── data/              &lt;-- Edit your personal info and project lists here
│   ├── components/        &lt;-- Contains code for Header, Sidebar, Portfolio cards
│   └── pages/             &lt;-- Page files like index.js, resume.js, contact.js
├── tailwind.config.js     &lt;-- Theme colors and custom styling rules
└── package.json           &lt;-- Helper packages list

The team behind Bostami made a smart choice: they separated your content from the main visual code.

You do not need to edit complex layout code just to change your phone number or job title. Most of your information lives in simple data files inside src/data/.

Step-by-Step Setup Guide for Beginners

Let us walk through setting up Bostami on your computer step-by-step. You do not need any paid tools.

Step 1: Install Node.js and VS Code

Before editing anything, download two free tools: 1. Node.js (from nodejs.org): This lets your computer run JavaScript local servers. 2. VS Code (from code.visualstudio.com): A simple text editor built for editing web files.

Step 2: Open the Folder in VS Code

Open VS Code, click File > Open Folder, and choose the bostami-nextjs folder inside your unzipped package.

Step 3: Install the Helpers

Open the VS Code terminal window by pressing Ctrl + (or Cmd + on a Mac).

Type this command and hit Enter:

npm install

This command downloads all the free helper scripts Bostami needs to render animations and Tailwind styles. It usually takes less than 30 seconds.

Step 4: Run Your Local Site

Next, type this command:

npm run dev

Your terminal will print a local address: http://localhost:3000. Hold Ctrl (or Cmd) and click that link. Your new portfolio will pop up live inside your web browser!

How to Customize Your Content

Let us look at how easy it is to replace the demo text with your actual personal details.

1. Changing Your Personal Profile Information

Open the file named src/data/personalInfo.js. You will see plain text fields like this:

export const personalData = {
  name: "Marcus Vance",
  designation: "UI/UX Designer &amp; Developer",
  avatar: "/images/about/avatar.jpg",
  email: "marcus@example.com",
  phone: "+1 234 567 890",
  location: "Austin, Texas",
  socialLinks: {
    github: "https://github.com",
    twitter: "https://twitter.com",
    linkedin: "https://linkedin.com"
  }
};

Simply swap out the placeholder text with your real name, job title, email, and social media handles.

Save the file (Ctrl + S), and your browser will update instantly without you having to refresh the page!

2. Adding Your Portfolio Projects

Next, open src/data/portfolioData.js. This is where your project items are listed:

export const portfolioItems = [
  {
    id: 1,
    title: "Mobile Banking App",
    category: "UI/UX Design",
    image: "/images/work/project-1.jpg",
    link: "https://dribbble.com"
  },
  {
    id: 2,
    title: "E-Commerce Website",
    category: "Web Development",
    image: "/images/work/project-2.jpg",
    link: "https://github.com"
  }
];

To add a new project: 1. Drop your project image into the public/images/work/ folder. 2. Copy and paste one of the blocks above. 3. Change the title, category, and image file path.

Understanding Tailwind CSS (In 3 Minutes)

Bostami uses Tailwind CSS for styling. If you have used standard CSS before, you know it usually involves writing separate style rules in a giant .css file.

Tailwind works differently. It uses short "utility classes" directly inside your HTML or React components.

For example, look at this simple button code:

&lt;button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"&gt;
  Hire Me
&lt;/button&gt;

Here is what those class names mean in plain English: bg-blue-600: Sets the background color to a nice shade of blue. hover:bg-blue-700: Makes the blue color darker when someone hovers their mouse over it. text-white: Makes the button text white. font-bold: Makes the text bold. py-2 px-4: Adds padding (spacing) inside the button. rounded-lg: Rounds the corners of the button.

If you want to change Marcus’s main accent color from blue to purple, you simply swap bg-blue-600 to bg-purple-600. You don't need to hunt through hundreds of lines of style sheets.

Understanding basic utility scripts like this shows how lightweight code can create rich interactive experiences. It is similar to how developers build lightweight browser items or interactive HTML5 Games using pure JavaScript and simple styles—when the code is clean, everything runs smooth as silk.

Speed & Performance Benchmark

After we finished updating Marcus's photos and project text, I ran his new site through Google PageSpeed Insights.

Here are the before-and-after results:

===========================================================
  OLD WORDPRESS PORTFOLIO VS NEW BOSTAMI NEXT.JS SITE
===========================================================
Metric                  Old Site          New Bostami Site
Mobile Performance      34 / 100          96 / 100
Desktop Performance     62 / 100          99 / 100
First Contentful Paint  3.8 seconds       0.7 seconds
Largest Contentful Paint 5.6 seconds      1.1 seconds
Total Blocking Time     840 ms            0 ms
===========================================================

Why Was the New Site So Much Faster?

Zero Database Delays: The site serves pre-built HTML files directly to the browser.
Tiny Asset Sizes: Tailwind CSS strips away any unused styles, making the final CSS file tiny.
Optimized Images: Next.js automatically converts uploaded images to fast WebP formats on the fly.

Marcus went from a site that took almost six seconds to open down to a site that loads in 0.7 seconds. That is a massive upgrade.

How to Set Up the Contact Form

Bostami comes with a clean contact form layout where visitors can type their name, email address, and message.

Because static Next.js sites do not run an active email server in the background, you need a simple, free service to send those form submissions directly to your email inbox.

The easiest option for beginners is Formspree. Here is how to set it up in two minutes:

Go to formspree.io and create a free account.
Click "New Form" and enter your personal email address. Formspree will give you a custom endpoint URL (like https://formspree.io/f/xbjvqnzy).
Open src/components/contact/ContactForm.js inside VS Code.
Replace the form action URL with your Formspree link:

&lt;form action="https://formspree.io/f/xbjvqnzy" method="POST"&gt;
  &lt;input type="text" name="name" placeholder="Your Name" required /&gt;
  &lt;input type="email" name="email" placeholder="Your Email" required /&gt;
  &lt;textarea name="message" placeholder="Your Message" required&gt;&lt;/textarea&gt;
  &lt;button type="submit"&gt;Send Message&lt;/button&gt;
&lt;/form&gt;

Now, whenever a potential client fills out the contact form on your site, their message goes straight to your regular email inbox!

Free Hosting: Publishing Your Site Live to the World

Once your site looks great on your computer, you need to publish it live on the web so everyone can see it.

You do not need to buy traditional web hosting. You can host your Next.js site completely free on Vercel.

Here are the four simple steps:

Step 1: Create a Free GitHub Account

Go to github.com and sign up for a free account. Upload your bostami-nextjs folder to a new repository.

Go to vercel.com and sign in using your GitHub account.

Step 3: Import Your Repository

Click "Add New Project", pick your Bostami GitHub repository from the list, and click "Deploy."

Step 4: Done!

Vercel will build your site in about 40 seconds and give you a free live link (like marcus-portfolio.vercel.app).

You can also connect your own domain name (like marcusdesign.com) for free inside Vercel's settings tab.

Honest Pros and Cons of Bostami

I always like to give an honest, balanced view of every product I review. Here are the main pros and cons of the Bostami template:

What I Liked (Pros)

3-in-1 Package: Getting HTML, React, and Next.js versions inside one purchase gives you great flexibility.
Built-in Light and Dark Mode: Comes with a working light/dark toggle switch that looks great in both modes.
Super Fast Performance: Pre-built Next.js pages achieve 95+ performance scores on Google PageSpeed.
Mobile First Layout: The sidebar profile card and mobile navigation menu look clean on mobile screens.

What Could Be Better (Cons)

Form Backend Setup Required: You need to connect a third-party tool like Formspree or EmailJS to receive emails from the contact form.
Basic Coding Knowledge Needed: While you don't need to be an expert developer, you do need to feel comfortable editing simple text strings inside JS files using VS Code.

Beginner Pre-Launch Checklist

Before you send your new portfolio link to recruiters or clients, go through this quick checklist:

[ ] Update the Favicon: Replace the default icon in the public/ folder with your own logo or avatar.
[ ] Check Meta Title & Description: Make sure your page title says something clear, like "Marcus Vance - UI/UX Designer Portfolio".
[ ] Test the Contact Form: Send a real test message through your contact form to confirm it arrives in your email inbox.
[ ] Test on a Mobile Phone: Open your live Vercel URL on your phone to double-check button spacing and text sizes.
[ ] Add Your Resume PDF: Drop your updated resume PDF file into the public/ folder so visitors can download it when clicking the "Download CV" button.

Final Thoughts

Two days after we launched Marcus's new site using the Bostami template, he sent me a text message:

"I just sent my portfolio link to three prospective clients. One of them replied in ten minutes and said my site loaded so fast on his phone that he wanted to talk right away!"

If you are tired of bloated, slow websites and want a clean, fast portfolio that shows off your work professionally, the Bostami Template is a fantastic starter kit.

It saves you weeks of custom design work, costs $0 per month to host on Vercel, and helps you make a great first impression on clients and employers.

Overall Rating: Design & Aesthetics: 4.9 / 5 Page Speed: 5.0 / 5 Ease of Customization: 4.6 / 5 Value for Money: 4.8 / 5

morillasofi415@gmail.com

时间：2026-08-02 访问次数:5