Skip to content

Commit fc3a58f

Browse files
RohitjakkamRohitjakkam
authored
main file
website
1 parent 43a95fc commit fc3a58f

8 files changed

+336
-0
lines changed

‎index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Rohit Jakkam</title>
9+
<link rel="stylesheet" href="style.css">
10+
<style>
11+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Poppins:wght@400;700&display=swap');
12+
</style>
13+
</head>
14+
15+
<body>
16+
<!-- nav bar -->
17+
<nav>
18+
<div class="container main-nav flex">
19+
<a class="company-logo">
20+
<img src="logo11.png" alt="logo">
21+
</a>
22+
<div class="nav-links">
23+
24+
<ul class="flex">
25+
<li>
26+
<a href="#about" class="hover-link">ABOUT</a>
27+
</li>
28+
<li>
29+
<a href="https://www.linkedin.com/in/rohitjakkam/" class="hover-link">EXPERIENCE</a>
30+
</li>
31+
<li>
32+
<a href="https://github.com/Rohitjakkam" class="hover-link">PROJECTS</a>
33+
</li>
34+
<li>
35+
<a href="https://rohitjakkam.hashnode.dev/" class="hover-link">BLOG</a>
36+
</li>
37+
<li>
38+
<a href="https://rohitjakkam.hashnode.dev/" class="hover-link">NEWSLETTER</a>
39+
</li>
40+
<li>
41+
<a href="*" class="hover-link">CONTACT</a>
42+
</li>
43+
44+
</ul>
45+
46+
</div>
47+
</div>
48+
</nav>
49+
<header>
50+
<div class="container header-section flex">
51+
52+
<div class="header-left">
53+
<h1>
54+
Hey friends--
55+
</h1>
56+
<h2>I'm Rohit. I'm Software Developer, Cloud Computing enthusiast, CS Undergradate and soon-to-be Blogger</h2>
57+
<p>On this site you will get to know about me professionally and personally too by Blogs.</p>
58+
</div>
59+
60+
<div class="header-right">
61+
<img src="profile.jpeg" alt="profile">
62+
</div>
63+
64+
65+
</div>
66+
<section id="about" class="container about-section flex">
67+
<div class="about-left">
68+
<img src="pro.jpeg" alt="portfolio">
69+
<p>Recently want to Amdocs, Pune facility for SOCIO-MAKE-A-THON.</p>
70+
</div>
71+
<div class="about-right">
72+
<h1>Let me introduce myself.</h1>
73+
<h2>Rohit Jakkam</h2>
74+
<p>
75+
leaves in Thane, Maharashtra, and Currently Studying in Pune, Maharashtra. origin from Andhra Pradesh.I am a sophomore doing Computer Engineering at D Y Patil University, Ambi.Learning, Exploring and Implementing software development and programming for
76+
the past 2 years.Explored and had fun in domains like Web Development, Web Applications, Cloud Computing,  DBMS, Computer Networking, Linux, Git/Github, and many more... I was a Top Contributor to Google Crowdsource Vocalize Campaign
77+
with 6000+ Contributions.
78+
79+
</p>
80+
<img src="pic0.jpeg" alt="pic0">
81+
82+
83+
</div>
84+
</section>
85+
<div class="container path01 flex">
86+
<div class="path-left">
87+
<!-- <img src="learninpublic.png" alt="path1"> -->
88+
<img src="learninpublic.png" alt="path1">
89+
90+
</div>
91+
<div class="path-right">
92+
93+
<h2>Learn in Public</h2>
94+
<p>This Concept i got to know from Kunal Kushwaha Developer Advocate at Civo. That Sharing on socials about what you attending, learning , Exploring, Implementing every thing by sociallicing makes you active in front of them and unconditionally
95+
you are contributing to the community. via Linkedlin, Twitter, Blog, Youtube.
96+
</p>
97+
</div>
98+
99+
100+
</div>
101+
<div class="container path02 flex">
102+
<div class="path02-left">
103+
<h2>Open Source</h2>
104+
<p>Open source software can help to grow networks in several ways. First, open source software is often freely available for download, which means that more people can access and use the software. This can help to grow the network of users
105+
and developers working on the project, as more people are able to contribute their skills and resources. In addition, open source software is often developed and maintained by a community of volunteers, which can create a sense of
106+
collaboration and cooperation within the project. This can help to foster a sense of community and belonging among the project's contributors, which can in turn help to grow the network of people working on the project.
107+
108+
109+
</p>
110+
</div>
111+
<div class="path02-right">
112+
<img src="opensource.png" alt="opensorce">
113+
</div>
114+
</div>
115+
116+
117+
</header>
118+
119+
<footer>
120+
<div class="containter contact-section flex">
121+
<a href="#" class="company-logo">
122+
<img src="logo11.png" alt="companylogo">
123+
</a>
124+
125+
<a href="https://github.com/Rohitjakkam">GITHUB</a>
126+
<a href="https://www.linkedin.com/in/rohitjakkam/">LINKEDIN</a>
127+
<a href="https://twitter.com/jakkam_rohit">TWITTER</a>
128+
<a href="">INSTAGRAM</a>
129+
<!-- <a href="mailtorohitjakkam@gmail.com">GMAIL</a> -->
130+
<a href="https://discord.gg/9WeqUCsD">DISCORD</a>
131+
<a href="https://rohitjakkamconnect.slack.com">SLACK</a>
132+
133+
134+
</div>
135+
</footer>
136+
137+
138+
<script src="https://kit.fontawesome.com/743e5eae3a.js" crossorigin="anonymous"></script>
139+
</body>
140+
141+
</html>

