Home Web Design CSS Responsive Resume Template With HTML and CSS | Personal Resume

Responsive Resume Template With HTML and CSS | Personal Resume

May 1, 2020

21880

How we can create a personal resume using pure HTML and CSS? Solution: See this Responsive Resume Template With HTML and CSS, Personal Resume Design.

Previously I have shared an HTML vCard template, but it is a simple responsive resume design. Basically, a resume is a document used and created by a person to present their background, skills, and accomplishments. Mostly peoples design their resume of graphic software like illustrator, photoshop. In India even nowadays many peoples use old Microsoft Word format resumes. We can create an online resume using codes like HTML, CSS and it will a perfect format for online presentation.

Today you will learn to create Personal Resume UI design. Basically, there is a resume with common contents like name, image, short description, skills, contact information, and experience. All these fields have dummy text, because it is only a template you have to replace these by your own info. There is shape movement animation around the image and it has a responsive design.

So, Today I am sharing Responsive Resume Template With HTML and CSS. There I have used HTML to create the layout and CSS for styling and design. Also, I have used a JavaScript library named TweenMax JS for the shape moving animation. This is a complete resumes program and ready to use online. You can use it on your website as a plain resume.

If you are thinking now how this resume design actually is, then see the preview given below.

Preview Of Personal Resume

See this video preview to getting an idea of how this resume looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this program, then get the source code of its.

Responsive Resume Template Source Code

Before sharing source code, let’s talk about it. First I have created the main div named ‘resume-wrapper’ and placed all the items inside it. Inside the main div, I have placed many elements for multiple elements like name, skills, contact info, etc. There I have created SVG shapes to for the image background, later it will animate by JS. There I have used the HTML list for showing skills with progress bars.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. There I have used table display command display: table; to create the layout. I have used CSS @media query to create responsive elements and increased-reduced size for multiple screen sizes.

The JavaScript file only for animate the shapes which are around the circular image. JS codes are placed according to the library’s pre-built functions. There the shapes moving randomly using for loop and if-else statements. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Responsive Resume Template | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="resume-wrapper">
	<section class="profile section-padding">
		<div class="container">
			<div class="picture-resume-wrapper">
        <div class="picture-resume">
        <span><img src="https://secure.gravatar.com/avatar/24a495e3a7316e619af62445f1a86886?s=96&d=mm&r=g" alt="" /></span>
        <svg version="1.1" viewBox="0 0 350 350">
  
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
    </filter>
  </defs>
  
  
<g filter="url(#goo)" >  
  
  <circle id="main_circle" class="st0" cx="171.5" cy="175.6" r="130"/>
  
  <circle id="circle" class="bubble0 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble1 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble2 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble3 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble4 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble5 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble6 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble7 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble8 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble9 st1" cx="171.5" cy="175.6" r="122.7"/>
  <circle id="circle" class="bubble10 st1" cx="171.5" cy="175.6" r="122.7"/>

