Skip to content

Commit d2adb42

Browse files
mady020mady020
committed
added skills, projects , social sections
1 parent f6730e8 commit d2adb42

6 files changed

Lines changed: 237 additions & 54 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

image.png renamed to img/avatar.png

File renamed without changes.

‎img/devnexus.png‎

136 KB
Loading

‎img/studybuddy.png‎

37.9 KB
Loading

‎index.html‎

Lines changed: 148 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,156 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title>Madhav Sharma</title>
8-
<link rel="stylesheet" href="style.css">
9-
10-
</head>
11-
<!-- Google tag (gtag.js) -->
12-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-355J76ME3X"></script>
13-
<script>
14-
window.dataLayer = window.dataLayer || [];
15-
function gtag(){dataLayer.push(arguments);}
16-
gtag('js', new Date());
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
15+
/>
16+
</head>
17+
<!-- Google tag (gtag.js) -->
18+
<script
19+
async
20+
src="https://www.googletagmanager.com/gtag/js?id=G-355J76ME3X"
21+
></script>
22+
<script>
23+
window.dataLayer = window.dataLayer || [];
24+
function gtag() {
25+
dataLayer.push(arguments);
26+
}
27+
gtag("js", new Date());
1728

18-
gtag('config', 'G-355J76ME3X');
19-
</script>
29+
gtag("config", "G-355J76ME3X");
30+
</script>
2031

21-
<body>
32+
<body>
2233
<div id="main">
23-
<header>
24-
<nav id="navbar">
25-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
26-
fill="#e8eaed" id="nav-icon">
27-
<path
28-
d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z" />
29-
</svg>
30-
<ul>
31-
<li>Home</li>
32-
<li>Skills</li>
33-
<li>Projects</li>
34-
<li>Socials</li>
35-
</ul>
36-
<button id="theme-toggle">
37-
38-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed" id="dark-mode"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
39-
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed" id="light-mode"><path d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z"/></svg>
40-
</button>
41-
</nav>
42-
</header>
43-
<main id="main-container">
44-
<section id="home">
45-
<div class="left-container">
46-
<h2>Madhav Sharma</h2>
47-
<p>Developer</p>
48-
<p></p>
49-
</div>
50-
<div class="right-container">
51-
<img src="image.png" alt="">
52-
</div>
53-
</section>
54-
</main>
34+
<header>
35+
<nav id="navbar">
36+
<svg
37+
xmlns="http://www.w3.org/2000/svg"
38+
height="24px"
39+
viewBox="0 -960 960 960"
40+
width="24px"
41+
fill="#e8eaed"
42+
id="nav-icon"
43+
>
44+
<path
45+
d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"
46+
/>
47+
</svg>
48+
<ul>
49+
<a href="#home"><li>Home</li></a>
50+
<a href="#skills"><li>Skills</li></a>
51+
<a href="#projects"><li>Projects</li></a>
52+
<a href="#socials"><li>Socials</li></a>
53+
</ul>
54+
<button id="theme-toggle">
55+
<svg
56+
xmlns="http://www.w3.org/2000/svg"
57+
height="24px"
58+
viewBox="0 -960 960 960"
59+
width="24px"
60+
fill="#e8eaed"
61+
id="dark-mode"
62+
>
63+
<path
64+
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"
65+
/>
66+
</svg>
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
height="24px"
70+
viewBox="0 -960 960 960"
71+
width="24px"
72+
fill="#e8eaed"
73+
id="light-mode"
74+
>
75+
<path
76+
d="M440-760v-160h80v160h-80Zm266 110-55-55 112-115 56 57-113 113Zm54 210v-80h160v80H760ZM440-40v-160h80v160h-80ZM254-652 140-763l57-56 113 113-56 54Zm508 512L651-255l54-54 114 110-57 59ZM40-440v-80h160v80H40Zm157 300-56-57 112-112 29 27 29 28-114 114Zm283-100q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-160Z"
77+
/>
78+
</svg>
79+
</button>
80+
</nav>
81+
</header>
82+
<main id="main-container">
83+
<section id="home">
84+
<div class="left-container">
85+
<h2>Madhav Sharma</h2>
86+
<p>Developer</p>
87+
<p></p>
88+
</div>
89+
<div class="right-container">
90+
<img src="/img/avatar.png" alt="" />
91+
</div>
92+
</section>
93+
<section id="skills">
94+
<h2>Skills</h2>
95+
<div class="skills-container">
96+
<div>
97+
<h3>HTML</h3>
98+
</div>
99+
<div>
100+
<h3>CSS</h3>
101+
</div>
102+
<div>
103+
<h3>JAVASCRIPT</h3>
104+
</div>
105+
<div>
106+
<h3>TAILWIND CSS</h3>
107+
</div>
108+
<div>
109+
<h3>C & C++</h3>
110+
</div>
111+
</div>
112+
</section>
113+
<section id="projects">
114+
<h2>Projects</h2>
115+
<div class="projects-container">
116+
<div class="project-card">
117+
<div class="project-thumbnail">
118+
<img src="/img/devnexus.png" alt="" />
119+
</div>
120+
<div class="project-details">
121+
<h3 class="header">DevNexus</h3>
122+
<p class="description">
123+
Platform where developers can start their personal blog in
124+
seconds
125+
</p>
126+
</div>
127+
</div>
128+
<div class="project-card">
129+
<div class="project-thumbnail">
130+
<img src="/img/studybuddy.png" alt="" />
131+
</div>
132+
<div class="project-details">
133+
<h3 class="header">StudyBuddy</h3>
134+
<p class="description">
135+
Ai Enhanced Productivity tool for students
136+
</p>
137+
</div>
138+
</div>
139+
</div>
140+
</section>
141+
<section id="socials">
142+
<h2>Socials</h2>
143+
<div class="socials-container">
144+
<a href="">
145+
<i class="fa-brands fa-3x fa-x-twitter"></i>
146+
</a>
147+
<a href="">
148+
<i class="fa-brands fa-3x fa-linkedin-in"></i>
149+
</a>
150+
</div>
151+
</section>
152+
</main>
55153
</div>
56-
<script src="script.js" defe></script>
57-
</body>
58-
154+
<script src="script.js" defe></script>
155+
</body>
59156
</html>

