Portfolio/index.html at main · subha2414/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
198
199
<!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="#">SDE</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>4th Year Student</h7>
                <h1>Hi, I am <span> Subhadeep De </span><br>Computer Science Student</h1>
            </div>
        </div>

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

        <div id="about">
            <div class="container">
                <div class="row">
                    <div class="about-col-1">
                        <img src="SUBHA.jpg">
                    </div>
                    <div class="about-col-2">
                        <h2 class="sub-title">About Me</h2>
                        <p>Hey, This is Subhadeep De all the way from India. I am currently studying my 4th year Btech in <span>SRM Institute of Science and Technology</span> in <span>Chennai</span>. I am a hardworking and motivated <span>Computer Science Engineer</span> who has aquired extensive knowledge in the field. I am still studying but out of my own passion i have worked in <span>Web Designing</span> in the front end you can see my work in my gitHub profile.</p>


                    <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>2024 - 2025</span><br>Worked on major projects.</li>
                            <li><span>2021 - 2022</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 DAV Model School</li>
                            <li><span>2016 - 2020</span><br>Completed my 10th from DAV Model school</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="AD.jpeg">
                    <div class="layer">
                        <h3>Social Media App</h3>
                        <p>The app connects you to the talented people around the world. Download it from Play Store.</p>
                        <a href="https://www.instagram.com/" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    </div>
                </div>
                <div class="work">
                    <img src="WD1.jpg">
                    <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="UIUX.jpg">
                    <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://www.flipkart.com/" 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> subhadeepde24@gmail.com</p>
                    <p><a href="#"  class="fas fa-phone"></a>+91 9475373357</p>
                    <div class="social-icons">
                        <a href="https://github.com/subha2414" target="_blank"><i class="fab fa-github"></i></a>
                        <a href="https://twitter.com/subhadeep2414?t=ZNHDHYVsc68uyb-fh16c4A&s=09" target="_blank"><i class="fab fa-twitter-square"></i></a>
                        <a href="https://www.linkedin.com/in/subhadeep-de-ab885a254" target="_blank"><i class="fab fa-linkedin"></i></a>
                        <a href="https://instagram.com/itz_subhadeep.de?igshid=ZDdkNTZiNTM=" 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 © Subhadeep. 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>