# codewithsadee/vcard-personal-portfolio

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/codewithsadee-vcard-personal-portfolio).**

7,887 stars · 4,342 forks · HTML · MIT

## Links

- GitHub: https://github.com/codewithsadee/vcard-personal-portfolio
- Homepage: https://codewithsadee.github.io/vcard-personal-portfolio/
- awesome-repositories: https://awesome-repositories.com/repository/codewithsadee-vcard-personal-portfolio.md

## Topics

`css` `css3` `html` `personal-website` `portfolio` `portfolio-website`

## Description

vCard Personal Portfolio is a static HTML and CSS template that provides developers with a ready-to-deploy personal portfolio website. It is built as a frontend portfolio template, delivering a responsive portfolio website that showcases a developer's projects and skills in a layout optimized for all screen sizes.

The project employs a mobile-first design approach, where styles are authored for mobile viewports as the baseline and then enhanced for larger screens using progressive min-width media queries. Its CSS-grid-based responsive layout arranges page sections using CSS Grid with flexible breakpoints, adapting the layout across desktop, tablet, and mobile viewports. The template uses media-query-driven breakpoints to adjust typography, spacing, and component visibility at predefined screen width thresholds.

The template's static HTML and CSS architecture delivers content as pre-written files without a JavaScript framework or server-side rendering engine, making it suitable for lightweight, fast-loading deployment. Component-style CSS modules encapsulate visual styling for each page section, such as header, portfolio, and contact, into separate CSS rule blocks for maintainability. The project is designed for static site hosting, requiring no server-side processing or databases.

## Tags

### Web Development

- [HTML and CSS Templates](https://awesome-repositories.com/f/web-development/web-standards/html-and-css-templates.md) — Delivers content as pre-written HTML and CSS files without a JavaScript framework or server-side engine.
- [Mobile-First Development Strategies](https://awesome-repositories.com/f/web-development/mobile-first-development-strategies.md) — Authors styles for mobile viewports first, then progressively enhances for larger screens.
- [CSS Media Queries](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation/css-media-queries.md) — Uses CSS media queries to adjust typography, spacing, and component visibility at predefined breakpoints.
- [Static Site Hosting](https://awesome-repositories.com/f/web-development/static-site-hosting.md) — Deploys a lightweight, fast-loading personal website without server-side processing or databases.

### Business & Productivity Software

- [Portfolio Website Templates](https://awesome-repositories.com/f/business-productivity-software/portfolio-management/portfolio-website-templates.md) — Displays a professional portfolio of projects and skills in a layout optimized for all screen sizes.

### Software Engineering & Architecture

- [Portfolio Showcases](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases.md) — Showcases a professional portfolio of projects and skills in a layout that adapts to any screen size. ([source](https://cdn.jsdelivr.net/gh/codewithsadee/vcard-personal-portfolio@master/README.md))
- [Developer Portfolio Sites](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases/developer-portfolio-sites.md) — Presents a developer's work, skills, and experience through a clean online presence.
- [One-Page Portfolio Templates](https://awesome-repositories.com/f/software-engineering-architecture/portfolio-showcases/one-page-portfolio-templates.md) — Provides a pre-built HTML and CSS template for developers to quickly deploy a personal portfolio page.

### User Interface & Experience

- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Builds a website that adapts seamlessly to desktops, tablets, and mobile phones.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Arranges page sections using CSS Grid with flexible breakpoints for adaptive multi-device layouts.
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Builds page layout with CSS Grid and media queries to rearrange content across viewports.
- [CSS Modules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/style-isolation-mechanisms/css-modules.md) — Encapsulates page-section styles into scoped CSS rule blocks to prevent naming collisions.

### Part of an Awesome List

- [Portfolio Templates](https://awesome-repositories.com/f/awesome-lists/devtools/portfolio-templates.md) — Simple HTML and CSS portfolio.