Skip to content

Commit

Permalink
初步做成
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yanghuoshan
Yanghuoshan committed Jul 13, 2023
1 parent b5be6a1 commit 8bb1b88
Show file tree
Hide file tree
Showing 94 changed files with 9,954 additions and 6 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# vCard3
有个性的简历网页模板，用于个人主页，个人网站
297 changes: 297 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>vCard - About</title>

<!-- Meta Data -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<meta name="author" content="ArtTemplate" />
<meta name="description" content="vCard" />

<!-- Twitter data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ArtTemplates">
<meta name="twitter:title" content="vCard">
<meta name="twitter:description" content="vCard">
<meta name="twitter:image" content="assets/images/social.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="ArtTemplate" />
<meta property="og:type" content="website" />
<meta property="og:url" content="your url website" />
<meta property="og:image" content="assets/images/social.jpg" />
<meta property="og:description" content="vCard" />
<meta property="og:site_name" content="vCard" />

<!-- Favicons -->
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
<link rel="shortcut icon" href="assets/images/favicons/favicon.png" type="image/png">

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="assets/styles/style.css"/>

<link rel="stylesheet" type="text/css" href="assets/demo/style-demo.css"/>

</head>
<body>
<!-- Preloader -->
<div class="preloader">
<div class="preloader__wrap">
<div class="circle-pulse">
<div class="circle-pulse__1"></div>
<div class="circle-pulse__2"></div>
</div>
<div class="preloader__progress"><span></span></div>
</div>
</div>

<main class="main">
<!-- Header Image -->
<div class="header-image">
<div class="js-parallax" style="background-image: url(assets/img/image_header.jpg);"></div>
</div>

<div class="container gutter-top">
<!-- Header -->
<header class="header box">
<div class="header__left">
<div class="header__photo">
<img class="header__photo-img" src="assets/img/main-photo.svg" alt="Ronald Robertson">
</div>
<div class="header__base-info">
<h4 class="title titl--h4">Ronald Robertson</h4>
<div class="status">Creative Director</div>
<ul class="header__social">
<li><a href="https://www.facebook.com"><i class="font-icon icon-facebook1"></i></a></li>
<li><a href="https://www.twitter.com"><i class="font-icon icon-twitter1"></i></a></li>
<li><a href="https://www.instagram.com"><i class="font-icon icon-instagram1"></i></a></li>
</ul>
</div>
</div>
<div class="header__right">
<ul class="header__contact">
<li><span class="overhead">Email</span>[email protected]</li>
<li><span class="overhead">Phone</span>+1 (070) 123–8459</li>
</ul>
<ul class="header__contact">
<li><span class="overhead">Birthday</span>17 March, 1995</li>
<li><span class="overhead">Location</span>San-Francisco, USA</li>
</ul>
</div>
</header>

<div class="row sticky-parent">
<!-- Sidebar nav -->
<aside class="col-12 col-md-12 col-lg-2">
<div class="sidebar box sticky-column">
<ul class="nav">
<li class="nav__item"><a class="active" href="index.html"><i class="icon-user"></i>About</a></li>
<li class="nav__item"><a href="resume.html"><i class="icon-file-text"></i>Resume</a></li>
<li class="nav__item"><a href="works.html"><i class="icon-codesandbox"></i>Works</a></li>
<li class="nav__item"><a href="blog.html"><i class="icon-book-open"></i>Blog</a></li>
<li class="nav__item"><a href="contact.html"><i class="icon-book"></i>Contact</a></li>
</ul>
</div>
</aside>

<!-- Content -->
<div class="col-12 col-md-12 col-lg-10">
<div class="box box-content">
<!-- About -->
<div class="pb-0 pb-sm-2">
<h1 class="title title--h1 first-title title__separate">About Me</h1>
<p>I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.</p>
<p>My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.</p>
</div>

<!-- What -->
<div class="mt-1">
<h2 class="title title--h3">What I'm Doing</h2>
<div class="row">
<!-- Case Item -->
<div class="col-12 col-lg-6">
<div class="case-item">
<img class="case-item__icon" src="assets/icons/icon-design.svg" alt="" />
<div>
<h3 class="title title--h4">Web Design</h3>
<p class="case-item__caption">The most modern and high-quality design made at a professional level.</p>
</div>
</div>
</div>

