portfolio/index.html at main · premsingh1507/portfolio · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>My Own Space</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device+width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="resume.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/16f5dcd0be.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="header">
            <div class="navbar">
                <div class="logo">
                    <a href="#">PSR</a>
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="#header">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#Portfolio">Portfolio</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="header-text">
                <h7>2nd Year Student</h7>
                <h1>Hi, I am <span> Prem Singh </span><br>Data Science Enthusiast</h1>
            </div>
        </div>

 <!---------------about---------------->

        <div id="about">
            <div class="container">
                <div class="row">
                    <div class="about-col-1">
                        <img src="KING.jpg">
                    </div>
                    <div class="about-col-2">
                        <h2 class="sub-title">About Me</h2>
                        <p>Hey, This is Prem Singh all the way from West Bengal. I am currently studying my 2nd year Btech in <span>SRM Institute of Science and Technology</span> in <span>Chennai</span>. I am a highly motivated and detail-oriented <span>Computer Science Engineer</span> who has aquired extensive knowledge in the field. Outside of work, I enjoy hiking, reading, and spending time with my family.

                    <div class="tab-titles">
                        <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
                        <p class="tab-links" onclick="opentab('experience')">Experience</p>
                        <p class="tab-links"onclick="opentab('education')">Education</p>
                    </div>
                    <div class="tab-contents active-tab" id="skills">
                        <ul>
                            <li><span>UI/UX</span><br>Designing Web/app interfaces</li>
                            <li><span>Web development</span><br>Designing Web app development</li>
                            <li><span>App development</span><br>Buiding Android/ios apps</li>
                        </ul>
                    </div>
                    <div class="tab-contents" id="experience">
                        <ul>
                            <li><span>2021 - Current</span><br>Working in simple front end web development projects.</li>
                            <li><span>2019 - 2021</span><br>Started to learn Web development</li>
                            <li><span>2018 - 2019</span><br>Learnt C, C++, Python, Html, CSS</li>
                        </ul>
                    </div>
                    <div class="tab-contents" id="education">
                        <ul>
                            <li><span>2022 - Current</span><br>Btech from SRM Institute of Science and Technology</li>
                            <li><span>2020 - 2022</span><br>Senior Secondary from Delhi Public School, Durgapur</li>
                            <li><span>2016 - 2020</span><br>Completed my 10th from Delhi Public School, Durgapur</li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>


<!--------------------services-------------------->
       <div id="services">
        <div class="container">
            <h2 class="sub-title">My Services</h2>
            <div class="services-list">
                <div class="WD">
                    <i class="fa-solid fa-code"></i>
                    <h2>Web Development </h2>
                    <p>Web development, also known as website development, refers to the tasks associated with creating, building, and maintaining websites and web applications that run online on a browser.</p>
                    <a class="button" href="https://www.w3schools.com/whatis/" target="_blank">Learn more</a>
                </div>
                <div class="UIUX">
                    <i class="fa-solid fa-crop-simple"></i>
                    <h2>UI/UX Development </h2>
                    <p>A UI/UX developer is a specialized software developer who focuses on creating user interfaces and user experiences for a variety of products, such as websites and mobile apps. </p>
                    <a class="button" href="https://www.w3schools.com/css/css3_user_interface.asp" target="_blank">Learn more</a>
                </div>
                <div class="AD">
                    <i class="fa-brands fa-apple"></i>
                    <h2>App Development </h2>
                    <p>Mobile application development is the process of creating software applications that run on a mobile device, and a typical mobile application utilizes a network connection to work with remote computing resources.</p>
                    <a class="button" href="https://www.w3schools.com/appml/" target="_blank">Learn more</a>
                </div>
            </div>
        </div>
       </div>
<!--------------------Portfolio--------------------->

    <div id="Portfolio">
        <div class="container">
            <h2 class="sub-title">My Work</h2>
            <div class="work-list">
                <div class="work">
                    <img src="netfl.jpeg">
                    <div class="layer">
                        <h3>Netflix Clone App</h3>
                        <p>The app helps you watch movies and series released in ott platforms.</p>
                        <a href="https://codedreaming007.github.io/Netflix/" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    </div>
                </div>
                <div class="work">
                    <img src="spoti.jpeg">
                    <div class="layer">
                        <h3>Music App</h3>
                        <p>This app helps you hear a lot of songs to calm your body and soul and get a break from your corporate life.</p>
                        <a href="https://www.spotify.com/" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    </div>
                </div>
                <div class="work">
                    <img src="shopp.jpeg">
                    <div class="layer">
                        <h3>Online Shopping App</h3>
                        <p>This app helps you shop different brands of cloths according to your own intrest, ask for a brand and purchase your liked cloth.</p>
                        <a href="https://codedreaming007.github.io/Shopping-website-clone/" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!--------------------Contact--------------------->
    <div id="contact">
        <div class="container">
            <div class="row">
                <div class="contact-left">
                    <h2 class="sub-title">Contact me</h2>
                    <p><a href="#"  class="fas fa-paper-plane"></a> premsinghnib@gmail.com</p>
                    <p><a href="#"  class="fas fa-phone"></a>+91 9800008807</p>
                    <div class="social-icons">
                        <a href="https://github.com/premsingh1507" target="_blank"><i class="fab fa-github"></i></a>
                        <a href="https://www.facebook.com/dhoni.singhrathore?mibextid=LQQJ4d" target="_blank"><i class="fab fa-facebook"></i></a>
                        <a href="https://www.linkedin.com/in/prem-singh-890a37290?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app" target="_blank"><i class="fab fa-linkedin"></i></a>
                        <a href="https://instagram.com/_prem_singh_rajput__?igshid=YTQwZjQ0NmI0OA==" target="_blank"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="contact-right">
                    <form>
                        <input type="text" name="Name" placeholder="Your Name" required>
                        <input type="email" name="email" placeholder="Your Email" required>
                        <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
                        <button type="submit" class="btn btn2">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright © Prem. Made with <i class="fas fa-heart"></i> using Hypertext Markup Language and Cascading StyleSheet.</p>
        </div>
    </div>


        <script>

            var tablinks = document.getElementsByClassName("tab-links");
            var tabcontents = document.getElementsByClassName("tab-contents");

            function opentab(tabname){
                for(tablink of tablinks){
                    tablink.classList.remove("active-link");
                }
                for(tabcontent of tabcontents){
                    tabcontent.classList.remove("active-tab");
                }
                event.currentTarget.classList.add("active-link");
                document.getElementById(tabname).classList.add("active-tab");
            }

        </script>
    </body>
</html>