Skip to content

Commit c9e26f7

Browse files
ShvrthShvrth
authored
Create projects.html
1 parent 4945678 commit c9e26f7

File tree

1 file changed

+148
-0
lines changed

1 file changed

+148
-0
lines changed

‎projects.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Shivarth Rai - Projects</title>
7+
<style>
8+
/* Same CSS as main page up to .container */
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14+
}
15+
16+
body {
17+
line-height: 1.6;
18+
color: #333;
19+
background-color: #f4f4f4;
20+
}
21+
22+
nav {
23+
background-color: #2c3e50;
24+
padding: 1rem;
25+
position: fixed;
26+
width: 100%;
27+
top: 0;
28+
}
29+
30+
nav ul {
31+
list-style: none;
32+
display: flex;
33+
justify-content: center;
34+
gap: 2rem;
35+
}
36+
37+
nav a {
38+
color: white;
39+
text-decoration: none;
40+
font-size: 1.1rem;
41+
transition: color 0.3s;
42+
}
43+
44+
nav a:hover {
45+
color: #3498db;
46+
}
47+
48+
.container {
49+
max-width: 1200px;
50+
margin: 80px auto 0;
51+
padding: 2rem;
52+
}
53+
54+
/* Project-specific styles */
55+
.projects-grid {
56+
display: grid;
57+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
58+
gap: 2rem;
59+
margin-top: 2rem;
60+
}
61+
62+
.project-card {
63+
background-color: white;
64+
border-radius: 10px;
65+
padding: 1.5rem;
66+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
67+
}
68+
69+
.project-card h3 {
70+
color: #2c3e50;
71+
margin-bottom: 1rem;
72+
}
73+
74+
.project-card .tags {
75+
display: flex;
76+
flex-wrap: wrap;
77+
gap: 0.5rem;
78+
margin-top: 1rem;
79+
}
80+
81+
.project-card .tag {
82+
background-color: #3498db;
83+
color: white;
84+
padding: 0.2rem 0.8rem;
85+
border-radius: 15px;
86+
font-size: 0.9rem;
87+
}
88+
89+
.project-link {
90+
display: inline-block;
91+
margin-top: 1rem;
92+
color: #3498db;
93+
text-decoration: none;
94+
}
95+
96+
.project-link:hover {
97+
text-decoration: underline;
98+
}
99+
</style>
100+
</head>
101+
<body>
102+
<nav>
103+
<ul>
104+
<li><a href="index.html">Home</a></li>
105+
<li><a href="projects.html">Projects</a></li>
106+
<li><a href="hobbies.html">Hobbies</a></li>
107+
</ul>
108+
</nav>
109+
110+
<div class="container">
111+
<h1>My Projects</h1>
112+
<div class="projects-grid">
113+
<div class="project-card">
114+
<h3>Weather Forecast App</h3>
115+
<p>A web application that provides real-time weather information using OpenWeatherMap API.</p>
116+
<div class="tags">
117+
<span class="tag">JavaScript</span>
118+
<span class="tag">API</span>
119+
<span class="tag">HTML/CSS</span>
120+
</div>
121+
<a href="#" class="project-link">View Project →</a>
122+
</div>
123+
124+
<div class="project-card">
125+
<h3>Task Manager</h3>
126+
<p>A full-stack task management application with user authentication and database integration.</p>
127+
<div class="tags">
128+
<span class="tag">Python</span>
129+
<span class="tag">Flask</span>
130+
<span class="tag">SQL</span>
131+
</div>
132+
<a href="#" class="project-link">View Project →</a>
133+
</div>
134+
135+
<div class="project-card">
136+
<h3>Data Analysis Tool</h3>
137+
<p>A Python-based tool for analyzing and visualizing large datasets.</p>
138+
<div class="tags">
139+
<span class="tag">Python</span>
140+
<span class="tag">Pandas</span>
141+
<span class="tag">Matplotlib</span>
142+
</div>
143+
<a href="#" class="project-link">View Project →</a>
144+
</div>
145+
</div>
146+
</div>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)