Skip to content

Commit 98ef217

Browse files
csprasadcsprasad
committed
Fix: home screen left panel UI fixs and update
1 parent cac5d2f commit 98ef217

File tree

5 files changed

+190
-47
lines changed

5 files changed

+190
-47
lines changed

‎iPhone/styles/contact.css

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
align-items: center;
66
justify-content: center;
77
padding-top: 6rem;
8-
background-color: var(--bg-color, #fff); /* Dark/light mode background */
8+
background-color: var(--bg-color, #fff);
99
}
1010

1111
.contact-page * {
@@ -17,7 +17,7 @@
1717
font-size: 1.5rem;
1818
margin-bottom: 1rem;
1919
margin-top: 10;
20-
text-align: left; /* Aligns text to the left */
20+
text-align: left;
2121
width: 100%;
2222
}
2323

@@ -35,7 +35,6 @@
3535
width: 100%;
3636
text-align: center;
3737
background-color: #333;
38-
3938
border-radius: 5px;
4039
}
4140

@@ -88,8 +87,8 @@
8887

8988
/* Hover effect for social media icons */
9089
.contact-page .social-icon:hover {
91-
transform: scale(1.2); /* Icon enlarges slightly on hover */
92-
color: #007bff; /* Hover color for social icons */
90+
transform: scale(1.2);
91+
color: #007bff;
9392
}
9493

9594
/* Back Button (no hover effect) */
@@ -99,12 +98,10 @@
9998
}
10099

101100
.contact-page .back-button:hover {
102-
color: #333; /* Ensure no hover effect on back button */
101+
color: #333;
103102
}
104103

105104
/* Avoid hover effect on all other non-interactive text */
106-
107-
108105
@media screen and (max-width: 600px) {
109106
.contact-page {
110107
padding: 10px;

‎landing.html

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>CSPrasad - Portfolio</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
78
<link rel="stylesheet" href="styles/landing.css">
9+
<link rel="stylesheet" href="styles/leftPanel.css">
810
</head>
911
<body>
1012
<div class="landing-container">
@@ -25,14 +27,33 @@
2527

2628
<section class="section section--hello" id="hello">
2729
<div class="section__inner">
28-
<div class="block">
29-
<img src="./iPhone/assets/images/profile.jpg"/>
30-
<h1>Hi, I'm <br>Brahmendraprasad 👋</h1>
31-
<p>iOS Developer</p>
32-
<p style="display: none;">I specialize in crafting intuitive and high-performance iOS applications,
33-
focusing on seamless user experiences and innovative solutions.
34-
Passionate about solving complex technical challenges,
35-
I bring a detail-oriented approach to mobile development.</p>
30+
<div class="container">
31+
<header>
32+
<div class="header-content">
33+
<!-- <span class="icon">△</span> -->
34+
<span class="dot"><i class="fa fa-circle" aria-hidden="true"></i></span>
35+
<span class="contact"><a href="mailto:[email protected]">[email protected]</a></span>
36+
<!-- <span class="menu">☰</span> -->
37+
</div>
38+
</header>
39+
<main>
40+
<div class="profile">
41+
<img src="iPhone/assets/images/profile.jpg" alt="CSPrasad" class="profile-img">
42+
<div class="detail">
43+
<h1>Hi, I'm <span class="name">C S Prasad!</span></h1>
44+
<!-- <p>(Brahmendraprasad) <span class="title"></span></p> -->
45+
<p>I'm an indie<span class="title"> iOS developer</span> currently working on <a class="working" href="https://github.com/csprasad/DevLint">DevLint</a>.</p>
46+
<p><span class="company"></span> <span class="open-to-work">
47+
<img src="pulse.png">
48+
<span>Open to work</span>
49+
</span></p>
50+
<div class="call-section">
51+
<button class="book-call" title="Still working on this">Book a call</button>
52+
<p class="connect">Feel free to explore my portfolio and reach out <br>—I'd love to connect!</p>
53+
</div>
54+
</div>
55+
</div>
56+
</main>
3657
</div>
3758
</div>
3859
</section>

‎pulse.png

2.59 KB
Loading

‎styles/landing.css

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -170,34 +170,4 @@ Left panel name and animation
170170
h2 {
171171
/* font-size: 2.5rem; */
172172
}
173-
}
174-
.block img {
175-
width: 20%;
176-
height: 20%;
177-
border: 2px dashed rgb(130, 127, 127);
178-
border-radius: 50%;
179-
margin-right: 30px;
180-
display: none;
181-
}
182-
183-
.block h1 {
184-
display: inline-block;
185-
font-size: 3rem;
186-
font-weight: bold;
187-
/* margin-top: 50px !important; */
188-
letter-spacing: 1px;
189-
word-spacing: 0.1rem;
190-
/* text-transform: uppercase; */
191-
/* margin-bottom: 1em; */
192-
align-items: top;
193-
color: inherit;
194-
}
195-
.block p {
196-
font-size: 1em;
197-
/* margin-right: 0.4em; */
198-
/* margin-top: 50px !important; */
199-
/* border: 1px solid red; */
200-
/* opacity: 0.8; */
201-
}
202-
203-
173+
}