</g>  
</svg>
      </div>
         <div class="clearfix"></div>
 </div>
      <div class="name-wrapper">
        <h1>SHANTANU <br/>RAJPUT</h1>
      </div>
      <div class="clearfix"></div>
      <div class="contact-info clearfix">
      	<ul class="list-titles">
      		<li>Call</li>
      		<li>Mail</li>
      		<li>Web</li>
      		<li>Home</li>
      	</ul>
        <ul class="list-content ">
        	<li>+91 123 456 7890</li> 
        	<li>contact@webdevtrick.com</li> 
        	<li><a href="#">webdevtrick.com</a></li> 
        	<li>Delhi, India</li> 
        </ul>
      </div>
      <div class="contact-presentation"> 
      	<p><span class="bold">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod congue nisi, nec consequat quam. In consectetur faucibus turpis eget laoreet. Sed nec imperdiet purus. </p>
      </div>
      <div class="contact-social clearfix">
      	<ul class="list-titles">
      		<li>Twitter</li>
      		<li>Dribbble</li>
      		<li>Codepen</li>
      	</ul>
        <ul class="list-content">
      		<li><a href="">@webdevtrick</a></li>
      		<li><a href="">@webdevtrick</a></li> 
      		<li><a href="">@webdevtrick</a></li>
      	</ul>
      </div>
		</div>
	</section>
  
  <section class="experience section-padding">
  	<div class="container">
  		<h3 class="experience-title">Experience</h3>
      
      <div class="experience-wrapper">
      	<div class="company-wrapper clearfix">
      		<div class="experience-title">Company name</div> 
          <div class="time">Nov 2012 - Present</div> 
      	</div>
        
        <div class="job-wrapper clearfix">
        	<div class="experience-title">Front End Developer </div> 
          <div class="company-description">
          	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>  
          </div>
        </div>
        
        <div class="company-wrapper clearfix">
      		<div class="experience-title">Company name</div> 
          <div class="time">Nov 2010 - Present</div> 
      	</div>
        
         <div class="job-wrapper clearfix">
        	<div class="experience-title">Freelance, Web Designer / Web Developer</div> 
          <div class="company-description">
          	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p> 
          </div>
        </div>
        
        <div class="company-wrapper clearfix">
      		<div class="experience-title">Company name</div>
          <div class="time">Nov 2009 - Nov 2010</div> 
      	</div> 
        
         <div class="job-wrapper clearfix">
        	<div class="experience-title">Web Designer </div>
          <div class="company-description">
          	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>   
          </div>
        </div>
        
      </div>
      
      <div class="section-wrapper clearfix">
      	<h3 class="section-title">Skills</h3>
        	<ul>
        		<li class="skill-percentage">HTML / HTML5</li>
        		<li class="skill-percentage">CSS / CSS3 / SASS / LESS</li>
        		<li class="skill-percentage">Javascript</li>
        		<li class="skill-percentage">Jquery</li>
        		<li class="skill-percentage">Wordpress</li>
        		<li class="skill-percentage">PHP</li>
            
        	</ul>
        
      </div>
      
      <div class="section-wrapper clearfix">
        <h3 class="section-title">Hobbies</h3>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p> 
      </div>
      
  	</div>
  </section>
  
  <div class="clearfix"></div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<!DOCTYPE html>

<head>

<title>Responsive Resume Template | Webdevtrick.com</title>

</head>

<body>

<defs>

</filter>

</defs>

</g>

</svg>

</div>

</div>

<h1>SHANTANU <br/>RAJPUT</h1>

</div>

</ul>

<li>contact@webdevtrick.com</li>

<li><a href="#">webdevtrick.com</a></li>

<li>Delhi, India</li>

</ul>

</div>

<p><span class="bold">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod congue nisi, nec consequat quam. In consectetur faucibus turpis eget laoreet. Sed nec imperdiet purus. </p>

</div>

<li>Twitter</li>

<li>Dribbble</li>

<li>Codepen</li>

</ul>

<li><a href="">@webdevtrick</a></li>

</ul>

</div>

</section>

<h3 class="experience-title">Experience</h3>

<div class="experience-title">Company name</div>

<div class="time">Nov 2012 - Present</div>

</div>

<div class="experience-title">Front End Developer </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>

</div>

<div class="experience-title">Company name</div>

<div class="time">Nov 2010 - Present</div>

</div>

<div class="experience-title">Freelance, Web Designer / Web Developer</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>

</div>

<div class="experience-title">Company name</div>

</div>

<div class="experience-title">Web Designer </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>

</div>

<h3 class="section-title">Skills</h3>

<ul>

<li class="skill-percentage">Javascript</li>

<li class="skill-percentage">Jquery</li>

<li class="skill-percentage">Wordpress</li>

</ul>

</div>

<h3 class="section-title">Hobbies</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a elit facilisis, adipiscing leo in, dignissim magna.</p>

</div>

</section>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
*, *::after, *::before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5em;
}

a {
  color: #66cc99;
  text-decoration: none;
}

