harsh-portfolio/index.html at main · harsh9899100/harsh-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
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <style>
        /* body {
            font-family: Arial, sans-serif;
            background-color: #f6f8fa;
            margin: 0;
            padding: 0;
        } */


        /* Add this to your existing CSS file */

        body {
            /* Your existing styles */
            background-image: linear-gradient(45deg, #000000, #5b86e5);
            font-family: Arial, sans-serif;
            background-size: 400% 400%;
            animation: gradientAnimation 10s ease infinite;
        }

        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        header {
            background-color: transparent;
            color: #0366d6;
            /* padding: 20px; */
            position:static;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            flex-wrap: wrap;
        }

        h1 {
            font-size: 24px;
            color: white;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        nav ul li {
            font-size: 18px;
        }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #00eaff;
            text-decoration: none;
        }

        /* ------------------------------------------------------------------------------- */

        .profile-container {

            max-width: 80%;
            margin: 20px auto;
            background-color: transparent;
            padding: 0px;
            flex-wrap: wrap;

            color: white;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .profile-content {
            /* flex: 0; */
            flex-wrap: wrap;
        }

        .profile-image img {
            width: 250px;
            /* Adjust the width as needed */
            height: 250px;
            /* Adjust the height as needed */
            /* border: 1px solid #808080; */
            /* Add a border around the image */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 2%;
            /* Makes the image circular */
        }


        .container {
            text-align: left;
            max-width: 80%;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 40px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 24px;
        }

        p {
            font-size: 16px;
            line-height: 1.5;
        }

        .project-card {
            background-color: #ffffff;
            margin-top: 40px;
            padding: 40px;
            border: 1px solid #e1e4e8;
            border-radius: 5px;
        }

        .project-name {
            font-size: 18px;
            font-weight: bold;
            color: #0366d6;
        }

        .project-description {
            font-size: 14px;
            color: #586069;
        }

        .project-status {
            font-size: 12px;
            color: #9a9ea3;
        }

        a {
            text-decoration: none;
            color: #0366d6;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <header>
        <div class="header-container">
            <h1><img src="https://avatars.githubusercontent.com/u/123819080?v=4" alt="Harsh-portfolio" srcset="" style="height: 50px;"></h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="profile-container">
        <div class="profile-content">
            <h1 style="font-size: 40px;color: rgb(255, 255, 255);">Harsh Kamleshbhai Patel</h1>
            <p>Software Developer | Web Developer</p>
        </div>
        <div class="profile-image">
            <img src="https://avatars.githubusercontent.com/u/123819080?v=4" alt="Harsh">
        </div>
    </div>

    <hr>

    <section style="text-align: center;">
        <div class="container">
            <h2 style="font-size: 40px;">My Projects</h2>

            <div class="project-card">
                <a class="project-name" href="https://ctcoblr.wixsite.com/my-site">BANGLORE AUTOMATION BUSINESS WEBSITE</a>
                <p class="project-description">

                    Client has a product selling business and they wanted to make a website where details of all their products appear and customers can make direct contact with their team. <br><br>
                    Firstly I designed the frontend and then made a website on WiX.com <br><br>
                    Website link : <a href="http://www.bangaloreautomation.co.in/"> www.bangaloreautomation.co.in </a> <br><br>
                    In future I will also add some functionalities as per client’s requirement.<br>

                </p>
                <p class="project-status">
                    Freelancing Project on Fiverr.com (January 2023)
                </p>
            </div>

            <div class="project-card">
                <a class="project-name" href="#">SERVICES AT FINGERTIPS</a>
                <p class="project-description">

                    Our four team members decided to build the website where home services like beauty and
                    spa at home, cleaning, plumbing, carpentry, appliance repair, painting, etc… are available on a
                    single platform with a unique payment system.<br><br>

                    My role in this project is to build the eye-catching Frontend of the website and make the User
                    friendly interface then implement it with HTML, CSS and some frameworks. I also helped in the
                    backend part while it is under development by another team member.<br><br>

                    The latest version of the project is V3 and the project is under development.<br>

                </p>
                <p class="project-status">GTU Design Engineering Project (June 2022)</p>
            </div>

            <div class="project-card">
                <a class="project-name" href="#">COVID API HANDLING</a>
                <p class="project-description">

                    In my internship I learnt how we can handle the API with the help of ReactJS.<br><br>
                    The best task I got from the internship is to gather the information from the Online API and
                    display the data as per our requirements.<br>

                </p>
                <p class="project-status">INFOLABZ internship Project (July 2023)</p>
            </div>


            <div class="project-card">
                <a class="project-name" href="#">YOUTUBE CLONE</a>
                <p class="project-description">
                     For self practice I made the frontend part of the website which looks like the youtube.com <br>
                </p>
                <p class="project-status">Self Enhancement Project (february 2023)</p>
            </div>

        </div>
    </section>

</body>

</html>