Portfolio/index.html at main · RJsROOM/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
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PERSONAL PORTFOLIO DEMO</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/9baa16ad4b.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="first-view">
        <div class="container">
            <nav>
                <img src="images/logo.png" title="#" class="logo">
                <ul id="sidemenu">
                    <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>
                    <li><i class="fa-solid fa-circle-xmark" onclick="closemenu()"></i>
                </ul>
                <i class="fa-solid fa-bars" onclick="openmenu()"></i>
            </nav>
            <div class="header-text">
                <p>SOFTWARE DEVELOPER</p>
                <h1>Hi, I'm <span>Rakshit</span><br>from UP,India</h1>
            </div>
        </div>
    </div>
    <!---------------ABOUT----------------->
    <div id="about">
        <div class="container">
            <div class="row">
                <div class="about-col-1">
                    <img src="images/WhatsApp Image 2025-05-24 at 21.26.30_da94ebb5.png" alt="#">
                </div>
                <div class="about-col-2">
                    <h1 class="sub-title">About Me</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum quam hic officia fugiat iusto ea earum quod deleniti, at molestiae accusantium eaque repellendus ipsam saepe? Ex vel explicabo laboriosam et.
                    Eaque asperiores adipisci corporis id vero est ex. Dicta maxime ex mollitia ab veritatis corporis in temporibus facere, dolorem maiores velit numquam quis optio. Illo sequi ipsam sapiente excepturi qui?
                    Voluptates quasi deserunt vero ut tempore animi magni repellat laboriosam! Labore iste sunt nostrum dolore magnam quam, saepe quidem tenetur eos beatae cupiditate necessitatibus nisi! Ipsum, assumenda? Delectus, atque mollitia.
                    Molestias voluptates rem omnis iure explicabo atque vero similique repellendus adipisci ipsum eaque mollitia assumenda architecto, aspernatur maxime quisquam! Delectus ab saepe exercitationem a labore. Perspiciatis sequi numquam praesentium maxime.</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>Frontend Development</span><br>Building Frontend web applications.</li>
                            <li><span>Data Visalization</span><br>Creationg Analytical research in form of charts and graphs.</li>
                            <li><span>Software Development</span><br>Building end-to-end solutions to tasks which makes the daily work easier.</li>
                        </ul>
                    </div>
                    <div class="tab-contents" id="experience">
                        <ul>
                            <li><span>2022-current</span><br>Self-paced Learning</li>
                            <li><span>2024-2025</span><br>Self-paced Learning</li>
                            <li><span>2025-current</span><br>Start-up based publicly profitable company</li>
                        </ul>
                    </div>
                    <div class="tab-contents" id="education">
                        <ul>
                            <li><span>2019</span><br>Metriculation studies from HMS,Varanasi.</li>
                            <li><span>2021</span><br>High-school from DALIMSS Sunbeam school,Varanasi.</li>
                            <li><span>2022-ongoing</span><br>B-tech in Computer Science from Dehradun.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--------------SERVICES--------------->
    <div id="services">
        <div class="container">
            <h1 class="sub-title">My Services</h1>
            <div class="services-list">
                <div>
                    <i class="fa-brands fa-webflow"></i>
                    <h2>Web Development</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsa esse voluptas numquam nemo quia</p>
                    <a href="#">Learn More</a>
                </div>
                <div>
                    <i class="fa-solid fa-chart-pie"></i>
                    <h2>Data Visualization</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsa esse voluptas numquam nemo quia</p>
                    <a href="#">Learn More</a>
                </div>
                <div>
                    <i class="fa-brands fa-connectdevelop"></i>
                    <h2>Sostware Development</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet ipsa esse voluptas numquam nemo quia</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
        </div>
    </div>
     <!--------------PORTFOLIO--------------->
     <div id="portfolio">
        <div class="container">
            <h1 class="sub-title">MY Work</h1>
            <div class="work-list">
                <div class="work">
                    <img src="images/work-1.png" alt="#">
                    <div class="layer">
                        <h3>Intracity clothe Searching Application</h3>
                        <p>This application lets you search for your desired clothes, whether they are available in your city or not.</p>
                        <a href="#" title="#"><i class="fa-solid fa-square-up-right"></i></a>
                    </div>
                </div>
                <div class="work">
                    <img src="images/work-2.png" alt="#">
                    <div class="layer">
                        <h3>Website ROI Analysis</h3>
                        <p>This is an analytical result of a website's ROI report.</p>
                        <a href="#" title="#"><i class="fa-solid fa-square-up-right"></i></a>
                    </div>
                </div>
                <div class="work">
                    <img src="images/work-3.png" alt="#">
                    <div class="layer">
                        <h3>Weather Forecast Application</h3>
                        <p>Here's is the weather forecasting application which lets you know of the weather at your place.</p>
                        <a href="#" title="#"><i class="fa-solid fa-square-up-right"></i></a>
                    </div>
                </div>
            </div>
            <a href="#" title="#" class="btn">See More</a>
        </div>
     </div>
     <!--------------CONTACT--------------->
     <div id="contact">
        <div class="container">
            <div class="row">
                <div class="contact-left">
                    <h1 class="sub-title">Contact Me</h1>
                    <p><i class="fa-solid fa-paper-plane"></i>rakshitjha05@gmail.com</p>
                    <p><i class="fa-solid fa-phone"></i>9335891414</p>
                    <div class="social-icons">
                        <a href="httphttps://www.instagram.com/_rakshitjha/s://www.facebook.com/rakshitkumar.jha.9/" title="#"><i class="fa-brands fa-facebook"></i></a>
                        <a href="https://www.instagram.com/_rakshitjha/" title="#"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://www.linkedin.com/in/rakshit-jha-614412204/" title="#"><i class="fa-brands fa-linkedin"></i></a>
                    </div>
                    <a href="images/rakshit resume 2.pdf" download="" class="btn btn2">Download Resume</a>
                </div>
                <div class="contact-right">
                    <form name="submit-to-google-sheet">
                        <input type="text" name="Name" placeholder="Your Name" required>
                        <input type="email" name="Email" placeholder="Your Email" required>
                        <textarea name="Message" rows="5" placeholder="Enter Your Message"></textarea>
                        <button type="submit" class="btn btn2">Submit</button>
                    </form>
                    <span id="msg"></span>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright @Rakshit. Made by <i class="fa-solid fa-heart"></i> RJsROOM</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>
    <script>
        var sidemenu=document.getElementById("sidemenu");
        function openmenu(){
            sidemenu.style.right="0";
        };
        function closemenu(){
            sidemenu.style.right="-200px";
        };
    </script>
    <script>
        const scriptURL = 'https://script.google.com/macros/s/AKfycbxDVxcWdSpEAwvXXstujz1z2htDqvF_8gjP566zcbWHido3GgLkrqfo1koKuRaYsLY-/exec'
        const form = document.forms['submit-to-google-sheet']
        const msg=document.getElementById("msg")

        form.addEventListener('submit', e => {
        e.preventDefault()
        fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response => {
            msg.innerHTML="Message sent successfully."
            setTimeout(function(){
                msg.innerHTML=""
            },5000);
            form.reset();
        })
        .catch(error => console.error('Error!', error.message))
        })
    </script>
</body>
</html>