A static portfolio page implemented according to a Figma design, using HTML, CSS, and JavaScript
my-portfolio — HTML Portfolio Template
By RichardChileya
A static personal portfolio template based on a Figma design, built with HTML, CSS, and JavaScript, including header, work showcase, about me, and contact form sections.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
The page includes four main sections: header and main title, work showcase, about me, and contact form
The work area contains 3 work entries as recorded in the README, currently placeholder content to be replaced
The repository is configured with HTML and CSS linters and provides a .gitignore and documentation
Provides a GitHub Pages online demo to view the page effect directly
Licensed under MIT; this version of the code can be used, modified, and distributed for free
Template Details
This is a personal portfolio webpage template written by the author with HTML, CSS, and JavaScript according to a Figma design. The repository description mentions dynamic coding using the Modal framework. The page structure proceeds by sections: first the header and main title area, then the work showcase area (the README records that 3 work blocks were added), followed by the "About Me" section, and finally the contact form section completed in collaboration with @jash-debug, including HTML structure and CSS styles.
The template itself is the skeleton of the author's personal portfolio. The README states that the author's actual completed projects will be added later, so the current work area displays placeholder content rather than real projects. The repository includes linter configurations for HTML and CSS, a .gitignore, and a README, and provides a GitHub Pages online demo.
In terms of usage limitations: the project is a purely static page with no backend or data layer; the contact form only has front-end structure and styles, and the README does not describe submission logic or server-side handling; the clone command given in the README points to the portfolioskeleton1 repository, which is inconsistent with the current repository name, so when obtaining the code locally, use the actual repository address.
Is it right for your project?
Use Cases
- As a structural reference or starting point when individual developers build their own portfolio pages
- For front-end beginners to practice HTML, CSS, and JavaScript layout and section division
- For practice scenarios where a page needs to be reproduced from a design
- As an example of deploying a static site to GitHub Pages
Suitable For
- Individual developers who want to quickly obtain a portfolio page skeleton
- Front-end beginners learning HTML and CSS
- People who need a static page template and will replace the content themselves
- Developers who want to reference how a Figma design is implemented in HTML
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node.js and npm environment, as well as VS Code or another code editor
- 2
The clone command in the README points to the portfolioskeleton1 repository; please clone using the current repository address instead
- 3
After entering the project directory, open it in VS Code with code .
- 4
Code checks can be run with npx hint . and npx stylelint
- 5
The contact form only includes front-end structure and styles; submission handling must be implemented separately
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in a public repository under the MIT license; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- The code of this version may be used, modified, used commercially, and distributed for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
https://github.com/RichardChileya/my-portfolio/blob/main/LICENSEhttps://github.com/RichardChileya/my-portfolio/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 68 / 100
- Technologies
- HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2023-04-07
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 188b0c1e69072ced1b2ba2fd805bdaebee180ef6c1a0339aef41ae66c93bb621
2026-10-02T21:29:44.867Z
Source file / repositoryThis is project is my based on building my personal Portfolio Template following Figma Design Template.
This project was built with HTML-CSS-JAVASCRIPT using dynamic coding based on Modal framework.
As a template. this project with other projects that i work on to complete my portfolio.
# Project Name:My Portfolio Project
## Section 1: Header and Headline Section
> header and and headline section
> Created new branch according to GitHub flow rules
> Added a .gitignore file
> setup a linters for html and css and made sure that files not relevant are ignored by git.
> Added a descriptive README file
> Added a header and headline section in the index.html file of the project
> Added css styling to the html sections
> 
## Section 2: Work Section
## In this section we:
worked on the work section on the page
added 3 work sections on the design page
added an about me section
Updated the readme file as the code has been updated
## Section 4: Contact Me Sectin
## in this section we collaborated with @jash-debug:
we added a contact section
we added an html structure for the contact form section
we added css style for the form section
added an about me section
## Built With
- HTML and CSS
- Visual Studio Code -Electron framework
- Technologies used
## Live Demo (if available)
[Live Demo Link](https://richardchileya.github.io/my-portfolio/)
## Getting Started
## Getting Started
**This project include linters for HTML,CSS, and Open Source Document
.**
To get a local copy up and running follow these simple example steps.
### Prerequisites
Node package Manager(NPM)
Follow set up instructions from Node Official Website https://nodejs.org/en/download/
Text Editor: VS-Code or any other Code editor
### Setup
To get a local copy up and running follow these simple example steps.
-Clone this repository with
git clone https://github.com/RichardChileya/portfolioskeleton1.git using your terminal or command line.
-Change to the project directory by entering :
cd The-portfolioskeleton1 in the terminal.
-run code . to open it in vscode
### Install
### Usage
npx hint .
npx stylelint "\*_/_.{css,scss}"
### Run tests
### Deployment
## Authors
👤 **Richard W.K Chileya**
- GitHub: [@richardchileya](https://github.com/richardchileya)
- Twitter: [@Richard Chileya](https://twitter.com/richardchileya)
- LinkedIn: [Richard Chileya](https://linkedin.com/in/richardchileya)
Contributions, issues, and feature requests are welcome!
## Contributors
@jash-debug
Feel free to check the [issues page](https://github.com/RichardChileya/portfolioskeleton1/issues).
## Show your support
Give a ⭐️ if you like this project!
## Acknowledgments
- Thanks to my coding partners floring and Justice for the help rendered when coding this project
## 📝 License
This project is [MIT](/LICENSE) licensed.
Explore similar templates
Compare previews and descriptions within the same stack and category.

simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio

Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio

Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio

Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website

Grayscale
A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.
HTML · Corporate Website

startbootstrap-stylish-portfolio
A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.
HTML · Portfolio