‎style.css‎

Lines changed: 86 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
flex-wrap: wrap;
3737
min-height: 64px;
3838
position: fixed;
39-
/* backdrop-filter: blur(8px); */
40-
/* border-bottom: 2px solid var(--highlight-color); */
39+
backdrop-filter: blur(7px);
40+
/* border-bottom: 2px solid var(--highlight-color); */
4141

4242
z-index: 1000;
4343
}
@@ -55,7 +55,11 @@
5555

5656
flex: 1;
5757
}
58-
#navbar > ul > li:hover{
58+
#navbar > ul > a{
59+
text-decoration: none;
60+
color: inherit;
61+
}
62+
#navbar > ul > a:hover{
5963
color:var(--highlight-color);
6064
}
6165
#navbar > #theme-toggle {
@@ -88,6 +92,8 @@
8892
display: flex;
8993
flex-direction: column;
9094
justify-content: center;
95+
gap: 24px;
96+
padding: 44px;
9197
}
9298

9399
/* Home Section */
@@ -142,3 +148,80 @@
142148
flex-direction: column; /* Stack items vertically */
143149
}
144150
}
151+
152+
153+
#main-container > #skills {
154+
display: flex;
155+
justify-content: center;
156+
flex-direction: column;
157+
align-items: center;
158+
width: 100%;
159+
height: 100vh;
160+
gap: 24px;
161+
}
162+
163+
#skills > .skills-container{
164+
display: flex;
165+
gap: 24px;
166+
flex-wrap: wrap;
167+
justify-content: center;
168+
169+
}
170+
.skills-container > div{
171+
border: 2px solid white;
172+
padding: 12px;
173+
border-radius: 12px;
174+
}
175+
#main-container > #projects {
176+
display: flex;
177+
flex-direction: column;
178+
justify-content: center;
179+
align-items: center;
180+
width: 100%;
181+
height: 100vh;
182+
}
183+
184+
#projects > .projects-container{
185+
display: flex;
186+
flex-direction: column;
187+
gap: 24px;
188+
margin-top: 24px;
189+
}
190+
191+
.project-card{
192+
display: flex;
193+
gap: 24px;
194+
}
195+
.project-card > .project-thumbnail > img{
196+
width: 200px;
197+
height: 100px;
198+
border: 1px solid rgba(255, 255, 255, 0.199);
199+
}
200+
201+
.project-card > .project-details{
202+
display: flex;
203+
flex-direction: column;
204+
gap:8px;
205+
}
206+
.project-details > .header{
207+
color: var(--highlight-color);
208+
}
209+
210+
211+
#main-container > #socials {
212+
display: flex;
213+
justify-content: center;
214+
flex-direction: column;
215+
align-items: center;
216+
width: 100%;
217+
height: 100vh;
218+
gap: 24px;
219+
}
220+
#socials > .socials-container{
221+
display: flex;
222+
gap: 36px;
223+
}
224+
225+
a{
226+
color: var(--text-color);
227+
}

0 commit comments

Comments
 (0)