Wokoya - Personal Portfolio vCard HTML Template preview 1

Wokoya - Personal Portfolio vCard HTML Template

bookmark

Wokoya is a personal portfolio (vCard) HTML template offering multiple navigation layouts (top bar, sidebar, icon bar), suitable for developers, designers, and others to showcase their resumes and work. The template is purely static and...

HTMLblogbrandingbusinesscleanconsultingcorporatecreative

Project Overview

Wokoya is a personal portfolio (vCard) HTML template offering multiple navigation layouts (top bar, sidebar, icon bar), suitable for developers, designers, and others to showcase their resumes and work. The template is purely static and can be used without any build tools.

Tech Stack

  • HTML5 + CSS3 (vanilla)
  • Google Fonts (Poppins + Hind)
  • SCSS source (compiled to CSS)
  • PHP (only contact.php for form backend)

Project Structure

text
wokoyahtml-10/main-file/
├── documentation/          # Template documentation pages
├── iconbar/                # Icon navigation layout
│   ├── index.html
│   ├── style.css
│   └── img/
├── new-sidebar/            # New sidebar layout
│   ├── index.html
│   └── style.css
├── sidebar/                # Classic sidebar layout
│   ├── main/
│   ├── simple/
│   └── typing-text/
├── topbar/                 # Top navigation layout
│   ├── main/
│   ├── simple/
│   └── typing-text/
└── php/contact.php

Core File Description

  • iconbar/index.html — Icon navigation layout entry point
  • new-sidebar/index.html — New sidebar layout entry point
  • sidebar/*/index.html — Three sub-versions of the classic sidebar layout
  • topbar/*/index.html — Three sub-versions of the top navigation layout
  • php/contact.php — Contact form backend processing
  • scss/style.scss — SCSS source (requires manual compilation)

Quick Start

Simply open the selected index.html file directly in your browser to preview. For modifying styles, it is recommended to use VS Code with Live Server for real-time preview; to edit SCSS, you need to install a Sass compiler.

Usage Suggestions

The template provides 4 main layouts and 8 sub-versions. Choose the sidebar layout (for more content) or top bar layout (for a cleaner style) based on the amount of information. When deploying, ensure php/contact.php runs on a server that supports PHP.

help_outline

FAQ