17 |
18 |
19 | 20 | - Start Coding. Make apt commits with proper commit messages. Always use git status to see that you have not made changes on the file you were supposed not to
21 | 22 | - Add all the changes with this command: (git add .). This will add the changes to your present workspace.
23 |
24 | 25 | - Make a commit. This will save a snapshot of your Project.
26 |
27 | 28 | - Push the changes : git push
29 |
30 | 31 | - Once you push the changes to your repo, Go to your forked repository
32 |
33 | 34 | - Click it and you'll be taken to this screen.
35 |
36 | 37 | - Open a pull request by clicking the Create pull request button. This allows the repo's maintainers to reviews your work. From here, they can merge it if it is good, or they may ask you for some changes. 38 | 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Personal-Portfolio 2 | 3 |   4 | 5 |    6 | 7 | ### Website Layout 8 | 9 | 10 | https://user-images.githubusercontent.com/74411873/145658790-95f3c433-8a92-4339-b96c-77777e7d5842.mp4 11 | 12 | 13 | 14 | ### How to go about 15 | This is the basic layout of the website where things need to be replaced with your data and credentials, follow these easy steps given down below to get your website working: 16 | 17 | ## HTML  18 | 19 | - Change the Title of the Web Page to your name 20 | - Go to https://favicon.io to generate favicon for your website 21 | - Go to https://fontawesome.com/ and get your Kit number and replace it in place of `{{YOUR KIT KEY}}` 22 | - Go to https://www.emailjs.com/ and sign up yourself, create Email Service and Email Template. 23 | - Go to https://dashboard.emailjs.com/admin/integration/browser and get your UserID and replace it with `{{YOUR USER KEY}}` 24 | 25 | #### HOME 26 | 27 | - Next, Moving to Home section, here replace `{{YOUR NAME}}` with your full name 28 | 29 | #### ABOUT 30 | 31 | - Replace `P3021961.jpg` with your own professional image 32 | - In Text class, replace `{{YOUR NAME}}` with your full name 33 | - In the Paragraph class, replace 'lorem ipsum' with some proper description about yourself in about 4-5 lines 34 | - Make a google drive folder for putting in the resume and replace `{{GOOGLE DRIVE LINK FOR RESUME}}` with drive link 35 | 36 | #### SERVICES 37 | 38 | - Replace` {{SKILL 1}},{{SKILL 2}},{{SKILL 3}}` with your skills 39 | - Replace the 'lorem ipsum' in all three sections with relevent description of your services 40 | 41 | #### SKILLS 42 | 43 | - Replace 'Lorem Ipsum' with relevent description of your skills . 44 | - In the anchor tag, feel free to redirect the READ MORE button to a suitable website. 45 | - Replace the `` tags with the icons related to your skill set (For icons, checkout - https://icons8.com/) 46 | 47 | #### CONTACT 48 | 49 | - Replace 'Lorem Ipsum' with text of your choice so that users can contact you. 50 | - Replace {`{YOUR NAME}},{{YOUR ADDRESS}},{{YOUR EMAIL}}`with your full name, proximate address and email address. 51 | 52 | #### FOOTER 53 | 54 | - Replace `{{YOUR NAME}}` with your full name 55 | - Replace `{{YOUR LINKEDIN}},{{YOUR GITHUB}},{{YOUR YOUTUBE}}` with links of your linkedin, github and youtube respectively. 56 | 57 | 58 | 59 | 60 | 61 | ## JavaScript  62 | 63 | - Replace `{{SERVICE ID}},{{TEMPLATE ID}}` with the unique IDs that you will get once you Sign Up 64 | 65 | **Service ID** - https://dashboard.emailjs.com/admin, 66 | **Template ID** - https://dashboard.emailjs.com/admin/templates 67 | 68 | - For reference take a look at this video for setting up EmailJS - https://www.youtube.com/watch?v=x7Ewtay0Q78&ab_channel=CodewithVoran 69 | 70 | - Replace `"Your Skill","Your Hobby","Your Passion","Your Proficiency"` with your respective things. 71 | 72 | ## Thank You 73 | 74 | **Hurray! Your personal-portfolio website is up and running, now deploy it on Github Pages and you are good to go, 75 | If you found this helpful, dont forget to 🌟 this repository and share it with others!!** 76 | 77 | ### Contributors 78 | 79 |
84 | 85 | ## Got the swags as a Maintainer 🥳 (22nd March'22) 86 | Thanks to all those who considered contributing to my repository and made this possible! (My First Hacktober 🥇) 87 |  88 | -------------------------------------------------------------------------------- /images/P3021961.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/P3021961.jpg -------------------------------------------------------------------------------- /images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/add.png -------------------------------------------------------------------------------- /images/cd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/cd.png -------------------------------------------------------------------------------- /images/clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/clone.png -------------------------------------------------------------------------------- /images/commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/commit.png -------------------------------------------------------------------------------- /images/create_PR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/create_PR.png -------------------------------------------------------------------------------- /images/create_branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/create_branch.png -------------------------------------------------------------------------------- /images/dark-green-leaves-background-hydrangea-260nw-1699508995.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/dark-green-leaves-background-hydrangea-260nw-1699508995.jpg -------------------------------------------------------------------------------- /images/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/fork.png -------------------------------------------------------------------------------- /images/leaves_bushes_green_174515_3840x2400.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/leaves_bushes_green_174515_3840x2400.jpg -------------------------------------------------------------------------------- /images/open_PR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/open_PR.png -------------------------------------------------------------------------------- /images/push.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/push.png -------------------------------------------------------------------------------- /images/skill-icons/icons8-c++.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-css3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-flutter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-html-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-nodejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-react-native.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/icons8-visual-studio-code-2019.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/skill-icons/node-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rishit30G/Personal-Portfolio/b4db3eb4b449d5f98f7de474237e98a3a07efc6d/images/skill-icons/node-js.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
75 |
81 |
76 |
80 | Hello, my name is
77 | YOUR NAME
78 | Im a
79 |
86 |
103 | About Me
87 |
88 |
102 |
89 | 
90 |
91 |
90 |
92 |
101 |
93 | I'm {{YOUR NAME}} and Im a
94 |
95 | 96 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sunt, ex ad numquam, omnis natus ab a quia architecto provident tenetur nostrum incidunt optio ullam illo accusamus aperiam distinctio cum unde nisi fugiat non. Beatae delectus similique quod tenetur corporis tempora. Itaque doloremque rerum quas et minima iste atque laborum. 97 |
98 | Download 99 | Resume 100 |
108 |
141 | My Services
109 |
110 |
140 |
111 |
119 |
120 |
112 |
113 |
118 | {{SKILL 1}}
114 | 115 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae necessitatibus error eos suscipit culpa, impedit cum corporis dignissimos porro quae deleniti. Mollitia blanditiis, doloremque eius voluptas nam labore eligendi maiores in sed pariatur odit provident qui ad est similique iste. 116 |
117 |
121 |
129 |
130 |
122 |
123 |
128 | {{SKILL 2}}
124 | 125 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt minus dolore aperiam ullam praesentium molestias ipsam recusandae sunt, exercitationem, rerum tempore voluptates quam excepturi laborum maxime fugit iure sed eius neque culpa. Eligendi nostrum fugiat rerum! Magnam molestias a aspernatur? 126 |
127 |
131 |
139 |
132 |
133 |
138 | {{SKILL 3}}
134 | 135 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, quod in ea, molestiae commodi necessitatibus optio, placeat eos impedit temporibus distinctio maxime illum saepe assumenda vero culpa atque et! Magnam eos eaque error voluptatem pariatur quae. Molestiae aperiam labore enim. 136 |
137 |
146 |
My Skills
147 |
148 |
149 |
157 |
150 | My creative skills & experiences.
151 |
152 | 153 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum neque velit, totam exercitationem cum harum error possimus nostrum voluptatibus recusandae? Laborum, velit aperiam! Ex ratione blanditiis assumenda distinctio nesciunt. Voluptatibus! 154 |
155 | Read More 156 |
158 |
174 |
232 |
233 |
245 |
246 |
257 |
258 |
259 |
260 |
261 |
262 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | function sendMail(params){
2 | var tempParams = {
3 | from_name: document.getElementById("fromName").value,
4 | email_sender: document.getElementById("emailSender").value,
5 | subject_sender: document.getElementById("subjectSender").value,
6 | message_sender: document.getElementById("message").value,
7 | };
8 | emailjs.send('{{SERVICE ID}}','{{TEMPLATE ID}}',tempParams)
9 | .then(function(res){
10 | Swal.fire({
11 | position: 'center',
12 | icon: 'success',
13 | title: 'Mail Sent Successfully!',
14 | showConfirmButton: false,
15 | timer: 1500,
16 | });
17 | });
18 | }
19 |
20 | $(document).ready(function () {
21 | $(window).scroll(function () {
22 | if (this.scrollY > 20) {
23 | $(".navbar").addClass("sticky");
24 | } else {
25 | $(".navbar").removeClass("sticky");
26 | }
27 | });
28 | $('.menu-btn').click(function(){
29 | $('.navbar .menu').toggleClass("active");
30 | $('.menu-btn i').toggleClass("active");
31 | });
32 |
33 | // typing animation script
34 | var typed = new Typed(".typing",{
35 | strings: ["Your Skill","Your Hobby","Your Passion","Your Proficiency"],
36 | typeSpeed: 100,
37 | backSpeed: 60,
38 | loop: true,
39 | fadeOut: true,
40 |
41 | });
42 | var typed = new Typed(".typing-2",{
43 | strings: ["Your Skill","Your Hobby","Your Passion","Your Proficiency"],
44 | typeSpeed: 100,
45 | backSpeed: 60,
46 | loop: true,
47 | });
48 | });
49 |
50 | // Scroll to top button script
51 | const btnScrollToTop = document.querySelector("#btnScrollToTop");
52 |
53 | btnScrollToTop.addEventListener("click", function(){
54 | window.scrollTo({
55 | top: 0,
56 | left: 0,
57 | behavior: "smooth"
58 | });
59 | });
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | text-decoration: none;
8 | }
9 | html{
10 | scroll-behavior:smooth;
11 | }
12 |
13 | body{
14 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg") no-repeat center;
15 | background-size: cover;
16 | background-attachment: fixed;
17 | }
18 |
19 | .favicon{
20 | border-radius: 50%;
21 | }
22 | .max-width {
23 | max-width: 1300px;
24 | padding: 0 80px;
25 | margin: auto;
26 | }
27 |
28 |
29 | .navbar {
30 | position: fixed;
31 | width: 100%;
32 | z-index: 999;
33 | padding: 30px 0;
34 | font-family: 'Ubuntu', sans-serif;
35 | transition: all 0.3s ease;
36 | }
37 |
38 | .navbar.sticky {
39 | padding: 30px 0;
40 | box-shadow: 0px 10px 50px 5px #00000038;
41 | }
42 |
43 | .navbar.sticky::before {
44 | content: '';
45 | background: url("images/dark-green-leaves-background-hydrangea-260nw-1699508995.jpg") ;
46 | position: absolute;
47 | opacity: 1;
48 | top: -10px;
49 | left: -10px;
50 | width: 105vw;
51 | height:110%;
52 | z-index: -1;
53 | filter: blur(1.5px);
54 | }
55 |
56 | .navbar .max-width {
57 | display: flex;
58 | align-items: center;
59 | justify-content: space-between;
60 | }
61 |
62 | .navbar .logo a {
63 | color: white;
64 | font-size: 35px;
65 | font-weight: 600;
66 | }
67 |
68 | .navbar .logo a span {
69 | color: #23b410;
70 | transition: all 0.3s ease;
71 | }
72 |
73 | .navbar.sticky .logo a span {
74 | color: white;
75 | }
76 | .navbar .menu ul{
77 |
78 | padding: 0;
79 | list-style: none;
80 | display: table;
81 | width: 600px;
82 | text-align: center;
83 | }
84 | .navbar .menu li {
85 | list-style: none;
86 | display: inline-block;
87 | }
88 |
89 | .navbar .menu li a {
90 |
91 | font-size: 18px;
92 | font-weight: 500;
93 | margin-left: 25px;
94 | transition: color 0.3s;
95 | color: #fff;
96 | text-decoration: none;
97 | display: inline-block;
98 | padding: 15px 20px;
99 | position: relative;
100 | }
101 |
102 | .navbar .menu a:after {
103 | background: none repeat scroll 0 0 transparent;
104 | bottom: 0;
105 | content: "";
106 | display: block;
107 | height: 2px;
108 | left: 50%;
109 | position: absolute;
110 | background: #fff;
111 | transition: width 0.3s ease 0s, left 0.3s ease 0s;
112 | width: 0;
113 | }
114 | .navbar .menu a:hover:after {
115 | width: 100%;
116 | left: 0;
117 | }
118 | .navbar .menu li a:hover {
119 | color: #23b410;
120 | }
121 |
122 | .navbar.sticky .menu li a:hover {
123 | color: white;
124 | }
125 |
126 | .menu-btn{
127 | color: white;
128 | font-size: 30px;
129 | cursor: pointer;
130 | display: none;
131 | }
132 |
133 | .home {
134 | display: flex;
135 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg") no-repeat center;
136 | background-size: cover;
137 | background-attachment: fixed;
138 | height: 100vh;
139 | color: white;
140 | min-height: 500px;
141 | font-family: 'Ubuntu', sans-serif;
142 | }
143 |
144 | .home .max-width {
145 | margin: auto 0 auto 40px;
146 | }
147 |
148 | .home .max-width .home-content{
149 | padding-top: 220px;
150 | }
151 |
152 | .home .home-content .text-1 {
153 | font-size: 27px;
154 | }
155 |
156 | .home .home-content .text-2 {
157 | font-size: 75px;
158 | font-weight: 600;
159 | margin-left: -3px;
160 | }
161 |
162 | .home .home-content .text-3 {
163 | font-size: 40px;
164 | margin: 5px 0;
165 | }
166 |
167 | .home .home-content .text-3 span {
168 | color: #25e70c;
169 | font-weight: 500;
170 | }
171 |
172 | /* all similar styling */
173 | section{
174 | padding: 120px 0;
175 | padding-bottom: 300px;
176 | }
177 | .about, .services, .skills, .contact, footer{
178 | font-family: 'Poppins',sans-serif;
179 | }
180 | .about .about-content, .services .serv-content, .skills .skills-content, .contact, .contact-content{
181 | display: flex;
182 | flex-wrap: wrap;
183 | align-items: center;
184 | justify-content: space-between;
185 | }
186 | section .title{
187 | position: relative;
188 | text-align: center;
189 | color: #23b410;
190 | font-size: 40px;
191 | font-weight: 500;
192 | margin-bottom: 80px;
193 | padding-bottom: 20px;
194 | font-family: 'Ubuntu', sans-serif;
195 | }
196 | section .title::before{
197 | content: "";
198 | position: absolute;
199 | bottom: 0px;
200 | left: 50%;
201 | width: 180px;
202 | height: 3px;
203 | background: green;
204 | transform: translateX(-50%);
205 | }
206 | section .title::after{
207 | position: absolute;
208 | bottom: -14px;
209 | left: 50%;
210 | font-size: 20px;
211 | color: #23b410;
212 | padding: 5px;
213 | background: black;
214 | transform: translateX(-50%);
215 | }
216 | /* about section styling */
217 | .about{
218 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg");
219 | background-size: 2000px;
220 | }
221 | .about .title::after{
222 | content: "Who I am";
223 | }
224 | .about .about-content .left{
225 | width: 45%;
226 | }
227 | .about .about-content .left img{
228 | height: 370px;
229 | width: 370px;
230 | object-fit: cover;
231 | border-radius: 6px;
232 | transition: all 0.3s ease;
233 | }
234 | .about .about-content .left img:hover{
235 | transform: scale(1.05);
236 | }
237 | .about .about-content .right{
238 | width: 55%;
239 | }
240 | .about .about-content .right .text{
241 | color: white;
242 | font-size: 25px;
243 | font-weight: 600;
244 | margin-bottom: 10px;
245 | }
246 | .about .about-content .right .text span{
247 | color: #23b410;
248 | }
249 | .about .about-content .right .paragraph{
250 | color: white;
251 | font-size: 18px;
252 | }
253 | .about .about-content .right .p{
254 | text-align: justify;
255 | }
256 | .about .about-content .right a{
257 | display: inline-block;
258 | background: none;
259 | color: #23b410;
260 | margin-top: 20px;
261 | font-size: 20px;
262 | font-weight: 500;
263 | padding: 5px 30px;
264 | border-radius: 6px;
265 | border: 2px solid #23b410;
266 | transition: all 0.3s ease;
267 | }
268 | .about .about-content .right a:hover{
269 | color: white;
270 | background:none;
271 | }
272 |
273 | /* services styling */
274 | .services{
275 | color: white;
276 | background:black;
277 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg");
278 | background-size: 2000px;
279 | }
280 | .services .title::before{
281 | background: white;
282 | }
283 | .services .title::after{
284 | background: black;
285 | content: "What I provide";
286 | }
287 | .services .serv-content .card{
288 | width: calc(33% - 20px);
289 | text-align:center;
290 | background:none;
291 | border-radius: 6px;
292 | padding: 20px 25px;
293 | cursor: pointer;
294 | transition: all 0.3s ease;
295 | }
296 | .services .serv-content .card:hover {
297 | background: none;
298 | }
299 | .services .serv-content .card .box{
300 | transition: all 0.3s ease;
301 | }
302 | .services .serv-content .card:hover .box{
303 | transform: scale(1.05);
304 | }
305 | .services .serv-content .card i{
306 | font-size: 50px;
307 | color: #23b410;
308 | transition:color 0.3s ease;
309 | }
310 | .services .serv-content .card:hover i{
311 | color: #23b410;
312 | }
313 | .services .serv-content .card .text{
314 | font-size: 25px;
315 | font-weight: 500;
316 | margin: 10px 0 7px 0;
317 | }
318 |
319 | /* Skills Section Styling */
320 |
321 | .skills{
322 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg");
323 | background-size: 2000px;
324 | }
325 |
326 | .skills .title::after{
327 | content: "What I Know";
328 | }
329 |
330 | .skills .skills-content .column{
331 | width: calc(50% - 30px);
332 | }
333 |
334 | .skills .skills-content .left .text{
335 | color: white;
336 | font-size: 25px;
337 | font-weight: 600;
338 | margin-bottom: 10px;
339 | }
340 | .skills .skills-content .left .paragraph-2{
341 | font-size: 17px;
342 | color: white;
343 | }
344 | .skills .skills-content .left .p{
345 | text-align: justify;
346 | }
347 | .skills .skills-content .left a{
348 | display: inline-block;
349 | background: none;
350 | color: #23b410;
351 | margin-top: 20px;
352 | font-size: 20px;
353 | font-weight: 500;
354 | padding: 5px 30px;
355 | border-radius: 6px;
356 | border: 2px solid #23b410;
357 | transition: all 0.3s ease;
358 | }
359 | .skills .skills-content .left a:hover{
360 | color:white;
361 | }
362 | .skills .skills-content .right .icons{
363 | font-size: 50px;
364 | color: white;
365 | display: flex;
366 | margin-bottom: 5px;
367 | align-items: center;
368 | justify-content: space-between;
369 | transition: all 0.3s ease;
370 | padding-top: 20px;
371 | }
372 | .skills .skills-content .right .icons img{
373 | transition: all 0.3s ease;
374 | color: white;
375 | }
376 | .skills .skills-content .right .icons img:hover{
377 | transform: scale(1.20);
378 | border-radius: 10px;
379 | }
380 | #css-icon:hover{
381 | -webkit-filter: drop-shadow(0 0 10px #264de4);
382 | filter: drop-shadow(0 0 10px #264de4);
383 | }
384 | #js-icon:hover{
385 | -webkit-filter: drop-shadow(0 0 10px #f0db4f);
386 | filter: drop-shadow(0 0 10px #f0db4f);
387 | }
388 | #react-icon:hover{
389 | -webkit-filter: drop-shadow(0 0 10px #61DBFB);
390 | filter: drop-shadow(0 0 10px #61DBFB);
391 | }
392 | #flutter-icon:hover{
393 | -webkit-filter: drop-shadow(0 0 10px #44d1fd);
394 | filter: drop-shadow(0 0 10px #44d1fd);
395 | }
396 | #html-icon:hover{
397 | -webkit-filter: drop-shadow(0 0 10px #e34c26);
398 | filter: drop-shadow(0 0 10px #e34c26);
399 | }
400 | #vscode-icon:hover{
401 | -webkit-filter: drop-shadow(0 0 10px #0078d7);
402 | filter: drop-shadow(0 0 10px #0078d7);
403 | }
404 | #nodejs-icon:hover{
405 | -webkit-filter: drop-shadow(0 0 10px #3c873a);
406 | filter: drop-shadow(0 0 10px #3c873a);
407 | }
408 | #cpp-icon:hover{
409 | -webkit-filter: drop-shadow(0 0 10px #0080ff);
410 | filter: drop-shadow(0 0 10px #0080ff);
411 | }
412 |
413 |
414 | /* .skills .skills-content .right .bars{
415 | color: white;
416 | margin-bottom: 15px;
417 | }
418 | .skills .skills-content .right .info{
419 | display: flex;
420 | margin-bottom: 5px;
421 | align-items: center;
422 | justify-content: space-between;
423 | } */
424 | /* .skills .skills-content .right span{
425 | font-weight: 500;
426 | font-size: 18px;
427 | }
428 | .skills .skills-content .right .line{
429 | height: 5px;
430 | width: 100%;
431 | background: lightgrey;
432 | position: relative;
433 | }
434 | .skills .skills-content .right .line::before{
435 | content:"";
436 | position: absolute;
437 | height: 100%;
438 | left: 0;
439 | top: 0;
440 | background: #23b410;
441 | }
442 | .skills .skills-content .right .html::before{
443 | width: 90%;
444 | }
445 | .skills .skills-content .right .css::before{
446 | width: 80%;
447 | }
448 | .skills .skills-content .right .flutter::before{
449 | width: 70%;
450 | } */
451 |
452 | /* contact section styling */
453 | .contact{
454 | background: url("images/leaves_bushes_green_174515_3840x2400.jpg");
455 | background-size: 2000px;
456 | }
457 | .contact .title::after{
458 | content: "Get in touch";
459 | }
460 |
461 | .contact .contact-content .column{
462 | width: calc(50% - 30px);
463 | }
464 | .contact .contact-content .text{
465 | color: white;
466 | font-size: 20px;
467 | font-weight: 600;
468 | margin-bottom: 10px;
469 | }
470 | .contact .contact-content .left p{
471 | text-align: justify;
472 | }
473 | .contact .contact-content .left .paragraph-3{
474 | font-size: 18px;
475 | color: white;
476 | }
477 | .contact .contact-content .left .icons{
478 | margin: 10px 0;
479 | }
480 | .contact .contact-content .row{
481 | display: flex;
482 | height: 65px;
483 | align-items: center;
484 | }
485 | .contact .contact-content .row .info{
486 | margin-left: 30px;
487 | }
488 | .contact .contact-content .row i{
489 | font-size: 25px;
490 | color: #23b410;
491 | }
492 | .contact .contact-content .info .head{
493 | color: white;
494 | font-weight: 500;
495 | }
496 | .contact .contact-content .info .sub-title{
497 | color: white;
498 | }
499 | .contact .right form .fields{
500 | display: flex;
501 | }
502 | .contact .right form .field,.contact .right form .fields .field{
503 | height: 45px;
504 | width: 100%;
505 | margin-bottom: 15px;
506 | }
507 |
508 | .contact .right form .textarea{
509 | height: 80px;
510 | width: 100%;
511 |
512 | }
513 | .contact .right form .name{
514 | margin-right: 10px;
515 | }
516 |
517 | .contact .right form .email{
518 | margin-left: 10px;
519 | }
520 |
521 | .contact .right form .field input,.contact .right form .textarea textarea{
522 | height: 100%;
523 | width: 100%;
524 | border:2px solid #23b410;
525 | color: white;
526 | border-radius: 6px;
527 | outline: none;
528 | padding: 0 15px;
529 | font-size: 17px;
530 | background: none;
531 | font-family: 'Poppins', sans-serif;
532 | }
533 | .contact .right form .textarea textarea{
534 | padding-top: 10px;
535 | resize: none;
536 | }
537 | .contact .right form .button{
538 | height: 47px;
539 | width: 170px;
540 | }
541 |
542 | .contact .right form .button button{
543 | width: 100%;
544 | height: 100%;
545 | border: 0.1px solid #23b410;
546 | background: none;
547 | color: white;
548 | font-size: 20px;
549 | font-weight: 500;
550 | border-radius: 6px;
551 | transition: all 0.3s ease;
552 | }
553 | .contact .right form .button button:hover{
554 | background: none;
555 | color: #23b410;
556 | }
557 |
558 | /* footer styling */
559 | footer{
560 | background: url("images/dark-green-leaves-background-hydrangea-260nw-1699508995.jpg") ;
561 | padding: 20px 23px;
562 | color: white;
563 | }
564 |
565 | footer .text-center {
566 | text-align: center !important; }
567 |
568 | footer span a{
569 | color: #23b410;
570 | transition: color 0.3s ease;
571 | }
572 | footer i{
573 | padding-left: 10px;
574 | font-size: 25px;;
575 | color: #23b410;
576 | transition: color 0.3s ease;
577 | }
578 | footer span a:hover{
579 | color: white;
580 | }
581 | footer i{
582 | font-size: 27px;
583 | }
584 | footer i:hover{
585 | color: white;
586 | }
587 |
588 | /* CSS for scroll to top button */
589 |
590 | #btnScrollToTop{
591 | position: fixed;
592 | right: 10px;
593 | bottom: 10px;
594 | width: 50px;
595 | height: 50px;
596 | border-radius: 50%;
597 | background: #124429;
598 | box-shadow: 0 0 10px rgba(0, 0, 0,0.1);
599 | color: #25e70c;
600 | border: none;
601 | outline: none;
602 | cursor: pointer;
603 | z-index:9999;
604 | }
605 |
606 | #btnScrollToTop:active, #btnScrollToTop:hover{
607 | background: #124429;
608 | box-shadow: 0px 0px 20px black;
609 | }
610 |
611 | .progress-container {
612 | width: 100%;
613 | height: 4px;
614 | top: 0;
615 | position: absolute;
616 | background: transparent;
617 | }
618 |
619 | .progress-bar {
620 | height: 4px;
621 | background: rgb(87,142,84);
622 | }
623 |
624 | @-webkit-keyframes glow {
625 | from {
626 | text-shadow: 0 0 0px rgb(154, 233, 158), 0 0 10px rgb(116, 180, 137), 0 0 20px #79dd97, 0 0 30px #60d3a7, 0 0 40px #43f091, 0 0 50px #24e4a4, 0 0 60px #00ff95;
627 | }
628 |
629 | to {
630 | text-shadow: 0 0 20px rgb(168, 223, 171), 0 0 30px rgb(62, 172, 95), 0 0 40px #79dd97, 0 0 50px #60d3a7, 0 0 60px #43f091, 0 0 70px #24e4a4, 0 0 80px #00ff95;
631 | }
632 | }
633 |
634 |
635 | ::-webkit-scrollbar {
636 | width: 5px;
637 | }
638 |
639 | /* Track */
640 | ::-webkit-scrollbar-track {
641 | background: #000;
642 | }
643 |
644 | /* Handle */
645 | ::-webkit-scrollbar-thumb {
646 | background: rgb(87,142,84);
647 | }
648 |
649 | /* Handle on hover */
650 | ::-webkit-scrollbar-thumb:hover {
651 | background: rgb(87,142,84);
652 | }
653 |
654 | /* response media query starts */
655 | @media (max-width: 1300px) {
656 | .home .max-width{
657 | margin-left: 0px;
658 | }
659 | }
660 | @media (max-width: 1104px) {
661 | .about .about-content .left img{
662 | height: 350px;
663 | width: 350px;
664 | }
665 | }
666 | @media (max-width: 991px) {
667 | .max-width{
668 | padding: 0 50px;
669 | }
670 | }
671 | @media (max-width: 947px) {
672 |
673 | .max-width{
674 | padding: 0 50px;
675 | }
676 | .menu-btn{
677 | display: block;
678 | z-index: 999;
679 | }
680 | .menu-btn i.active {
681 | visibility: hidden;
682 | }
683 | .menu-btn i.active::before {
684 | visibility: visible;
685 | position: absolute;
686 | content: "\e5cd";
687 | }
688 | .navbar .menu{
689 | position: fixed;
690 | height: 100vh;
691 | width: 100%;
692 | left:-100%;
693 | top: 0;
694 | background: black;
695 | text-align: center;
696 | padding-top: 80px;
697 | transition: all 0.3s ease;
698 | }
699 |
700 | .navbar .menu.active{
701 | left: 0;
702 | }
703 | .navbar .menu li{
704 | display: block;
705 | }
706 | .navbar .menu li a{
707 | display: inline-block;
708 | margin: 20px 0;
709 | font-size: 25px;
710 | }
711 |
712 | .home .home-content .text-2 {
713 | font-size: 70px;
714 | }
715 |
716 | .home .home-content .text-3 {
717 | font-size: 35px;
718 | }
719 | .max-width{
720 | max-width: 800px;
721 | }
722 | .about .about-content .column{
723 | width: 100%;
724 | }
725 | .about .about-content .left{
726 | display: flex;
727 | justify-content: center;
728 | margin: 0 auto 60px;
729 | }
730 | .about .about-content .right{
731 | flex: 100%;
732 | }
733 | .services .serv-content .card{
734 | width: calc(50% - 10px);
735 | margin-bottom: 20px;
736 | }
737 | .skills .skills-content .column{
738 | width: 100%;
739 | margin-bottom:35px ;
740 | }
741 | }
742 | @media (max-width: 690px) {
743 | .max-width{
744 | padding: 0 23px;
745 | }
746 | .home .home-content .text-2 {
747 | font-size: 60px;
748 | }
749 | .home .home-content .text-3 {
750 | font-size: 32px;
751 | }
752 | .services .serv-content .card, .skills .skills-content .column,.contact .contact-content .column{
753 | width: 100%;
754 | }
755 | }
756 | @media (max-width: 500px) {
757 | .home .home-content .text-2 {
758 | font-size: 50px;
759 | }
760 | .home .home-content .text-3 {
761 | font-size: 27px;
762 | }
763 | }
--------------------------------------------------------------------------------
159 | 
160 | 
161 | 
162 | 
163 |
164 |
160 |
161 |
162 |
163 |
165 | 
166 | 
167 | 
168 | 
169 |
170 |
171 |
172 |
173 |
166 |
167 |
168 |
169 |
175 |
231 | Contact Me
176 |
177 |
230 |
178 |
205 | Let's Get in Touch
179 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium autem voluptas fugit voluptatibus deleniti quia culpa commodi, ipsum nulla modi. 180 |
181 |
182 |
204 |
183 |
184 |
189 |
185 |
188 | Name
186 | {{YOUR NAME}}
187 |
190 |
191 |
196 |
192 |
195 | Address
193 | {{YOUR ADDRESS}}
194 |
197 |
198 |
203 |
199 |
202 | Email
200 | {{YOUR EMAIL}}
201 |
206 |
229 |
207 | Message Me
208 |
209 |
228 |