<!-- Case Item -->
<div class="col-12 col-lg-6">
<div class="case-item">
<img class="case-item__icon" src="assets/icons/icon-dev.svg" alt="" />
<div>
<h3 class="title title--h4">Web Development</h3>
<p class="case-item__caption">High-quality development of sites at the professional level.</p>
</div>
</div>
</div>

<!-- Case Item -->
<div class="col-12 col-lg-6">
<div class="case-item">
<img class="case-item__icon" src="assets/icons/icon-app.svg" alt="" />
<div>
<h3 class="title title--h4">Mobile Apps</h3>
<p class="case-item__caption">Professional development of applications for iOS and Android.</p>
</div>
</div>
</div>

<!-- Case Item -->
<div class="col-12 col-lg-6">
<div class="case-item">
<img class="case-item__icon" src="assets/icons/icon-photo.svg" alt="" />
<div>
<h3 class="title title--h4">Photography</h3>
<p class="case-item__caption">I make high-quality photos of any category at a professional level.</p>
</div>
</div>
</div>
</div>
</div>

<!-- Testimonials -->
<div class="mt-2">
<h2 class="title title--h3">Testimonials</h2>
<div class="swiper-container js-carousel-review">
<div class="swiper-wrapper">
<!-- Item review -->
<div class="swiper-slide review-item">
<svg class="avatar avatar--80" viewBox="0 0 84 84">
<g class="avatar__hexagon">
<image xlink:href="assets/img/avatar-2.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="review-item__textbox">
<h4 class="title title--h5">Daniel Lewis</h4>
<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
</div>
</div>

<!-- Item review -->
<div class="swiper-slide review-item">
<svg class="avatar avatar--80" viewBox="0 0 84 84">
<g class="avatar__hexagon">
<image xlink:href="assets/img/avatar-3.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="review-item__textbox">
<h4 class="title title--h5">Jessica Miller</h4>
<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
</div>
</div>

<!-- Item review -->
<div class="swiper-slide review-item">
<svg class="avatar avatar--80" viewBox="0 0 84 84">
<g class="avatar__hexagon">
<image xlink:href="assets/img/avatar-4.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="review-item__textbox">
<h4 class="title title--h5">Tanya Ruiz</h4>
<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
</div>
</div>

<!-- Item review -->
<div class="swiper-slide review-item">
<svg class="avatar avatar--80" viewBox="0 0 84 84">
<g class="avatar__hexagon">
<image xlink:href="assets/img/avatar-5.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="review-item__textbox">
<h4 class="title title--h5">Thomas Castro</h4>
<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
</div>
</div>
</div>

<div class="swiper-pagination"></div>
</div>
</div>

<!-- Clients -->
<div class="mt-4">
<h2 class="title title--h3">Clients</h2>

<div class="swiper-container js-carousel-clients">
<div class="swiper-wrapper">
<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
</div>

<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
</div>

<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-3.svg" alt="Logo" /></a>
</div>

<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-4.svg" alt="Logo" /></a>
</div>

<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
</div>

<!-- Item client -->
<div class="swiper-slide">
<a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
</div>
</div>

<div class="swiper-pagination"></div>
</div>
</div>
</div>

<!-- Footer -->
<footer class="footer">© 2020 vCard</footer>
</div>
</div>
</div>
</main>

<!-- SVG masks -->
<svg class="svg-defs">
<clipPath id="avatar-box">
<path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
</clipPath>
<clipPath id="avatar-hexagon">
<path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
</clipPath>
</svg>

<div class="back-to-top"></div>



<!-- JavaScripts -->
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="assets/js/common.js"></script>

