-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (199 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Main CSS-->
<link rel="stylesheet" href="style.css">
<title>Arya Singh - Software Engineer</title>
</head>
<body>
<!--Header-->
<header class="header">
<a href="#" class="logo">Portfolio</a>
<i class="fa-solid fa-bars" id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about" class="active">About Me</a>
<a href="#services" class="active">Services</a>
<a href="#portfolio" class="active">Portfolio</a>
<a href="#contact" class="active">Contact Me</a>
</nav>
</header>
<!--Home Section-->
<section class="home" id="home">
<div class="home-content">
<h3>Hi, I am</h3>
<h1>Arya Singh</h1>
<h3>I am a <span class="multiple-text"></span></h3>
<p>A detail-oriented software engineering student with
a comprehensive understanding of Frontend Development as well as Backend Development along with
the concepts of Data Structures and Algorithms.</p>
<div class="social-media">
<a href="https://github.com/xaryasinghx" target="_blank"><i class="fa-brands fa-square-github"></i></a>
<a href="https://x.com/xaryasinghx" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://instagram.com/xaryasinghx" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="https://linkedin.com/in/xaryasinghx" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="/images/Arya Singh - CV.pdf" target="_blank" class="btn">View CV</a>
</div>
<div class="home-img">
<img src="/images/profiledp.png" alt="">
</div>
</section>
<!--About Section-->
<section class="about" id="about">
<div class="about-img">
<img src="./images/aboutpic.png" alt="">
</div>
<div class="about-content">
<h2 class="heading">ABOUT <span>Me</span></h2>
<h3>Software Engineer</h3>
<p>Hi! I am Arya Singh. I have completed my B. Tech in Computer Science and Engineering from Inderprastha Engineering College, Ghaziabad with an aggregate CGPA of 7.5.
I am a detail-oriented software engineering student with a comprehensive understanding of C++, Java, and Python along with HTML, CSS, and, JavaScript. I am also proficient in Data Structures and Algorithms as well as in the concepts of DBMS and DevOps. I have undertaken several technical internships during my college years and was also engaged in several projects which showcases my skills and abilities.
Possesses strong leadership and communication skills with fluency in English. I am seeking to
continually expand my coding skills and knowledge in the technology field at a professional level with a belief in dedication, hard work, and eagerness to learn to become an asset in any team. I have always aspired to work closely under the mentorship of professionals and experts.
Thanks for your precious time. Let's connect for further communication!</span></p>
<a class="btn">Read More</a>
</div>
</section>
<!--Services Section-->
<section class="services" id="services">
<h2 class="heading">My <span>Services</span></h2>
<div class="services-container">
<div class="services-box">
<i class="fa-solid fa-code"></i>
<h3>Web Development</h3>
<p>Proficient in designing and developing dynamic, responsive websites and web applications. Skilled in HTML, CSS, JavaScript, and popular frameworks like React and Angular. Experienced in building RESTful APIs and integrating with backend systems. Knowledgeable in web security best practices and optimizing for performance and SEO. Able to collaborate with designers, project managers, and other developers to deliver high-quality web solutions on time and within budget.</p>
<a class="btn">Read more</a>
</div>
<div class="services-box">
<i class="fa-solid fa-palette"></i>
<h3>UI/UX Development</h3>
<p>Proven ability to design and develop intuitive, visually appealing user interfaces for websites and
applications. Skilled in creating wireframes, mockups, and prototypes using tools like Figma and
Adobe XD. Experienced in applying user-centered design principles to create seamless, engaging
experiences.
Knowledgeable in responsive design, accessibility standards, and best practices for
mobile-first development. Able to translate design concepts into clean, semantic HTML/CSS code and
optimize for performance and cross-browser compatibility.</p>
<a class="btn">Read more</a>
</div>
<div class="services-box">
<i class="fa-brands fa-android"></i>
<h3>Android Development</h3>
<p>Proficient in developing robust, feature-rich Android applications using Java and Kotlin. Skilled in
implementing Material Design guidelines and best practices for Android development. Experienced in
building apps that leverage device sensors, location services, and other native Android APIs.
Knowledgeable in Android architecture patterns like MVP and MVVM, and in using popular libraries and
frameworks like Room, RxJava, and Retrofit. Able to optimize app performance, handle runtime
permissions, and ensure compatibility across different Android versions and device configurations.
</p>
<a class="btn">Read more</a>
</div>
</div>
</section>
<!--Portfolio-->
<section class="portfolio" id="portfolio">
<h2 class="heading">Latest <span>Projects</span></h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="./images/1.jpg" alt="">
<div class="portfolio-layer">
<h4>SkillUp</h4>
<p>SkillUp offers a wide range of certified courses uploaded by verified teachers and educators in
multiple
languages including regional languages such as Tamil, Telugu, Malayalam, etc.</p>
<a href="https://github.com/xaryasinghx/skillup.git" target="_blank"><i
class="fa-solid fa-up-right-from-square"></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="./images/2.jpg" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rerum incidunt a quam ex, sit
distinctio accusamus, enim optio culpa, reprehenderit tempora similique? Voluptatibus sunt
praesentium nulla enim doloribus amet.</p>
<i class="fa-solid fa-up-right-from-square"></i>
</div>
</div>
<div class="portfolio-box">
<img src="./images/3.jpg" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rerum incidunt a quam ex, sit
distinctio accusamus, enim optio culpa, reprehenderit tempora similique? Voluptatibus sunt
praesentium nulla enim doloribus amet.</p>
<i class="fa-solid fa-up-right-from-square"></i>
</div>
</div>
<div class="portfolio-box">
<img src="./images/4.jpg" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rerum incidunt a quam ex, sit
distinctio accusamus, enim optio culpa, reprehenderit tempora similique? Voluptatibus sunt
praesentium nulla enim doloribus amet.</p>
<i class="fa-solid fa-up-right-from-square"></i>
</div>
</div>
<div class="portfolio-box">
<img src="./images/5.jpg" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rerum incidunt a quam ex, sit
distinctio accusamus, enim optio culpa, reprehenderit tempora similique? Voluptatibus sunt
praesentium nulla enim doloribus amet.</p>
<i class="fa-solid fa-up-right-from-square"></i>
</div>
</div>
<div class="portfolio-box">
<img src="./images/6.jpg" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima rerum incidunt a quam ex, sit
distinctio accusamus, enim optio culpa, reprehenderit tempora similique? Voluptatibus sunt
praesentium nulla enim doloribus amet.</p>
<i class="fa-solid fa-up-right-from-square"></i>
</div>
</div>
</div>
</section>
<!--Contact Me-->
<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me</span></h2>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email ID"></input>
</div>
<div class="input-box">
<input type="number" placeholder="Mobile Number">
<input id="email" type="text" placeholder="Email Subject"></input>
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Your message"></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
</section>
<!--Footer-->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2024 by Arya Singh | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class="fa-solid fa-angle-up"></i></a>
</div>
</footer>
<!--Scroll Reveal JS-->
<script src="https://unpkg.com/scrollreveal"></script>
<!--Typed JS-->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<!--Main JS-->
<script src="main.js"></script>
</body>
</html>