.clearfix::after, .clearfix::before {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.bold {
  color: #4a4e51;
  font-weight: 400;
}

.resume-wrapper {
  position: relative;
  text-align: center;
  height: 100%;
}

.container {
  min-height: 600px;
}

.profile {
  background: #fff;
  width: 40%;
  float: left;
  color: #9099a0;
}
@media (max-width: 850px) {
  .profile {
    width: 100%;
  }
}
.profile .name-wrapper {
  float: left;
  width: 60%;
}
.profile h1 {
  font-size: 2.5em;
  text-align: left;
  font-family: 'Varela Round', sans-serif;
  color: #4a4e51;
  text-transform: uppercase;
  line-height: 1em;
  padding-top: 40px;
}
@media (max-width: 1200px) {
  .profile h1 {
    padding-top: 20px;
  }
}
@media (max-width: 450px) {
  .profile h1 {
    font-size: 1.8em;
    padding-top: 20px;
  }
}
.profile li {
  margin-bottom: 10px;
}
.profile .picture-resume-wrapper {
  width: 40%;
  display: block;
  float: left;
}
@media (max-width: 1200px) {
  .profile .picture-resume-wrapper {
    width: 100%;
  }
}
.profile .picture-resume {
  width: 220px;
  height: 220px;
  background-size: cover;
  border-radius: 50%;
  margin-right: 0px;
  display: table;
  position: relative;
  vertical-align: middle;
}
.profile .picture-resume span {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  margin: 0 auto;
  z-index: 10;
  text-align: center;
}
.profile .picture-resume img {
  border-radius: 50%;
  width: 130px;
}
@media (max-width: 1500px) {
  .profile .picture-resume img {
    width: 80px;
  }
}
@media (max-width: 1200px) {
  .profile .picture-resume img {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 1500px) {
  .profile .picture-resume {
    width: 150px;
    height: 150px;
  }
}
@media (max-width: 1200px) {
  .profile .picture-resume {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 450px) {
  .profile .picture-resume {
    width: 180px;
    height: 180px;
  }
}
.profile .contact-info {
  margin-top: 100px;
  font-weight: 300;
}
@media (max-width: 1200px) {
  .profile .contact-info {
    margin-top: 70px;
  }
}
@media (max-width: 450px) {
  .profile .contact-info {
    margin-top: 50px;
  }
}
.profile .list-titles {
  float: left;
  text-align: left;
  font-weight: 600;
  width: 40%;
  color: #4a4e51;
}
.profile .list-content {
  float: left;
  width: 60%;
  text-align: left;
  font-weight: 300;
}
.profile .contact-presentation {
  text-align: left;
  font-weight: 300;
  margin-top: 100px;
  margin-bottom: 100px;
}
@media (max-width: 1200px) {
  .profile .contact-presentation {
    margin-top: 70px;
    margin-bottom: 70px;
  }
}
@media (max-width: 850px) {
  .profile .contact-presentation {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
.profile svg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.profile .st0, .profile .st1 {
  fill: #66cc99;
}

.experience {
  background: #3d3e42;
  width: 60%;
  float: left;
  position: relative;
  color: #9099a0;
  font-weight: 300;
  min-height: 100%;
  min-height: 100vh;
}
@media (max-width: 850px) {
  .experience {
    width: 100%;
  }
}
.experience h3.experience-title {
  color: #66cc99;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.2em;
  margin-bottom: 20px;
  font-weight: 400;
}
.experience .company-wrapper {
  width: 30%;
  float: left;
  text-align: left;
  padding-right: 5%;
  margin-bottom: 60px;
}
@media (max-width: 450px) {
  .experience .company-wrapper {
    width: 100%;
    margin-bottom: 20px;
  }
}
.experience .job-wrapper {
  width: 70%;
  float: left;
  text-align: left;
  padding-right: 5%;
  margin-bottom: 60px;
}
@media (max-width: 450px) {
  .experience .job-wrapper {
    width: 100%;
    margin-bottom: 40px;
  }
}
.experience .experience-title {
  color: white;
  margin-bottom: 15px;
}

.section-padding {
  padding: 60px 60px 40px 40px;
}
@media (max-width: 850px) {
  .section-padding {
    padding: 80px 15% 40px 10%;
  }
}
@media (max-width: 450px) {
  .section-padding {
    padding: 40px 10% 20px 5%;
  }
}

.section-wrapper {
  width: 50%;
  float: left;
  text-align: left;
  color: #9099a0;
  font-weight: 300;
  margin-bottom: 20px;
}
@media (max-width: 450px) {
  .section-wrapper {
    width: 100%;
  }
}
.section-wrapper:nth-child(3) {
  padding-right: 8%;
}
.section-wrapper h3.section-title {
  color: #66cc99;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.2em;
  margin-bottom: 20px;
  font-weight: 400;
}
.section-wrapper .skill-percentage {
  margin-bottom: 10px;
  position: relative;
}
.section-wrapper .skill-percentage::after {
  content: "";
  width: 100%;
  height: 6px;
  background: #4a4e51;
  display: block;
  margin-top: 3px;
}
.section-wrapper .skill-percentage::before {
  content: "";
  height: 6px;
  background: #66cc99;
  position: absolute;
  margin-top: 3px;
  bottom: 0;
}
.section-wrapper .skill-percentage:nth-child(1)::before {
  width: 80%;
  -webkit-animation: skill_1 0.6s ease;
          animation: skill_1 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(2)::before {
  width: 90%;
  -webkit-animation: skill_2 0.6s ease;
          animation: skill_2 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(3)::before {
  width: 50%;
  -webkit-animation: skill_3 0.6s ease;
          animation: skill_3 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(4)::before {
  width: 60%;
  -webkit-animation: skill_4 0.6s ease;
          animation: skill_4 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(5)::before {
  width: 70%;
  -webkit-animation: skill_5 0.6s ease;
          animation: skill_5 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(6)::before {
  width: 70%;
  -webkit-animation: skill_6 0.6s ease;
          animation: skill_6 0.6s ease;
}
.section-wrapper .skill-percentage:nth-child(7)::before {
  width: 70%;
  -webkit-animation: skill_6 0.6s ease;
          animation: skill_6 0.6s ease;
}

@-webkit-keyframes skill_1 {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

@keyframes skill_1 {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}
@-webkit-keyframes skill_2 {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}
@keyframes skill_2 {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}
@-webkit-keyframes skill_3 {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}
@keyframes skill_3 {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}
@-webkit-keyframes skill_4 {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}
@keyframes skill_4 {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}
@-webkit-keyframes skill_5 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}
@keyframes skill_5 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}
@-webkit-keyframes skill_6 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}
@keyframes skill_6 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}
@-webkit-keyframes skill_7 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}
@keyframes skill_7 {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

*, *::after, *::before {

box-sizing: border-box;

}

html, body {

height: 100%;

}

body {

font-family: 'Open Sans', sans-serif;

font-size: 16px;

line-height: 1.5em;

}

a {

color: #66cc99;

text-decoration: none;

}

.clearfix::after, .clearfix::before {

content: " ";

display: table;

}

.clearfix::after {

clear: both;

}

.bold {

color: #4a4e51;

font-weight: 400;

}

.resume-wrapper {

position: relative;

text-align: center;

height: 100%;

}

.container {

min-height: 600px;

}

.profile {

background: #fff;

width: 40%;

float: left;

color: #9099a0;

}

@media (max-width: 850px) {

.profile {

width: 100%;

}

.profile .name-wrapper {

float: left;

width: 60%;

}

.profile h1 {

font-size: 2.5em;

text-align: left;

font-family: 'Varela Round', sans-serif;

color: #4a4e51;

text-transform: uppercase;

line-height: 1em;

padding-top: 40px;

}

@media (max-width: 1200px) {

.profile h1 {

padding-top: 20px;

}

@media (max-width: 450px) {

.profile h1 {

font-size: 1.8em;

padding-top: 20px;

}

.profile li {

margin-bottom: 10px;

}

.profile .picture-resume-wrapper {

width: 40%;

display: block;

float: left;

}

@media (max-width: 1200px) {

.profile .picture-resume-wrapper {

width: 100%;

}

.profile .picture-resume {

width: 220px;

height: 220px;

background-size: cover;

border-radius: 50%;

margin-right: 0px;

display: table;

position: relative;

vertical-align: middle;

}

.profile .picture-resume span {

display: table-cell;

vertical-align: middle;

position: relative;

margin: 0 auto;

z-index: 10;

text-align: center;

}

.profile .picture-resume img {

border-radius: 50%;

width: 130px;

}

@media (max-width: 1500px) {

.profile .picture-resume img {

width: 80px;

}

@media (max-width: 1200px) {

.profile .picture-resume img {

width: 120px;

height: 120px;

}

@media (max-width: 1500px) {

.profile .picture-resume {

width: 150px;

height: 150px;

}

@media (max-width: 1200px) {

.profile .picture-resume {

width: 200px;

height: 200px;

}

@media (max-width: 450px) {

.profile .picture-resume {

width: 180px;

height: 180px;

}

.profile .contact-info {

margin-top: 100px;

font-weight: 300;

}

@media (max-width: 1200px) {

.profile .contact-info {

margin-top: 70px;

}

@media (max-width: 450px) {

.profile .contact-info {

margin-top: 50px;

}

.profile .list-titles {

float: left;

text-align: left;

font-weight: 600;

width: 40%;

color: #4a4e51;

}

.profile .list-content {

float: left;

width: 60%;

text-align: left;

font-weight: 300;

}

.profile .contact-presentation {

text-align: left;

font-weight: 300;

margin-top: 100px;

margin-bottom: 100px;

}

@media (max-width: 1200px) {

.profile .contact-presentation {

margin-top: 70px;

margin-bottom: 70px;

}

@media (max-width: 850px) {

.profile .contact-presentation {

margin-top: 50px;

margin-bottom: 50px;

}

.profile svg {

width: 100%;

position: absolute;

top: 0;

left: 0;

}

.profile .st0, .profile .st1 {

fill: #66cc99;

}

.experience {

background: #3d3e42;

width: 60%;

float: left;

position: relative;

color: #9099a0;

font-weight: 300;

min-height: 100%;

min-height: 100vh;

}

@media (max-width: 850px) {

.experience {

width: 100%;

}

.experience h3.experience-title {

color: #66cc99;

text-align: left;

text-transform: uppercase;

font-size: 1.2em;

margin-bottom: 20px;

font-weight: 400;

}

.experience .company-wrapper {

width: 30%;

float: left;

text-align: left;

padding-right: 5%;

margin-bottom: 60px;

}

@media (max-width: 450px) {

.experience .company-wrapper {

width: 100%;

margin-bottom: 20px;

}

.experience .job-wrapper {

width: 70%;

float: left;

text-align: left;

padding-right: 5%;

margin-bottom: 60px;

}

@media (max-width: 450px) {

.experience .job-wrapper {

width: 100%;

margin-bottom: 40px;

}

.experience .experience-title {

color: white;

margin-bottom: 15px;

}

.section-padding {

padding: 60px 60px 40px 40px;

}

@media (max-width: 850px) {

.section-padding {

padding: 80px 15% 40px 10%;

}

@media (max-width: 450px) {

.section-padding {

padding: 40px 10% 20px 5%;

}

.section-wrapper {

width: 50%;

float: left;

text-align: left;

color: #9099a0;

font-weight: 300;

margin-bottom: 20px;

}

@media (max-width: 450px) {

.section-wrapper {

width: 100%;

}

.section-wrapper:nth-child(3) {

padding-right: 8%;

}

.section-wrapper h3.section-title {

color: #66cc99;

text-align: left;

text-transform: uppercase;

font-size: 1.2em;

margin-bottom: 20px;

font-weight: 400;

}

.section-wrapper .skill-percentage {

margin-bottom: 10px;

position: relative;

}

.section-wrapper .skill-percentage::after {

content: "";

width: 100%;

height: 6px;

background: #4a4e51;

display: block;

margin-top: 3px;

}

.section-wrapper .skill-percentage::before {

content: "";

height: 6px;

background: #66cc99;

position: absolute;

margin-top: 3px;

bottom: 0;

}

.section-wrapper .skill-percentage:nth-child(1)::before {

width: 80%;

-webkit-animation: skill_1 0.6s ease;

animation: skill_1 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(2)::before {

width: 90%;

-webkit-animation: skill_2 0.6s ease;

animation: skill_2 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(3)::before {

width: 50%;

-webkit-animation: skill_3 0.6s ease;

animation: skill_3 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(4)::before {

width: 60%;

-webkit-animation: skill_4 0.6s ease;

animation: skill_4 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(5)::before {

width: 70%;

-webkit-animation: skill_5 0.6s ease;

animation: skill_5 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(6)::before {

width: 70%;

-webkit-animation: skill_6 0.6s ease;

animation: skill_6 0.6s ease;

}

.section-wrapper .skill-percentage:nth-child(7)::before {

width: 70%;

-webkit-animation: skill_6 0.6s ease;

animation: skill_6 0.6s ease;

}

@-webkit-keyframes skill_1 {

from {

width: 0%;

}

to {

width: 80%;

}

@keyframes skill_1 {

from {

width: 0%;

}

to {

width: 80%;

}

@-webkit-keyframes skill_2 {

from {

width: 0%;

}

to {

width: 90%;

}

@keyframes skill_2 {

from {

width: 0%;

}

to {

width: 90%;

}

@-webkit-keyframes skill_3 {

from {

width: 0%;

}

to {

width: 50%;

}

@keyframes skill_3 {

from {

width: 0%;

}

to {

width: 50%;

}

@-webkit-keyframes skill_4 {

from {

width: 0%;

}

to {

width: 60%;

}

@keyframes skill_4 {

from {

width: 0%;

}

to {

width: 60%;

}

@-webkit-keyframes skill_5 {

from {

width: 0%;

}

to {

width: 70%;

}

@keyframes skill_5 {

from {

width: 0%;

}

to {

width: 70%;

}

@-webkit-keyframes skill_6 {

from {

width: 0%;

}

to {

width: 70%;

}

@keyframes skill_6 {

from {

width: 0%;

}

to {

width: 70%;

}

@-webkit-keyframes skill_7 {

from {

width: 0%;

}

to {

width: 70%;

}

@keyframes skill_7 {

from {

width: 0%;

}

to {

width: 70%;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var select = function(s) {
  return document.querySelector(s);
}

function randomBetween(min,max)
{
    var number = Math.floor(Math.random()*(max-min+1)+min);
  
    if ( number !== 0 ){
      return number;
    }else {
      return 0.5;
    }
}

var tl = new TimelineMax();

for(var i = 0; i < 20; i++){

  var t = TweenMax.to(select('.bubble' + i), randomBetween(1, 1.5), {
    x: randomBetween(12, 15) * (randomBetween(-1, 1)),
    y: randomBetween(12, 15) * (randomBetween(-1, 1)), 
    repeat:-1,
    repeatDelay:randomBetween(0.2, 0.5),
    yoyo:true,
    ease:Elastic.easeOut.config(1, 0.5)
  })

  tl.add(t, (i+1)/0.6)
}

tl.seek(50);

// Code By Webdevtrick ( https://webdevtrick.com )

var select = function(s) {

return document.querySelector(s);

}

function randomBetween(min,max)

{

var number = Math.floor(Math.random()*(max-min+1)+min);

if ( number !== 0 ){

return number;

}else {

return 0.5;

}

var tl = new TimelineMax();

for(var i = 0; i < 20; i++){

var t = TweenMax.to(select('.bubble' + i), randomBetween(1, 1.5), {

x: randomBetween(12, 15) * (randomBetween(-1, 1)),

y: randomBetween(12, 15) * (randomBetween(-1, 1)),

repeat:-1,

repeatDelay:randomBetween(0.2, 0.5),

yoyo:true,

ease:Elastic.easeOut.config(1, 0.5)

})

tl.add(t, (i+1)/0.6)

}

tl.seek(50);

That’s It. Now you have successfully created Responsive Resume Template With HTML and CSS, Personal Resume Design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

Raj May 2, 2020 At 6:14 am

Nice Article.

Reply
James August 26, 2021 At 1:16 pm

Awesome Tuts

Reply
uwabor June 11, 2022 At 5:23 am

the skills part doesn’t move i think you should check the Javascript because from the demo video it was moving.

Reply

Responsive Resume Template With HTML and CSS | Personal Resume

Preview Of Personal Resume

Responsive Resume Template Source Code

3 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY