Design | Profile CV and profile card L Using CSS JS HTML
Filter

Design | Profile CV and profile card L Using CSS JS HTML

by Soeng Souy /
Share

Step 1: index.html

This is the HTML file that defines the structure of the profile card, with various sections (About, Experience, Contact). It uses Font Awesome for social media icons, and the layout is styled with external CSS and functionality is handled by JavaScript.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- Add external style -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Card Profile</title>
</head>

<body>
	<div class="card" data-state="#about">
		<div class="card-header">
			<div class="card-cover" style="background-image: url('images/image_background.jpg')"></div>
			<img class="card-avatar" src="images/profile.jpg" alt="avatar" />
			<h1 class="card-fullname">Soeng Souy</h1>
			<h2 class="card-jobtitle">Web Developer</h2>
		</div>
		<div class="card-main">
			<div class="card-section is-active" id="about">
				<div class="card-content">
					<div class="card-subtitle">ABOUT</div>
					<p class="card-desc">SOENG SOUY is a free online learning program introducing methods for coding websites, from beginner to advanced levels.</p>
				</div>
				<div class="card-social">
					<a href="https://www.facebook.com/soengsouy.com.kh/"> <i class="fa fa-facebook"></i> </a>
					<a href="https://twitter.com/SoengSouy1"> <i class="fa fa-twitter"></i> </a>
					<a href="#"> <i class="fa fa-youtube-play"></i> </a>
					<a href="https://kh.linkedin.com/in/soeng-souy-b9b179193"> <i class="fa fa-linkedin-square"></i> </a>
				</div>
			</div>
			<!-- Experience Section -->
			<div class="card-section" id="experience">
				<div class="card-content">
					<div class="card-subtitle">WORK EXPERIENCE</div>
					<div class="card-timeline">
						<!-- Timeline items -->
						<div class="card-item" data-year="2016">
							<div class="card-item-title">Graphics Designer at <span>DDD</span> </div>
							<div class="card-item-desc">Video editor and graphic design on photoshop.</div>
						</div>
						<div class="card-item" data-year="2018">
							<div class="card-item-title">Intern Software at <span>DDD</span> </div>
							<div class="card-item-desc">Developed data and worked in MySQL database.</div>
						</div>
						<!-- Add other work experience items similarly -->
					</div>
				</div>
			</div>
			<!-- Contact Section -->
			<div class="card-section" id="contact">
				<div class="card-content">
					<div class="card-subtitle">CONTACT</div>
					<div class="card-contact-wrapper">
						<div class="card-contact"> <i class="fa fa-map-marker"></i> Russian Confederation Blvd, Phnom Penh, Cambodia. </div>
						<div class="card-contact"> <i class="fa fa-mobile"></i>(+855) 966-686371 </div>
						<div class="card-contact"> <i class="fa fa-envelope-o"></i> soeng.souy@gmail.com </div>
						<button class="contact-me">WORK TOGETHER</button>
					</div>
				</div>
			</div>
			<div class="card-buttons">
				<button data-section="#about" class="is-active">ABOUT</button>
				<button data-section="#experience">EXPERIENCE</button>
				<button data-section="#contact">CONTACT</button>
			</div>
		</div>
	</div>

	<!-- Add internal JS -->
	<script type="text/javascript" src="js/internal.js"></script>
</body>

</html>

Step 2: style.css

The CSS file handles the layout, animations, and design of the card. It includes styles for the avatar, cover image, and buttons, as well as animations for the sections when switching between them.

* {
  box-sizing: border-box;
}

body {
  color: #2b2c48;
  font-family: "Jost", sans-serif;
  background-image: url("../images/image_background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.card {
  max-width: 340px;
  margin: auto;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background-color: white;
  display: flex;
  transition: 0.3s;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}

.card-header {
  position: relative;
  display: flex;
  height: 200px;
  width: 100%;
  transition: 0.3s;
}

.card-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  height: 160px;
  top: -20%;
  left: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px);
}

.card-avatar {
  width: 100px;
  height: 100px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 4px solid #7b718a;
  transform: translateX(-50%) translateY(-64px);
}

.card-buttons button {
  flex: 1 1 auto;
  background: 0;
  padding: 15px 5px;
  cursor: pointer;
  color: #5c5c6d;
}

.card-buttons button.is-active, .card-buttons button:hover {
  color: #2b2c48;
  background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%);
}

.card-section {
  display: none;
}

.card-section.is-active {
  display: block;
  animation: fadeIn 0.6s both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
  }
}

Step 3: internal.js

This JavaScript file handles the switching between sections when the buttons are clicked. It adds or removes the is-active class to show the corresponding content and manage the active button.

const buttons = document.querySelectorAll(".card-buttons button");
const sections = document.querySelectorAll(".card-section");
const card = document.querySelector(".card");

const handleButtonClick = (e) => {
    const targetSection = e.target.getAttribute("data-section");
    const section = document.querySelector(targetSection);

    // Change the state and visibility of sections
    targetSection !== "#about"
        ? card.classList.add("is-active")
        : card.classList.remove("is-active");

    card.setAttribute("data-state", targetSection);

    // Toggle the active class
    sections.forEach((s) => s.classList.remove("is-active"));
    buttons.forEach((b) => b.classList.remove("is-active"));

    e.target.classList.add("is-active");
    section.classList.add("is-active");
};

buttons.forEach((btn) => {
  btn.addEventListener("click", handleButtonClick);
});

Structure of Files:

  1. index.html: The main HTML structure with profile sections.

  2. style.css: The CSS file for styling the profile card, including layout, animations, and responsiveness.

  3. internal.js: JavaScript to handle the interactive behavior when the buttons are clicked, and sections change.

This setup creates a dynamic profile card with "About," "Experience," and "Contact" sections, and smooth transitions between the sections when you click the corresponding buttons.


Tag
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close