forked from rocktimsaikia/Contribute-101
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ejs
140 lines (128 loc) · 4.94 KB
/
index.ejs
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contribute-101 | A simple project to help first-time open source contributors</title>
<meta name="description" content="A simple project to help you with your first open source contribution.">
<meta name="keywords" content="contribute101,hacktoberfest,hacktoberfest2020,first-time-contributors">
<meta name="author" content="Rocktim Saikia">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External links-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="/assets/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<!--Navbar starts-->
<nav class="navbar navbar-dark bg-dark">
<a href="#" class="navbar-brand">Contribute101 <i class="fas fa-code-branch"></i></a>
<!-- <img src="/assets/hacktoberfest.svg" alt="hacktoberfest logo" height="35px" /> -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link text-light" href="https://github.com/RocktimSaikia/Contribute-101" target="_blank">Github <i
class="fab fa-github"></i></a>
</li>
</ul>
</nav>
<!--Navbar starts-->
<!--Hero page starts-->
<div class="hero">
<div id="hero-page">
<h1>Contribute 101 🎉</h1>
<p>
Contribute-101 is a simple project to help and encourage new <br>
developres to get familiar with open soure contributions.
</p>
<a class="getStarted" href="https://github.com/RocktimSaikia/Contribute-101">Get started 🚀</a>
<!-- <h3>
Hacktoberfest 2019 has ended !
</h3>
<h4>Congrats to everyone who participated 🎉</h4>
<h4>See you in 2020 🚀</h4> -->
<!-- <div id="countdown">
<h2 class="countdown-title">Hacktoberfest live countdown ⏲️</h2>
<div class="countdown-timer">
<div><span id="days">10</span><span>DAYS</span></div>
<div><span id="hours">20</span><span>HOURS</span></div>
<div><span id="min">09</span><span>MINUTES</span></div>
<div><span id="sec">10</span><span>SECONDS</span></div>
</div>
</div> -->
</div>
</div>
<!-- button to scroll down to the bottom of the page -->
<div id="scroll_down">
<button class="scroll_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<!--Hero page starts-->
<div class="cards-wrapper">
<h2 class="cards-container-header">Contributors list so far</h2>
<ul class="cards">
<% List.forEach((obj)=>{%>
<div class="info_card" data-tilt>
<div class="inner-border">
<li>
<div class="img-wrapper">
<img class="lazy" data-src="https://avatars.githubusercontent.com/<%=obj.github_username%>"
onerror="this.src='https://avatars.githubusercontent.com/404'" />
</div>
<div class="social-row">
<a href="https://github.com/<%=obj.github_username%>" class="social-media col" target="_blank"
style="float: left">
<i class="fab fa-github"></i>
</a>
<a href="https://twitter.com/<%=obj.twitter_username%>" class="social-media col" target="_blank"
style="float: right">
<i class="fab fa-twitter"></i>
</a>
</div>
<div>
<h4><%=obj.name%></h4>
<div class="info-wrapper">
<% if (obj.role){ %>
<p class="role"><%=obj.role%></p>
<% } else { %>
<p class="role">To be filled</p>
<% } %>
<p class="country">
<i class="fas fa-globe-americas"></i>
<% if(obj.country.toLowerCase()=='united states of america'){%>
<%='USA'%> <%}else{%> <%=obj.country%> <%} %>
</p>
</div>
</div>
<div class="tech-stack">
<ul>
<% obj.tech_stack.slice(0,3).map(i=>{%>
<li><%= i %></li>
<%})%>
</ul>
</div>
</li>
</div>
</div>
<%}) %>
</ul>
</div>
<!-- button to scroll up to the top of the page -->
<div id="scroll_up">
<button class="scroll_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
</svg>
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/vendor/tilt.jquery.js"></script>
<script src="/js/index.js"></script>
<script src="/js/lazy-loading.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="/reload/reload.js"></script>
</body>
</html>