Skip to content

Commit 94b93ba

Browse files
yadhukrishnasmyadhukrishnasm
committed
almost completed
1 parent 2e30c8f commit 94b93ba

File tree

3 files changed

+193
-26
lines changed

3 files changed

+193
-26
lines changed

‎index.html‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,60 @@
2121

2222
<div class="about-container">
2323
<h3>About</h3>
24+
<p id="aboutme">As a Recent Computer Science graduate with a strong foundation in programming and web development. Skilled in creating web platforms and problem solving. Passionate about technology and committed to continuous learning and growth. Seeking opportunities to contribute to innovative projects.</p>
25+
</div>
26+
27+
<div class="socials-container">
28+
<a href="https://www.linkedin.com/in/yadhu-krishna-657b8b20b/ " id="lnkdn" > <img class="logo" id="lnkdn" src="https://img.icons8.com/ios/50/000000/linkedin-2--v1.png" alt="linkdn logo"></a>
29+
30+
<a href="https://docs.google.com/document/d/e/2PACX-1vS8-vJRczCCim75gRoRr6FCOYMGMALcrfGJR1d-N8wbG26BIhWp79a5eioHrEe1xBxB_siYfmCsbumS/pub" id="resume" ><img src="https://img.icons8.com/ios/50/000000/note.png" class="logo" alt="resume"></a>
31+
32+
<a href="https://twitter.com/yadhukrishnasm" id="x" ><img src="https://img.icons8.com/ios/50/000000/twitterx--v1.png"class="logo" alt="x/twitter logo"></a>
33+
34+
<a href="mailto:[email protected]" id="mail" ><img src="https://img.icons8.com/ios/50/000000/new-post--v1.png" class="logo" alt="mail logo"></a>
35+
36+
<a href="" id="git" > <img class="logo" src="https://img.icons8.com/windows/96/000000/github.png" alt="github logo"></a>
37+
2438
</div>
2539

2640
<div class="work-container">
27-
<h3>Works</h3>
41+
<h3 id="works-heading"
42+
>Works</h3>
43+
44+
<div class="works">
45+
<h3><a href="https://p2pchat-0cdf.onrender.com/">P2P chat</a></h3>
46+
<p id="about-work">tackles emotional support through a secure communication platform. Users can connect directly with each other or therapists using WebRTC technology, ensuring privacy with encryption. An AI assistant empowers them further. It analyzes user input to identify emotional states and offers personalized support-calming techniques, encouraging messages, or even connecting them with licensed therapists for online sessions. This platform prioritizes both security and emotional well-being, aiming to be a safe space for those seeking support.</p>
47+
<a href="https://github.com/yadhukrishnasm/p2pchat" class="git">Github</a>
48+
<hr>
49+
</div>
50+
<div class="works">
51+
<h3>CloudBag</h3>
52+
<p id="about-work">Discover Cloudbag a Gateway to the Future of Learning. Unleash the Power of Knowledge with a Web App that Revolutionizes the Way You Study. With Cloud Storage to Lighten Your Load and Quick Access for Rapid Reviews, it's Never Been Easier to Master Your Subjects. Experience the Magic of AI Support, as It Elevates Your Learning to New Heights, While Smart Note-Taking Simplifies Your Academic Journey</p>
53+
<a href="https://github.com/yadhukrishnasm/Cloudbag" class="git">Github</a>
54+
<!-- <a href="https://p2pchat-0cdf.onrender.com/">Live</a> -->
55+
<hr>
56+
</div>
57+
<div class="works">
58+
<h3>Uplift</h3>
59+
<p id="about-work">In times of crisis and challenges like public space cleanliness, coordinated volunteer efforts are essential. However, existing solutions often struggle to effectively connect volunteers with specific needs and manage their participation efficiently. That's where UPLIFT steps in.
60+
UPLIFT is a cutting-edge mobile platform designed to revolutionize volunteer engagement across India and potentially beyond. It addresses the common problems faced in disaster relief and community action</p>
61+
<a class="git" href="https://github.com/yadhukrishnasm/Uplift">Github</a>
62+
<!-- <a href="https://p2pchat-0cdf.onrender.com/">Live</a> -->
63+
<hr>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div class="exp-container">
69+
<h3>Experience</h3>
70+
<p class="exp">No Experience to boast about.</p>
71+
</div>
72+
<div class="image-container">
73+
<div class="image-relative-container">
74+
<img src="./assets/img.png" alt="" srcset="" id="img">
75+
<div id="hey">hey</div>
2876
</div>
2977
</div>
30-
31-
<img src="./assets/img.png" alt="" srcset="" id="img">
3278

3379
</body>
3480
</html>

‎index.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@ const nameDiv = document.querySelector("#myName");
22
const image = document.getElementById('myPhoto');
33
console.log(window.innerWidth)
44

5-
window.onload= ()=>{
5+
document.addEventListener("DOMContentLoaded", function() {
66
document.body.classList.remove("hidden");
7-
}
7+
});
88
window.addEventListener('scroll',()=>{
99
console.log(scrollY);
1010
})
1111

12-
13-
// const scroll = new LocomotiveScroll({
14-
// el: document.querySelector('[data-scroll-container]'),
15-
// smooth:true
16-
// })
12+
1713

