-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathframerjs.html
executable file
·152 lines (117 loc) · 6.57 KB
/
framerjs.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nitesh Kumar's Portfolio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<link href="css/base.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="name"><a href="index.html">Nitesh Kumar</a></div>
<ul class="nav">
<a href="mailto:hello@niteshk.com"><li>Email</li></a>
<a href="http://www.niteshk.com/Nitesh_Kumar_resume.pdf" target="blank"><li>Resume</li></a>
<a href="about"><li>About</li></a>
<a href="index"><li>Work</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="project-name">Framer Experiments</div>
<div class="project-desc">
I recently started learning Framer js and I absolutely love it. It gives you a sense of freedom to design anything you can imagine. Here are a few selected experiments that I have put together.
</div>
</div>
</div>
</div>
<div class="ff-jb">
<img class="banner" src="images/banners/framer-banner.png">
</div>
<div class="story">
<div class="container">
<div class="row">
<div class="heading col-md-8 col-md-offset-2">Stretchy Cover Image and Profile Picture Zoom</div>
<p class="text col-md-8 col-md-offset-2">
I prototyped a stretchy cover image that basically scales up and gets blurred on scrolling the content down. Also, if you tap on the the profile picture it enlarges and takes the width of the screen.
</p>
<div class="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="http://share.framerjs.com/yhsm2bfq5tz3/" target="blank">View Source <i class="fa fa-angle-right"></i></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/framerjs/stretch.mov"><video class="story-img no-border" width="90%" height="auto" align="middle" source="" src="images/framerjs/stretch.mov" type="video/mov" autoplay="" loop=""></video></a>
</div>
<div class="heading para-gap col-md-8 col-md-offset-2">Page Control and Indicators</div>
<p class="text col-md-8 col-md-offset-2">
Page control is a very common design element and is used in various cases like user onboarding, instructions and product walkthrough. This prototype lets you swipe horizontally across pages and indicates which page you're on.
</p>
<div class="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="http://share.framerjs.com/wx0jznu84hqq/" target="blank">View Source <i class="fa fa-angle-right"></i></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/framerjs/cards.mov"><video class="story-img no-border" width="90%" height="auto" align="middle" source="" src="images/framerjs/cards.mov" type="video/mov" autoplay="" loop=""></video></a>
</div>
<div class="heading para-gap col-md-8 col-md-offset-2">Card Stack</div>
<p class="text col-md-8 col-md-offset-2">
I prototyped a 3D card stack which essentially is an array of cards. When you swipe a card to left or right the position of all the array items is changed accordingly.
</p>
<div class="text col-md-8 col-md-offset-2 visit-row">
<a class="visit-button" href="http://share.framerjs.com/j9l1kqz6dli0/" target="blank">View Source <i class="fa fa-angle-right"></i></a>
</div>
<div class="col-md-12">
<a class="fancybox-button" rel="fancybox-button" href="images/framerjs/stack.mov"><video class="story-img no-border" width="90%" height="auto" align="middle" source="" src="images/framerjs/stack.mov" type="video/mov" autoplay="" loop=""></video></a>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="project-nav">
<a href="index" class="home-link">HOME</a>
<a href="he" class="proj-nav-btn next"><span class="next-text">NEXT</span><i class="fa fa-long-arrow-right"></i></a>
<a href="attendance" class="proj-nav-btn prev"><i class="fa fa-long-arrow-left"></i><span class="prev-text">PREVIOUS</span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 footer">
<div class = "social">
<a href="https://twitter.com/thatnitesh" target="blank">Twitter</a>
<span class="social-sep">-</span>
<a href="https://medium.com/@thatnitesh" target="blank">Medium</a>
<span class="social-sep">-</span>
<a href="https://www.instagram.com/thatnitesh/" target="blank">Instagram</a>
<span class="social-sep">-</span>
<a href="https://in.linkedin.com/in/nitesh-kumar-86631925" target="blank">LinkedIn</a>
<span class="social-sep">-</span>
<a href="mailto:hello@niteshk.com" target="blank">Email</a>
<br><br>
© 2017
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bottstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js "></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="fancybox/lib/fancybox-load.js"></script>
</body>
</html>