HTMLPortfolio

Portfolio-template-1 — HTML Portfolio Template

By pulgosodog

A personal portfolio page template built with HTML, CSS and JavaScript, where the project section is generated from object data and the layout is mobile-first and responsive.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-12View source

What stands out

A quick read of the recorded project description.

01

The project showcase area is generated from JavaScript objects, making it easy to replace project data in one place

02

Uses Flexbox and Grid to organize the page layout

03

Responsive through media queries, written with a mobile-first approach

04

Pure HTML, CSS and JavaScript implementation with no dependencies to install

05

Released under the MIT license, free to use, modify and distribute

Template Details

This template is a personal portfolio website page, which the author used as the first exercise in a series of portfolio projects while studying at Microverse. The page is written in HTML, CSS and JavaScript, and the content of the project showcase area is generated from JavaScript objects, making it easy to replace with your own project data later. The layout uses Flexbox and Grid, and responsiveness is achieved through media queries, following a mobile-first approach overall.

Usage is straightforward: clone the repository and open index.html to view it, or deploy it to any static hosting service. The repository provides no automated tests and no dependency installation steps. The README states that the current stage is replicating the given portfolio template, with gradual customization and more personal projects to be added later; the author also notes that no new features are planned for now.

Note that third-party assets such as demo images, fonts and icons in the template need to have their licenses checked separately, while the code itself is released under the MIT license.

HTMLPortfolio

Is it right for your project?

Use Cases

  • As a starting point for a personal portfolio page, replace the project object data to showcase your own work
  • For practicing mobile-first and responsive layout with HTML/CSS
  • Deploy to a static hosting service as an online resume or portfolio entry point

Suitable For

  • Developers or students who need a lightweight static portfolio page
  • Learners who want to see how a JavaScript object-driven project list is written
  • Users preparing to publish a personal page on a static hosting platform

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, open index.html directly in a browser to view the page

  2. 2

    The project requires no dependency installation and provides no automated tests

  3. 3

    Can be deployed to any static hosting service

  4. 4

    To replace the project showcase content, modify the corresponding JavaScript object data

  5. 5

    Third-party assets such as demo images, fonts and icons need to have their licenses checked separately

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use and distribution of this version's code are permitted.
  • 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 need to be checked under 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 separate charges.
View Original Text Basis

Compiled by DeepSeek based on repository license and README ·2026-10-12. 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-06-11
Screenshot last checked
2026-10-12

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.

Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16

Inspect the recorded source material

SHA-256: a664ae2299734c2e291e5e73a1a8d0ca9a8bd7c822e7498812c970c967031000

2026-10-12T13:35:05.161Z

Source file / repository
<a name="readme-top"></a>

<div align="center">
  <img src="cat-black-face.png" alt="logo" width="140"  height="auto" />
  <br/>

  <h3><b>Portfolio Project Website</b></h3>

</div>

<!-- TABLE OF CONTENTS -->

# 📗 Table of Contents

- [📖 About the Project](#about-project)
  - [🛠 Built With](#built-with)
    - [Tech Stack](#tech-stack)
    - [Key Features](#key-features)
  - [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
  - [Setup](#setup)
  - [Prerequisites](#prerequisites)
  - [Install](#install)
  - [Usage](#usage)
  - [Run tests](#run-tests)
  - [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)

<!-- PROJECT DESCRIPTION -->

# 📖 Portfolio Project Website<a name="about-project"></a>

This is a portfolio website, this is the 1st project of the portafolio, as I go through the Microverse curriculum materials I'm going to complete several small projects that will combine to create a portfolio website.
This first project will precisely replicate one of the portfolio templates provided. However, later on during the Microverse journey it will be customized and improved it to make it more unique, as well as include more of my own projects in the portfolio.

## 🛠 Built With <a name="built-with"></a>

### Tech Stack <a name="tech-stack"></a>

<details>
  <summary>Client</summary>
  <ul>
    <li>HTML 5</a></li>
  </ul>
  <ul>
    <li>CSS</a></li>
  </ul>
</details>


<!-- Features -->

### Key Features <a name="key-features"></a>


- **Use of Flexbox**
- **Use of Grid**
- **Use of Media Queries**
- **Mobile first**
- **Responsiveness**

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- LIVE DEMO -->

## 🚀 Live Demo <a name="live-demo"></a>


### <a href="https://pulgosodog.github.io/Portfolio-template-1/">Live Build</a>

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- GETTING STARTED -->

## 💻 Getting Started <a name="getting-started"></a>


To get a local copy up and running, follow these steps.

### Prerequisites

1. Git
2. A Web Browser with developer tools that supports HTML5 and CSS.

### Setup
1. On GitHub.com, navigate to the main page of the repository.
2. Above the list of files, click *Code*.
3. Copy the URL for the repository.
4. Open Terminal.
5. Change the current working directory to the location where you want the cloned directory.
6. Type git clone, and then paste the URL you of the reposotory.<br>
``` $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY ```

### Install

No installation is required for this project.

### Usage

To run the project, open the *index.html* of the clone repository or go to the <a href="https://pulgosodog.github.io/Portfolio-setup-and-mobile-first/">live demo</a>.


### Run tests

No tests available. 


### Deployment

The project can be deployed to a hosting service.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- AUTHORS -->

## 👥 Authors <a name="authors"></a>


👤 **Gabriel Y.**

- GitHub: [@pulgosodog](https://github.com/pulgosodog)


<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- FUTURE FEATURES -->

## 🔭 Future Features <a name="future-features"></a>
No planed future features for now.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- CONTRIBUTING -->

## 🤝 Contributing <a name="contributing"></a>

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- SUPPORT -->

## ⭐️ Show your support <a name="support"></a>

If you like this project you can clone it and feel free to improve it by making a pull request.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- ACKNOWLEDGEMENTS -->

## 🙏 Acknowledgments <a name="acknowledgements"></a>


I would like to thank my mom, my dad and my siblings.

<p align="right">(<a href="#readme-top">back to top</a>)</p>


<!-- LICENSE -->

## 📝 License <a name="license"></a>

This project is [MIT](./LICENSE.txt) licensed.


<p align="right">(<a href="#readme-top">back to top</a>)</p>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

simplefolio

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

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

Resume

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

HTML · Portfolio

Creative

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

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

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