‎styles/leftPanel.css

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
3+
}
4+
5+
.container {
6+
width: 100%;
7+
/* padding: 20px; */
8+
}
9+
10+
header {
11+
margin-bottom: 40px;
12+
}
13+
14+
.header-content {
15+
margin-top: 0px;
16+
}
17+
18+
.icon {
19+
font-size: 28px;
20+
color: #EEF1DA;
21+
}
22+
.dot {
23+
font-size: 5px;
24+
border-radius: 5px;
25+
color: #ff9500;
26+
}
27+
28+
.contact a {
29+
font-size: 1rem;
30+
line-height: 1;
31+
color: #999;
32+
font-weight: 500;
33+
}
34+
35+
.menu {
36+
font-size: 24px;
37+
cursor: pointer;
38+
}
39+
40+
.profile {
41+
padding: 0;
42+
display: flex;
43+
gap: 1.2rem;
44+
}
45+
46+
.detail {
47+
/* display:contents; */
48+
gap: 1rem ;
49+
50+
}
51+
52+
53+
.profile-img {
54+
border-radius: 50%;
55+
width: 100px;
56+
height: 100px;
57+
object-fit: cover;
58+
border: 3px solid #ffffffa7;
59+
}
60+
61+
h1 {
62+
font-size: 2em; /* Slightly larger for emphasis */
63+
margin: 0 0;
64+
color: #999;
65+
line-height: 1.2;
66+
}
67+
68+
.name {
69+
color: #EEF1DA;
70+
}
71+
.alias {
72+
color: #999;
73+
}
74+
75+
.title {
76+
color: #EEF1DA;
77+
font-weight: 400;
78+
font-size: 1.1em;
79+
}
80+
81+
.working {
82+
color: rgb(247, 191, 49);
83+
}
84+
85+
.working:hover {
86+
color: #ff9500;
87+
}
88+
89+
p {
90+
color: #999;
91+
font-size: 1.1em;
92+
line-height: 1.6;
93+
margin-top: 10px;
94+
}
95+
96+
.company {
97+
color: #ff9500;
98+
font-weight: 700;
99+
font-size: 1.8em; /* Larger for prominence */
100+
}
101+
102+
.open-to-work {
103+
color: #EEF1DA !important;
104+
margin-top: 15px;
105+
vertical-align: middle;
106+
display: flex;
107+
padding:8px;
108+
margin-right:4px;
109+
border: 1px solid #b0adad;
110+
border-radius: 5rem;
111+
align-items: center;
112+
gap: 10px;
113+
max-width: 6.7em;
114+
}
115+
116+
.open-to-work img {
117+
height: 15px;
118+
width: 15px;
119+
}
120+
121+
.open-to-work span {
122+
font-size: 0.7rem;
123+
font-weight: 600;
124+
}
125+
126+
.call-section {
127+
display: flex;
128+
margin: 25px 0;
129+
gap: 1rem;
130+
}
131+
132+
.book-call {
133+
background-color:#EEF1DA;
134+
color: #222;
135+
border: none;
136+
padding: 10px 20px; /* Larger padding for button */
137+
font-size: 1.1em;
138+
cursor: pointer;
139+
border-radius: 100px;
140+
/* margin: 25px 0; */
141+
transition: background-color 0.3s;
142+
}
143+
144+
.book-call:hover {
145+
background-color: #fff;
146+
}
147+
148+
149+
.connect {
150+
color: #666;
151+
font-size: 1.1em;
152+
line-height: 1.6;
153+
max-width: 400px;
154+
margin: 0 auto; /* Centered text */
155+
}

0 commit comments

Comments
 (0)