‎learninpublic.png

478 KB
Loading

‎logo11.png

43 KB
Loading

‎opensource.png

161 KB
Loading

‎pic0.jpeg

102 KB
Loading

‎pro.jpeg

98.4 KB
Loading

‎profile.jpeg

65.4 KB
Loading

‎style.css

+195
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap');
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
:root {
9+
--primary-text-color: #f8f0e3;
10+
--secondary-text-color: #f8f0e3;
11+
--accent-color: #;
12+
--accent-color-dark: #1d69a3;
13+
--padding-incline-section: 20px;
14+
}
15+
16+
body {
17+
font-family: 'inter', sans-serif;
18+
color: var(--primary-text-color);
19+
background-color: #49404f;
20+
}
21+
22+
h1 {
23+
font-size: 3rem;
24+
}
25+
26+
h2 {
27+
font-size: 2rem;
28+
}
29+
30+
h3 {
31+
font-size: 1.5rem;
32+
}
33+
34+
p {
35+
font-family: 'inter', sans-serif;
36+
font-size: 1.25rem;
37+
color: var(--secondary-text-color);
38+
line-height: 1.8rem;
39+
}
40+
41+
a {
42+
text-decoration: none;
43+
}
44+
45+
ul {
46+
list-style: none;
47+
}
48+
49+
footer {
50+
padding: 40px;
51+
background-color: #2f2933;
52+
}
53+
54+
.flex {
55+
display: flex;
56+
align-items: center;
57+
}
58+
59+
.hover-link {
60+
color: var(--primary-text-color);
61+
}
62+
63+
.hover-link:hover {
64+
color: rgb(253, 245, 245);
65+
transition: 0.2s;
66+
}
67+
68+
.container {
69+
max-width: 1200px;
70+
margin-inline: auto;
71+
padding-inline: var(--padding-incline-section);
72+
}
73+
74+
.main-nav {
75+
margin-top: 20px;
76+
justify-content: space-between;
77+
}
78+
79+
.company-logo img {
80+
width: 200px;
81+
}
82+
83+
.nav-links {
84+
flex-basis: 730px;
85+
}
86+
87+
.nav-links ul {
88+
justify-content: end;
89+
gap: 40px;
90+
}
91+
92+
header {
93+
padding: 50px var(--padding-incline-section);
94+
}
95+
96+
.header-section {
97+
justify-content: center;
98+
gap: 50px;
99+
}
100+
101+
.header-left {
102+
max-width: 40vw;
103+
}
104+
105+
.header-left h1 {
106+
margin-top: 20px;
107+
}
108+
109+
.header-right img {
110+
width: 595px;
111+
border-radius: 1em;
112+
}
113+
/* about section */
114+
115+
.about-section {
116+
margin-top: 100px;
117+
justify-content: center;
118+
gap: 80px;
119+
}
120+
121+
.about-left {
122+
margin-top: 80px;
123+
}
124+
125+
.about-left img {
126+
width: 400px;
127+
border-radius: 10em;
128+
}
129+
130+
.about-right img {
131+
margin-top: 50px;
132+
width: 400px;
133+
border-radius: 10em;
134+
}
135+
136+
.about-left p {
137+
margin-top: 50px;
138+
}
139+
140+
.path01 {
141+
margin-top: 50px;
142+
justify-content: center;
143+
gap: 80px;
144+
}
145+
146+
.path-left img {
147+
margin-top: 80px;
148+
width: 600px;
149+
}
150+
151+
.path-left {
152+
margin-top: 80px;
153+
}
154+
155+
.path-right {
156+
margin-top: 80px;
157+
}
158+
159+
.path-right p {
160+
margin-top: 10px;
161+
}
162+
163+
.path02 {
164+
margin-top: 50px;
165+
gap: 80px;
166+
justify-content: space-between;
167+
}
168+
169+
.path02-right img {
170+
margin-top: 80px;
171+
width: 600px;
172+
}
173+
174+
.contact-section {
175+
gap: 10px;
176+
justify-content: space-between;
177+
align-items: flex-start;
178+
color: #f8f0e3;
179+
}
180+
181+
.contact-section a {
182+
gap: 10px;
183+
flex-direction: column;
184+
align-items: center;
185+
color: #f8f0e3;
186+
}
187+
188+
.contact-section a:hover {
189+
color: #f8f0e3;
190+
transition: 0.2s;
191+
}
192+
193+
.contact-section img {
194+
justify-content: start;
195+
}

0 commit comments

Comments
 (0)