Tailwind Resources Logo Tailwind Resources
Personal Portfolio Tutorial screenshot

Personal Portfolio Tutorial

Author Avatar Theme by Joshpierce
Updated: 28 Jul 2021
8 Stars

Tutorial Repository for creating a Personal Portfolio website using Svelte, SvelteKit, TailwindCSS, and hosting with Netlify.

Github

Categories

Svelte

Overview

The Personal Portfolio Tutorial is a ready-to-tweak starter kit designed to help users build their own personal portfolio site. It was originally created for a workshop presentation at THAT Conference 2021. The tutorial utilizes various technologies such as SvelteKit for the UI and App Framework, TailwindCSS for style composition, Netlify as the JamStack provider for hosting, and Cloudflare for DNS.

Features

  • Ready-to-tweak Starter Kit: The tutorial provides a starter kit that users can easily modify and customize to suit their own personal portfolio needs.
  • SvelteKit: The UI and App Framework used in the tutorial allows for efficient and reactive development of the portfolio site.
  • TailwindCSS: The CSS Framework provides a comprehensive set of pre-designed components and utility classes for styling the portfolio site.
  • Netlify: The tutorial integrates with Netlify, a JamStack provider, to host the portfolio site and handle deployment.
  • Cloudflare: Cloudflare is used for DNS configuration, allowing users to easily point their domain at their Netlify-hosted site.

Installation

To get started with the Personal Portfolio Tutorial, follow these steps:

  1. Fork the repository by clicking on “Fork This Repo”.
  2. Create or navigate to a folder where you want to keep your project.
  3. Run the following commands in order at the command line:
    git clone [URL of the forked repository]
cd personal-portfolio-tutorial
npm install
npm run dev
  4. After running the above commands, you should be able to access your app in the browser. By default, this is http://localhost:5000.

Summary

The Personal Portfolio Tutorial provides a ready-to-tweak starter kit for building personalized portfolio websites. With the use of SvelteKit, TailwindCSS, Netlify, and Cloudflare, users can create their own unique portfolio sites that showcase their skills and projects. The tutorial offers step-by-step instructions and code snippets to guide users through the installation process and customization of the portfolio site.