Skip to content

Commit 78abb9a

Browse files
darshildpateldarshildpatel
committed
added header
1 parent 1c36c97 commit 78abb9a

File tree

806 files changed

+99936
-170
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

806 files changed

+99936
-170
lines changed

‎css/agency.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/particle.css

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body {
2+
margin: 0;
3+
font: normal 75% Arial, Helvetica, sans-serif;
4+
}
5+
canvas {
6+
display: block;
7+
vertical-align: bottom;
8+
} /* ---- particles.js container ---- */
9+
#particles-js {
10+
position: absolute;
11+
width: 100%;
12+
height: 100%;
13+
background-color: #b61924;
14+
background-image: url("");
15+
background-repeat: no-repeat;
16+
background-size: cover;
17+
background-position: 50% 50%;
18+
} /* ---- stats.js ---- */
19+
.count-particles {
20+
background: #000022;
21+
position: absolute;
22+
top: 48px;
23+
left: 0;
24+
width: 80px;
25+
color: #13e8e9;
26+
font-size: 0.8em;
27+
text-align: left;
28+
text-indent: 4px;
29+
line-height: 14px;
30+
padding-bottom: 2px;
31+
font-family: Helvetica, Arial, sans-serif;
32+
font-weight: bold;
33+
}
34+
.js-count-particles {
35+
font-size: 1.1em;
36+
}
37+
#stats,
38+
.count-particles {
39+
-webkit-user-select: none;
40+
margin-top: 5px;
41+
margin-left: 5px;
42+
}
43+
#stats {
44+
border-radius: 3px 3px 0 0;
45+
overflow: hidden;
46+
}
47+
.count-particles {
48+
border-radius: 0 0 3px 3px;
49+
}

‎img/header-bg.jpg

-746 KB
Binary file not shown.

‎img/header-original.jpg

-233 KB
Binary file not shown.

‎index.html

Lines changed: 52 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,14 @@
2323

2424
<!-- Custom styles for this template -->
2525
<link href="css/agency.min.css" rel="stylesheet">
26+
<link href="css/particle.css" rel="stylesheet">
2627

2728
</head>
2829

2930
<body id="page-top">
3031

3132
<!-- Navigation -->
32-
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
33+
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav" style="font-size: 1rem;">
3334
<div class="container">
3435
<a class="navbar-brand js-scroll-trigger" href="#page-top">Darshil Patel</a>
3536
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
@@ -60,45 +61,58 @@
6061
</div>
6162
</nav>
6263

63-
<!-- Header -->
64+
65+
<!-- Header -->
66+
<!-- particles.js container -->
6467
<header class="masthead">
65-
<div class="container">
66-
<div class="intro-text">
67-
<div class="intro-lead-in">Hey There! This is Darshil.</div>
68-
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
69-
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
70-
</div>
71-
<div>
72-
<ul class="list-inline social-buttons">
73-
<li class="list-inline-item">
74-
<a href="https://www.facebook.com/darshil.patel.22">
75-
<i class="fa fa-facebook">
76-
</i>
77-
</a>
78-
</li>
79-
<li class="list-inline-item">
80-
<a href="https://www.linkedin.com/in/darshil-patel-2810/">
81-
<i class="fa fa-linkedin">
82-
</i>
83-
</a>
84-
</li>
85-
<li class="list-inline-item">
86-
<a href="https://github.com/darshildpatel">
87-
<i class="fa fa-github">
88-
</i>
89-
</a>
90-
</li>
91-
<li class="list-inline-item">
92-
<a href="https://www.instagram.com/darshil.1993/?hl=en">
93-
<i class="fa fa-instagram">
94-
</i>
95-
</a>
96-
</li>
97-
</ul>
98-
</div>
68+
<div id="particles-js" style="height: 900px;">
69+
70+
</div> <!-- stats - count particles -->
71+
<!-- <div class="count-particles"> <span class="js-count-particles">--</span> particles </div> -->
72+
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
73+
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib -->
74+
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
75+
<script src="js/particle.js"></script>
76+
77+
78+
<div class="container" style="position: relative; pointer-events: none;">
79+
<div class="intro-text">
80+
<div class="intro-lead-in">Hey There! This is Darshil.</div>
81+
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
82+
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
83+
</div>
84+
<div>
85+
<ul class="list-inline social-buttons">
86+
<li class="list-inline-item">
87+
<a href="https://www.facebook.com/darshil.patel.22">
88+
<i class="fa fa-facebook">
89+
</i>
90+
</a>
91+
</li>
92+
<li class="list-inline-item">
93+
<a href="https://www.linkedin.com/in/darshil-patel-2810/">
94+
<i class="fa fa-linkedin">
95+
</i>
96+
</a>
97+
</li>
98+
<li class="list-inline-item">
99+
<a href="https://github.com/darshildpatel">
100+
<i class="fa fa-github">
101+
</i>
102+
</a>
103+
</li>
104+
<li class="list-inline-item">
105+
<a href="https://www.instagram.com/darshil.1993/?hl=en">
106+
<i class="fa fa-instagram">
107+
</i>
108+
</a>
109+
</li>
110+
</ul>
99111
</div>
112+
</div>
100113
</header>
101114

