-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
174 lines (147 loc) · 5.23 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<title>About Me</title>
</head>
<body>
<div class="home">
<a href="index.html">
HOME
</a>
</div>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">
Home
</a>
</li>
<li class="nav-item current">
<a href="about.html" class="nav-link">
About Me
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link">
How To Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="about">
<h1 class="lg-heading">
About
<span class="text-secondary">Me</span>
</h1>
<h2 class="sm-heading">
Let me tell you a few things...
</h2>
<div class="about-info">
<img src="img/portrait.jpg" alt="John Doe" class="bio-image">
<div class="bio">
<!-- <h3 class="text-secondary">BIO</h3> -->
<p id="hover-effect">
Hello viewer, <br>
I'm Shubham and really facinated in doing coding and learing. I want to be Full Stack Developer. I started to learn code from 1st year.
I'm self tought programmer but learn programing from highly rated educator on youtube. I am a person who keeps on experimenting
things to get better result.
Some of things that is love to do is playing games.<br> Thats it about me!!!
</p>
</div>
<div class="job job-1">
<h2 id="tubeLight-1" onmouseover="tubelightOn(this,1)" onmouseout="tubelightOff(this)">Front End Learning</h2>
<!-- <div class="line"></div> -->
<p>
I started to front-end in second years and starts width HTML, CSS.This gives me nice experience
of working on project. I work on front end for 6-7 month learning fancy staff like bootstrap, SASS.
Now, I working on javascript and Reactjs for front-end.
</p>
</div>
<div class="job job-2">
<h2 id="tubeLight-2" onmouseover="tubelightOn(this,2)" onmouseout="tubelightOff(this)">Backend Learning</h2>
<p>
For the Backend dev, I have used php and mysql. for the first time i made login and registration applicattion.
This is gives me a good vision of how projects are made and how crud operation work. Know I'm working on
Node.js, express server for making API.
</p>
</div>
<div class="job job-3" >
<h2 id="tubeLight-3" onmouseover="tubelightOn(this,3)" onmouseout="tubelightOff(this)">Design</h2>
<p>
I work some of design tool like wireframe, gravit for designing. These tools gives very best prototypes
of what you are working on. I just know to use thses tools simply.
</p>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2018
</footer>
<script src="js/main.js"></script>
<script>
// hover-effect in paragraph
const para = document.querySelector('#hover-effect')
var contents = para.innerHTML.split(" ");
var modText = '';
for (var i = 0; i < contents.length; i++) {
modText += '<span onmouseover="changeToBlueColor(this)" onmouseout="changeToBlackColor(this)">' + contents[i] + '</span> ';
}
para.innerHTML = modText;
function changeToBlueColor(e) {
e.classList.add('light');
}
function changeToBlackColor(e) {
e.classList.remove('light')
// console.log(this)
}
// const heading = document.querySelector('#tubeLight-1,#tubeLight-2,#tubeLight-3 ')
// console.log(heading)
// var contents = heading.innerHTML.split(" ");
// var modLight = '';
// for (var i = 0; i < contents.length; i++) {
// modLight += '<span>' + contents[i] + '</span> ';
// }
// heading.innerHTML = modLight;
var toogle=1;
function tubelightOn(x,v) {
if(toogle) {
toogle=0;
var contents = x.innerHTML.split(" ");
var modLight = '';
for (var i = 0; i < contents.length; i++) {
modLight += '<span>' + contents[i] + '</span> ';
}
x.innerHTML = modLight;
}
const a=x.children;
let tm = 600;
for(let i=0;i<a.length;i++) {
setTimeout(()=>{x.children[i].style.color="#fcdd32"}, tm*(i+.09))
}
}
function tubelightOff(x) {
}
</script>
</body>
</html>