<script src="assets/demo/plugins-demo.js"></script>
</body>
</html>
Binary file added assets/background_img/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/background_img/2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/background_img/3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/demo/iconClose.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/demo/iconSideMenu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions assets/demo/plugins-demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
/*! Elastic border */
$(".elastic-border").each(function(t){function s(t,i,o){this.x=t,this.ix=t,this.vx=0,this.cx=0,this.y=i,this.iy=i,this.cy=0,this.canvas=o}function h(){var t=$(".elastic-border"),i=t.get(0).getContext("2d");for(a=requestAnimationFrame(h),i.clearRect(0,0,t.width(),t.height()),i.fillStyle=l.leftColor,i.fillRect(0,0,t.width(),t.height()),o=0;o<=l.totalPoints-1;o++)n[o].move();for(i.fillStyle=l.rightColor,i.strokeStyle=l.rightColor,i.lineWidth=1,i.beginPath(),i.moveTo($(window).width()/2,0),o=0;o<=l.totalPoints-1;o++)e=n[o],null!=n[o+1]?(e.cx=(e.x+n[o+1].x)/2-1e-4,e.cy=(e.y+n[o+1].y)/2):(e.cx=e.ix,e.cy=e.iy),i.bezierCurveTo(e.x,e.y,e.cx,e.cy,e.cx,e.cy);if(i.lineTo($(window).width(),$(window).height()),i.lineTo($(window).width(),0),i.closePath(),i.fill(),l.showIndicators){for(i.fillStyle="#2E2F36",i.beginPath(),o=0;o<=l.totalPoints-1;o++)e=n[o],i.rect(e.x-2,e.y-2,4,4);i.fill(),i.fillStyle="#fff",i.beginPath();for(var o=0;o<=l.totalPoints-1;o++){var e=n[o];i.rect(e.cx-1,e.cy-1,2,2)}i.fill()}}var n=[],a=null,l=new function(){this.totalPoints=2,this.viscosity=10,this.mouseDist=100,this.damping=.05,this.showIndicators=!1,this.leftColor="#ffffff",this.rightColor="#2E2F36"},e=0,r=0,i=0,o=0,c=0,f=0;$(document).on("mousemove",function(t){c=e<t.pageX?1:e>t.pageX?-1:0,r<t.pageY?1:r>t.pageY?-1:0,e=t.pageX,r=t.pageY}),function t(){f=e-i,r-o,i=e,o=r,setTimeout(t,50)}(),s.prototype.move=function(){this.vx+=(this.ix-this.x)/l.viscosity;var t=this.ix-e,i=this.y-r,o=this.canvas.data("gap");(0<c&&e>this.x||c<0&&e<this.x)&&Math.sqrt(t*t)<l.mouseDist&&Math.sqrt(i*i)<o&&(this.vx=f/8),this.vx*=1-l.damping,this.x+=this.vx},$(window).on("resize",function(){!function(){var t=$(".elastic-border");t.get(0).getContext("2d"),cancelAnimationFrame(a),$(".elastic-border").get(0).width=$(window).width(),$(".elastic-border").get(0).height=$(window).height(),n=[];for(var i=t.height()/(l.totalPoints-1),o=$(window).width()/2,e=0;e<=l.totalPoints-1;e++)n.push(new s(o,e*i,t));h(),t.data("gap",i)}()}).trigger("resize")});

$(document).ready(function() {

'use strict';

/* Slide nav */

$('.slideNav').each(function(i) {
var sideNavTl = anime.timeline({autoplay: false});
anime.set('.slideNav', {
translateX: '-100%'
});
anime.set('.slideNav .slideNav__item', {
translateX: '-100%'
});
anime.set('.slideClose', {
translateX: '70'
});
sideNavTl
.add({
targets: '.slideOpen',
duration: 300,
translateX: '-300',
opacity: 0,
easing: 'easeInOutQuart'
})
.add({
targets: '.overlay-slideNav',
opacity: {
value: 1,
duration: 500,
delay: 0
},
zIndex: {
value: 1010,
duration: 1,
delay: 0
}
},'-=300')
.add({
targets: '.slideNav',
translateX: 0,
duration: 500,
easing: 'easeInOutQuart'
},'-=500')
.add({
targets: '.slideClose',
translateX: 0,
opacity: 1,
rotate: 90,
easing: 'easeInOutQuart'
},'-=500')
.add({
targets: '.slideNav .slideNav__item',
duration: 200,
delay: anime.stagger(60),
translateX: 0,
easing: 'easeInOutCirc'
},'-=1000');

$('.btnSlideNav').on('click', function(e) {
e.preventDefault();
if (sideNavTl.began) {
sideNavTl.reverse()
sideNavTl.completed = false;
}
if (sideNavTl.paused) {
sideNavTl.play()
}
});
});

});
Loading

0 comments on commit 8bb1b88

Please sign in to comment.