115+
102116
<!-- Education -->
103117
<section id="services">
104118
<div class="container">
@@ -389,7 +403,8 @@ <h4 class="subheading"></h4>
389403
<div class="timeline-image">
390404
<h4>Started
391405
<br>my
392-
<br>Journey!</h4>
406+
<br>Journey!
407+
</h4>
393408
</div>
394409
<div class="timeline-panel">
395410
<div class="timeline-heading">

‎js/particle.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
particlesJS("particles-js", {
2+
particles: {
3+
number: { value: 80, density: { enable: true, value_area: 800 } },
4+
color: { value: "#ffffff" },
5+
shape: {
6+
type: "circle",
7+
stroke: { width: 0, color: "#000000" },
8+
polygon: { nb_sides: 5 },
9+
image: { src: "img/github.svg", width: 100, height: 100 },
10+
},
11+
opacity: {
12+
value: 0.5,
13+
random: false,
14+
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false },
15+
},
16+
size: {
17+
value: 3,
18+
random: true,
19+
anim: { enable: false, speed: 40, size_min: 0.1, sync: false },
20+
},
21+
line_linked: {
22+
enable: true,
23+
distance: 150,
24+
color: "#ffffff",
25+
opacity: 0.4,
26+
width: 1,
27+
},
28+
move: {
29+
enable: true,
30+
speed: 6,
31+
direction: "none",
32+
random: false,
33+
straight: false,
34+
out_mode: "out",
35+
bounce: false,
36+
attract: { enable: false, rotateX: 600, rotateY: 1200 },
37+
},
38+
},
39+
interactivity: {
40+
detect_on: "canvas",
41+
events: {
42+
onhover: { enable: true, mode: "repulse" },
43+
onclick: { enable: true, mode: "push" },
44+
resize: true,
45+
},
46+
modes: {
47+
grab: { distance: 400, line_linked: { opacity: 1 } },
48+
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
49+
repulse: { distance: 200, duration: 0.4 },
50+
push: { particles_nb: 4 },
51+
remove: { particles_nb: 2 },
52+
},
53+
},
54+
retina_detect: true,
55+
});
56+
// var count_particles, stats, update;
57+
// stats = new Stats();
58+
// stats.setMode(0);
59+
// stats.domElement.style.position = "absolute";
60+
// stats.domElement.style.left = "0px";
61+
// stats.domElement.style.top = "0px";
62+
// document.body.appendChild(stats.domElement);
63+
// count_particles = document.querySelector(".js-count-particles");
64+
// update = function () {
65+
// stats.begin();
66+
// stats.end();
67+
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
68+
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
69+
// }
70+
// requestAnimationFrame(update);
71+
// };
72+
// requestAnimationFrame(update);

‎node_modules/.bin/atob

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/.bin/atob.cmd

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/.bin/atob.ps1

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎node_modules/.bin/browser-sync

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)