Skip to content

Commit c2d36e3

Browse files
AkhilSaiLatchireddiAkhilSaiLatchireddi
committed
made simalr changes like yelp
1 parent 6d0b2ce commit c2d36e3

3 files changed

Lines changed: 351 additions & 46 deletions

File tree

‎css/style.css‎

Lines changed: 253 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,216 @@
55
box-sizing: border-box;
66
}
77

8+
:root {
9+
--primary-color: #d32323;
10+
--secondary-color: #333;
11+
--background-color: #f7f7f7;
12+
--card-background: #ffffff;
13+
--text-color: #2b2b2b;
14+
}
15+
816
body {
9-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
1018
line-height: 1.6;
11-
color: #333;
12-
background-color: #f5f5f5;
19+
color: var(--text-color);
20+
background-color: var(--background-color);
1321
}
1422

1523
/* Header Styles */
1624
header {
17-
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
18-
color: white;
19-
padding: 2rem 0;
20-
text-align: center;
25+
background-color: var(--card-background);
26+
color: var(--secondary-color);
27+
padding: 1.5rem 0;
28+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
29+
position: sticky;
30+
top: 0;
31+
z-index: 1000;
2132
}
2233

2334
header h1 {
35+
font-size: 2rem;
36+
margin-bottom: 1rem;
37+
font-weight: 600;
38+
text-align: center;
39+
}
40+
41+
/* Container */
42+
.container {
43+
max-width: 1200px;
44+
margin: 0 auto;
45+
padding: 2rem;
46+
}
47+
48+
/* Hero Section */
49+
.hero {
50+
text-align: center;
51+
margin-bottom: 3rem;
52+
padding: 3rem 0;
53+
}
54+
55+
.hero h1 {
2456
font-size: 2.5rem;
57+
color: var(--secondary-color);
58+
margin-bottom: 1rem;
59+
}
60+
61+
.hero p {
62+
font-size: 1.2rem;
63+
color: #666;
64+
}
65+
66+
/* Projects Grid */
67+
.projects-grid {
68+
display: grid;
69+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
70+
gap: 2rem;
71+
padding: 1rem;
72+
}
73+
74+
/* Project Cards */
75+
.project-card {
76+
background: var(--card-background);
77+
border-radius: 8px;
78+
padding: 1.5rem;
79+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
80+
transition: transform 0.2s ease, box-shadow 0.2s ease;
81+
}
82+
83+
.project-card:hover {
84+
transform: translateY(-5px);
85+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
86+
}
87+
88+
.project-header {
89+
margin-bottom: 1rem;
90+
}
91+
92+
.project-header h2 {
93+
font-size: 1.5rem;
94+
color: var(--secondary-color);
95+
margin-bottom: 0.5rem;
96+
}
97+
98+
.project-stats {
99+
display: flex;
100+
gap: 1rem;
101+
color: #666;
102+
font-size: 0.9rem;
103+
}
104+
105+
.project-stats span {
106+
display: flex;
107+
align-items: center;
108+
gap: 0.5rem;
109+
}
110+
111+
.project-description {
112+
color: #555;
25113
margin-bottom: 1.5rem;
26-
font-weight: 300;
114+
line-height: 1.6;
115+
}
116+
117+
.project-links {
118+
display: flex;
119+
gap: 1rem;
120+
}
121+
122+
.github-link {
123+
display: inline-flex;
124+
align-items: center;
125+
gap: 0.5rem;
126+
padding: 0.5rem 1rem;
127+
background-color: #24292e;
128+
color: white;
129+
text-decoration: none;
130+
border-radius: 4px;
131+
font-size: 0.9rem;
132+
transition: background-color 0.2s ease;
133+
}
134+
135+
.github-link:hover {
136+
background-color: #2c3238;
137+
}
138+
139+
/* Footer */
140+
footer {
141+
background-color: var(--card-background);
142+
padding: 2rem 0;
143+
margin-top: 4rem;
144+
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
145+
}
146+
147+
.footer-content {
148+
max-width: 1200px;
149+
margin: 0 auto;
150+
padding: 0 2rem;
151+
display: flex;
152+
justify-content: space-between;
153+
align-items: center;
154+
}
155+
156+
.social-links {
157+
display: flex;
158+
gap: 1rem;
159+
}
160+
161+
.social-links a {
162+
color: var(--secondary-color);
163+
font-size: 1.5rem;
164+
transition: color 0.2s ease;
165+
}
166+
167+
.social-links a:hover {
168+
color: var(--primary-color);
27169
}
28170

29171
/* Navigation Styles */
30172
nav {
173+
max-width: 1200px;
174+
margin: 0 auto;
175+
padding: 0 2rem;
176+
}
177+
178+
nav ul {
179+
list-style: none;
180+
display: flex;
181+
justify-content: center;
182+
gap: 2rem;
183+
}
184+
185+
nav a {
186+
text-decoration: none;
187+
color: var(--secondary-color);
188+
font-weight: 500;
189+
font-size: 1.1rem;
190+
padding: 0.5rem 1rem;
191+
border-radius: 4px;
192+
transition: color 0.2s ease, background-color 0.2s ease;
193+
}
194+
195+
nav a:hover {
196+
color: var(--primary-color);
197+
background-color: rgba(211, 35, 35, 0.1);
198+
}
199+
200+
/* Responsive Design */
201+
@media (max-width: 768px) {
202+
.projects-grid {
203+
grid-template-columns: 1fr;
204+
}
205+
206+
.footer-content {
207+
flex-direction: column;
208+
gap: 1rem;
209+
text-align: center;
210+
}
211+
212+
nav ul {
213+
flex-direction: column;
214+
align-items: center;
215+
gap: 1rem;
216+
}
217+
}
31218
background-color: rgba(255, 255, 255, 0.1);
32219
padding: 1rem;
33220
margin-top: 1rem;
@@ -90,26 +277,69 @@ a:hover {
90277
color: #1e3c72;
91278
}
92279