1814
window.addEventListener('mousemove',(event)=>{
1915

‎style.css‎

Lines changed: 141 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

2-
3-
/* @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap'); */
2+
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Paytone+One&display=swap');
43

54
html{
65
scroll-behavior: smooth;
@@ -39,33 +38,136 @@ width: 0.5em;
3938
#name{
4039
font-size: 4em;
4140
margin: 0;
42-
text-shadow: 0px 20px 10px rgba(0, 0, 0, 0.495);
41+
text-shadow: 0px 20px 8px rgba(0, 0, 0, 0.495);
4342
z-index: 5;
4443
position: relative;
4544
}
4645

46+
.socials-container{
47+
max-height: 4em;
48+
display: flex;
49+
position: absolute;
50+
left: calc(50vw - (34vh / 2));
51+
top: 4em;
52+
height: max-content;
53+
border-radius: 20px;
54+
flex-direction: row;
55+
gap: 20px;
56+
padding: 20px;
57+
}
58+
.logo{
59+
height: 40px;
60+
}
61+
.logo:hover{
62+
transform: scale(1.2);
63+
}
64+
65+
4766
.about-container{
4867
position: absolute;
49-
left: 4em;
68+
left: 3em;
5069
padding: 15px;
5170
top: 4em;
5271
border-radius: 20px;
53-
box-shadow: -10px 5px 0px 0px rgba(10, 10, 10, 0.321);
54-
transform: rotate(-5deg);
55-
background-color: wheat;
56-
transition: ease-in-out .5s all;
72+
box-shadow: -20px 10px 5px 0px rgba(10, 10, 10, 0.321);
73+
transform: rotate(-3deg);
74+
background-color:#feff9c;
75+
max-width: 20vw;
76+
line-height: 25px;
77+
font-size: 110%;
78+
max-height: 50vh;
79+
transition: ease-in-out .2s all;
80+
transition-delay: 200ms;
81+
h3{
82+
color: rgb(31, 28, 109);
83+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
84+
font-weight: 500;
85+
text-decoration: underline;
86+
}
87+
#aboutme{
88+
color: rgba(0, 0, 0, 0.715);
89+
font-family: "Architects Daughter", cursive;
90+
font-weight: 600;
91+
font-style: normal;
92+
}
93+
}
94+
.about-container:hover{
95+
transform: scale(1.01) rotateY(-0.5deg) ;
5796
}
5897

59-
.work-container{
98+
.exp-container{
6099
position: absolute;
61-
right: 4em;
100+
left: 3em;
62101
padding: 15px;
63-
top: 4em;
102+
bottom: 4em;
64103
border-radius: 20px;
65-
transform: rotate(-2deg);
66-
box-shadow: 10px 6px 0px 0px rgba(10, 10, 10, 0.321);
67-
background-color: wheat;
68-
transition: ease-in-out .5s all;
104+
box-shadow: -20px 10px 5px 0px rgba(10, 10, 10, 0.321);
105+
transform: rotate(2deg);
106+
background-color:#cdfc93;
107+
max-width: 20vw;
108+
max-height: 30vh;
109+
line-height: 30px;
110+
transition: ease-in-out .2s all;
111+
transition-delay: 200ms;
112+
h3{
113+
color: rgba(3, 72, 2, 0.941);
114+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
115+
font-weight: 500;
116+
text-decoration: underline;
117+
}
118+
.exp{
119+
color: rgba(0, 0, 0, 0.715);
120+
font-family: "Architects Daughter", cursive;
121+
font-style: normal;
122+
}
123+
}
124+
125+
126+
.works{
127+
color: rgba(0, 0, 0, 0.715);
128+
font-weight: 600;
129+
font-style: normal;
130+
h3{
131+
font-family: "Architects Daughter", cursive;
132+
}
133+
p{
134+
font-family: "Architects Daughter", cursive;
135+
line-height: 140%;
136+
}
137+
.git{
138+
font-size: large;
139+
}
140+
}
141+
hr{
142+
color: black;
143+
}
144+
145+
#works-heading{
146+
font-weight: 600;
147+
text-decoration: underline;
148+
font-size: larger;
149+
}
150+
151+
.work-container{
152+
position: absolute;
153+
right: 3em;
154+
top: 5em;
155+
max-width: 24vw;
156+
overflow: scroll;
157+
height: 80vh;
158+
padding: 30px;
159+
display: flex;
160+
box-shadow: 20px 15px 4px 5px rgba(0, 0, 0, 0.374);
161+
transform: rotate(1deg);
162+
border-radius: 20px ;
163+
gap: 10px;
164+
flex-direction: column;
165+
background-color: #ffc14a;
166+
h3{
167+
color: rgba(3, 50, 120, 0.941);
168+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
169+
font-weight: 600;
170+
}
69171
}
70172

71173
.landing-content{
@@ -76,16 +178,39 @@ width: 0.5em;
76178
animation: ease-in-out .4s slide;
77179
}
78180

79-
#img{
181+
.image-container{
80182
height: 35vh;
81183
transition: all .3s ease-in-out;
82184
position: fixed;
83185
opacity: 0;
186+
width: max-content;
84187
bottom: 0px;
85188
left: calc(50vw - (40vh / 2));
86189
animation: slide 1s ease-in-out forwards;
87190
animation-delay: 1s;
88191
}
192+
#img{
193+
height: 35vh;
194+
}
195+
.image-relative-container{
196+
position: relative;
197+
}
198+
199+
#hey{
200+
position: absolute;
201+
top : 0px;
202+
right: 0px;
203+
opacity: 0;
204+
padding: 10px 30px 10px 30px;
205+
border-radius: 30px 30px 30px 0px;
206+
background-color: rgba(225, 213, 187, 0.979);
207+
animation: slide .5s cubic-bezier(0.18, 0.31, 0.94,-0.05) forwards;
208+
animation-delay: 3s;
209+
color: rgba(0, 0, 0, 0.715);
210+
font-family: "Architects Daughter", cursive;
211+
font-style: normal;
212+
font-weight: 600;
213+
}
89214

90215
@keyframes slide {
91216
0%{

0 commit comments

Comments
 (0)