freeairesumebuilder
Version:
Personal portfolio template built with React
268 lines (221 loc) • 7.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vCard - Personal Portfolio</title>
<!--
- favicon
-->
<link
rel="shortcut icon"
href="./assets/images/logo.ico"
type="image/x-icon"
/>
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css" />
<!--
- google font link
-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--
- #MAIN
-->
<main>
<!--
- #SIDEBAR
-->
<aside class="sidebar" data-sidebar>
<div class="sidebar-info">
<figure class="avatar-box">
<img
src="./assets/images/my-avatar.png"
alt="Richard hanrick"
width="80"
/>
</figure>
<div class="info-content">
<h1 class="name" title="Richard hanrick">Richard hanrick</h1>
<p class="title">Web developer</p>
</div>
<button class="info_more-btn" data-sidebar-btn>
<span>Show Contacts</span>
<ion-icon name="chevron-down"></ion-icon>
</button>
</div>
<div class="sidebar-info_more">
<div class="separator"></div>
<ul class="contacts-list">
<li class="contact-item">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<a href="mailto:richard@example.com" class="contact-link"
>richard@example.com</a
>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="phone-portrait-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Phone</p>
<a href="tel:+12133522795" class="contact-link"
>+1 (213) 352-2795</a
>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="calendar-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Birthday</p>
<time datetime="1982-06-23">June 23, 1982</time>
</div>
</li>
<li class="contact-item">
<div class="icon-box">
<ion-icon name="location-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Location</p>
<address>Sacramento, California, USA</address>
</div>
</li>
</ul>
<div class="separator"></div>
<ul class="social-list">
<li class="social-item">
<a href="#" class="social-link">
<ion-icon name="logo-facebook"></ion-icon>
</a>
</li>
<li class="social-item">
<a href="#" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li class="social-item">
<a href="#" class="social-link">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
</div>
</aside>
<!--
- #main-content
-->
<div class="main-content">
<!--
- #NAVBAR
-->
<nav class="navbar">
<ul class="navbar-list">
<li class="navbar-item">
<button class="navbar-link" data-nav-link>About</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Resume</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Portfolio</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Blog</button>
</li>
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Contact</button>
</li>
</ul>
</nav>
<!--
- #ABOUT
-->
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title" id="about-title"></h2>
</header>
<section class="about-text" id="about-text"></section>
<section class="service" id="about-services"></section>
<section class="testimonials" id="about-testimonials"></section>
<section class="clients" id="about-clients"></section>
</article>
<!--
- #RESUME
-->
<article class="resume" data-page="resume">
<header>
<h2 class="h2 article-title" id="resume-title"></h2>
</header>
<section class="timeline" id="resume-education"></section>
<section class="timeline" id="resume-experience"></section>
<section class="skill" id="resume-skills"></section>
</article>
<!--
- #PORTFOLIO
-->
<article class="portfolio" data-page="portfolio">
<header>
<h2 class="h2 article-title" id="portfolio-title"></h2>
</header>
<section class="projects">
<ul class="filter-list" id="portfolio-filter-list"></ul>
<!-- filter list will be dynamically created -->
<ul class="project-list" id="portfolio-project-list"></ul>
<!-- project list will be dynamically created -->
</section>
</article>
<!-- Blog Section -->
<article class="blog" data-page="blog">
<header>
<h2 class="h2 article-title" id="blog-title"></h2>
</header>
<section class="blog-posts">
<ul class="blog-posts-list" id="blog-post-list"></ul>
</section>
</article>
<!-- Contact Section -->
<article class="contact" data-page="contact">
<header>
<h2 class="h2 article-title" id="contact-title"></h2>
</header>
<section class="mapbox" id="contact-map"></section>
<section class="contact-form">
<h3 class="h3 form-title" id="contact-form-title"></h3>
<form action="#" class="form" id="contact-form"></form>
</section>
</article>
</div>
</main>
<!--
- custom js link
-->
<script src="./assets/js/script.js"></script>
<!--
- ionicon link
-->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>