93-
/* Footer Styles */
94-
footer {
95-
background-color: #1e3c72;
280+
/* Homepage Specific Styles */
281+
.subtitle {
282+
font-size: 1.4rem;
283+
color: #666;
284+
margin-bottom: 2rem;
285+
}
286+
287+
.cta-buttons {
288+
display: flex;
289+
gap: 1rem;
290+
justify-content: center;
291+
margin-top: 2rem;
292+
}
293+
294+
.cta-button {
295+
display: inline-flex;
296+
align-items: center;
297+
gap: 0.5rem;
298+
padding: 0.8rem 1.5rem;
299+
border-radius: 4px;
300+
text-decoration: none;
301+
font-weight: 500;
302+
transition: all 0.2s ease;
303+
}
304+
305+
.cta-button:first-child {
306+
background-color: var(--primary-color);
307+
color: white;
308+
}
309+
310+
.cta-button.github {
311+
background-color: #24292e;
96312
color: white;
313+
}
314+
315+
.cta-button:hover {
316+
transform: translateY(-2px);
317+
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
318+
}
319+
320+
.featured-section {
321+
margin-top: 4rem;
322+
}
323+
324+
.featured-section h2 {
97325
text-align: center;
98-
padding: 1.5rem;
99-
margin-top: 3rem;
326+
margin-bottom: 2rem;
327+
font-size: 2rem;
328+
color: var(--secondary-color);
100329
}
101330

102-
/* Responsive Design */
103-
@media (max-width: 768px) {
104-
header h1 {
105-
font-size: 2rem;
106-
}
331+
.learn-more {
332+
display: inline-block;
333+
color: var(--primary-color);
334+
text-decoration: none;
335+
font-weight: 500;
336+
margin-top: 1rem;
337+
transition: transform 0.2s ease;
338+
}
107339

108-
nav ul {
109-
flex-direction: column;
110-
gap: 1rem;
111-
align-items: center;
112-
}
340+
.learn-more:hover {
341+
transform: translateX(5px);
342+
}
113343

114344
main {
115345
padding: 2rem 1rem;

‎index.html‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta name="description" content="Akhil Sai Latchireddi's Portfolio - Welcome to my personal website">
7-
<title>Akhil Sai Latchireddi | Portfolio</title>
6+
<meta name="description" content="Akhil Sai Latchireddi - Software Developer and Open Source Contributor">
7+
<title>Akhil Sai Latchireddi | Developer Portfolio</title>
88
<link rel="stylesheet" href="css/style.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
910
</head>
1011
<body>
1112
<header>
12-
<h1>Welcome to Akhil Sai Latchireddi's Portfolio</h1>
1313
<nav>
1414
<ul>
1515
<li><a href="index.html">Home</a></li>
@@ -19,18 +19,56 @@ <h1>Welcome to Akhil Sai Latchireddi's Portfolio</h1>
1919
</ul>
2020
</nav>
2121
</header>
22-
<main>
23-
<section>
24-
<h2>About Me</h2>
25-
<p>Welcome to my personal website! Here you can find information about my projects and how to contact me.</p>
22+
23+
<main class="container">
24+
<section class="hero">
25+
<h1>Akhil Sai Latchireddi</h1>
26+
<p class="subtitle">Software Developer & Open Source Enthusiast</p>
27+
<div class="cta-buttons">
28+
<a href="projects.html" class="cta-button">View Projects</a>
29+
<a href="https://github.com/AkhilSaiLatchireddi" class="cta-button github">
30+
<i class="fab fa-github"></i> GitHub Profile
31+
</a>
32+
</div>
2633
</section>
27-
<section>
28-
<h2>Latest Projects</h2>
29-
<p>Check out my work in the <a href="projects.html">Projects</a> section.</p>
34+
35+
<section class="featured-section">
36+
<h2>Featured Projects</h2>
37+
<div class="projects-grid">
38+
<article class="project-card">
39+
<div class="project-header">
40+
<h3>Photo Vault</h3>
41+
<div class="project-stats">
42+
<span><i class="fas fa-code-branch"></i> Node.js</span>
43+
</div>
44+
</div>
45+
<p class="project-description">Secure cloud storage solution for photos with user authentication.</p>
46+
<a href="projects.html" class="learn-more">Learn More →</a>
47+
</article>
48+
49+
<article class="project-card">
50+
<div class="project-header">
51+
<h3>Gold Price Tracker</h3>
52+
<div class="project-stats">
53+
<span><i class="fas fa-code-branch"></i> Python</span>
54+
</div>
55+
</div>
56+
<p class="project-description">Track and analyze daily gold prices in India.</p>
57+
<a href="projects.html" class="learn-more">Learn More →</a>
58+
</article>
59+
</div>
3060
</section>
3161
</main>
62+
3263
<footer>
33-
<p>&copy; 2025 Akhil Sai Latchireddi. All rights reserved.</p>
64+
<div class="footer-content">
65+
<p>&copy; 2025 Akhil Sai Latchireddi. All rights reserved.</p>
66+
<div class="social-links">
67+
<a href="https://github.com/AkhilSaiLatchireddi" title="GitHub Profile">
68+
<i class="fab fa-github"></i>
69+
</a>
70+
</div>
71+
</div>
3472
</footer>
3573
<script src="js/main.js"></script>
3674
</body>

0 commit comments

Comments
 (0)