WebDeveloper/index.html at main · AviralPatel0526/WebDeveloper · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./output.css">
    <title>My Portfolio</title>
    <style>
        .ham{
            display: block;
        }

    </style>
</head>
<header>
    <nav class="fixed min-w-full">
        <div class="box1 flex justify-between h-[8vh] bg-purple-400 items-center">
            <div class="box1left px-2 sm:px-8"><h1 class="text-white font-bold text-2xl">Aviral Patel</h1></div>

            <div class="box1right px-2 sm:px-5"><button class="rounded-full bg-white w-7 h-7 hover:bg-purple-200 hover:w-8 hover:h-8" id="toggl">☰</button></div>
        </div>
        <div class="box2 hidden" id="abc">
            <div class="box21 h-[8vh] bg-purple-300 text-center pt-[1vh]"><a href="#hme" class="text-white hover:text-purple-900 hover:text-[20px]">Home</a></div><hr>
            <div class="box22 h-[8vh] bg-purple-300 text-center pt-[1vh]"><a href="#abt" class="text-white hover:text-purple-900 hover:text-[20px]">About</a></div><hr>
            <div class="box23 h-[8vh] bg-purple-300 text-center pt-[1vh]"><a href="#cnt" class="text-white hover:text-purple-900 hover:text-[20px]">Contact Me</a></div><hr>
        </div>
    </nav>
</header>
<body class="bg-white" id="hme">
   <div class="box3 md:flex md:justify-evenly md:items-center">
    <div class="box31 h-[70vh] flex justify-center items-center">
        <div>
      <img src="./WhatsApp Image 2023-08-11 at 19.30.15.jpg" class="w-[45vh] h-[45vh] rounded-full" alt="avirals image">
    </div>
    </div>
    <div class="box32">
        <div>
            <h1 class="text-center text-2xl font-medium">Passionate Front-End developer</h1>
            <p class="text-center py-2 text-[20px]">Hi, I'm Aviral Patel. A passionate Programmer and Developer based in Raipur, India. 📍</p>
            <div class="flex justify-center py-2">
                <a href="https://www.linkedin.com/in/aviral-patel-0b4194260/"><img src="./icons8-linkedin-30.png" alt="linkedin icon"></a>
                <a href="https://github.com/AviralPatel0526"><img src="./icons8-github-30.png" alt="github icon"></a>
            </div>
            <div class="flex justify-center md:gap-2 py-2 pb-5">
                <h1 class="font-medium md:text-2xl ">Tech Stack :</h1>
                <img src="./icons8-html-48.png" alt="html icon">
                <img src="./icons8-css-48.png" alt="css icon">
                <img src="./icons8-javascript-48.png" alt="javascript icon">
                <img src="./icons8-tailwind-css-48.png" alt="tailwind icon">
            </div>
        </div>
    </div>
   </div>
 <div class="box4 md:flex md:justify-evenly md:items-center" id="abt">
    <div class="box41 h-[70vh] flex justify-center items-center md:order-1">
        <div>
            <img src="./developer.png" class="w-[45vh] h-[45vh]" alt="developer png">
        </div>
    </div>
    <div class="box42 text-center md:w-[49vw]">
        <div>
            <h1 class="font-medium py-1 text-2xl">About Me</h1>
            <h1 class="font-medium py-1 text-2xl">A dedicated Programmer and Developer based in Raipur, India . 📍</h1>
            <p class="py-2">As a Sophomore, I possess an impressive arsenal of skills in HTML, CSS, Tailwind, JavaScript. I excel in designing and maintaining responsive websites and applications that offer a smooth user experience. My expertise lies in crafting dynamic, engaging interfaces through writing clean and optimized code and utilizing cutting-edge development tools and techniques.</p>

        </div>
    </div>
 </div>
 <hr class="">
 <div class="pt-10">
    <h1 class="ml-[10vw] sm:ml[20vw] text-3xl font-medium pr-4 text-center sm:text-left">Projects :</h1>
    <h1 class="ml-[10vw] sm:ml[20vw] text-3xl font-medium py-1 pr-4 text-center sm:text-left">Each project is a unique piece of development 🧩</h1>

 <section class="text-gray-600 body-font my-20 bg-purple-400 w-[90vw] ml-[5vw] rounded-2xl sm:w-[80vw] sm:ml-[10vw]">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
        <img class="object-cover object-center rounded-2xl" alt="hero" src="./designagency.png">
      </div>
      <div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
            Design Agency
        </h1>
        <h1 class="title-font sm:text-2xl text-2xl mb-4 font-medium text-gray-900">
            Vanilla CSS
        </h1>
        <p class="mb-8 leading-relaxed text-white">A Design Agency Website provides digital project branding and designs for developing beautiful and responsive web designs.</p>
        <div class="flex justify-center">
          <a href="https://github.com/AviralPatel0526/TechnocracyProject5" target="_blank"> <button class="inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Code<img src="./icons8-github-30.png" alt=""></button></a>
         <a href="https://aviralpatel0526.github.io/TechnocracyProject5/" target="_blank"> <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Live<img src="./icons8-website-32.png" alt=""></button></a>
        </div>
      </div>
    </div>
  </section>

  <section class="text-gray-600 body-font my-20 bg-purple-400 w-[90vw] ml-[5vw] rounded-2xl sm:w-[80vw] sm:ml-[10vw]">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
        <img class="object-cover object-center rounded-2xl" alt="hero" src="./travelapp.png">
      </div>
      <div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
          Travel Agency
        </h1>
        <h1 class="title-font sm:text-2xl text-2xl mb-4 font-medium text-gray-900">
         Vanilla CSS, JS
           </h1>
        <p class="mb-8 leading-relaxed text-white">Travel the most beautiful places in the world and plan your trip by the help the help of a beautiful Travel agengy.</p>
        <div class="flex justify-center">
            <a href="https://github.com/AviralPatel0526/TCPtechTask" target="_blank"> <button class="inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Code<img src="./icons8-github-30.png" alt=""></button></a>
            <a href="https://aviralpatel0526.github.io/TCPtechTask/" target="_blank"> <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Live<img src="./icons8-website-32.png" alt=""></button></a>
        </div>
      </div>
    </div>
  </section>

  <section class="text-gray-600 body-font my-20 bg-purple-400 w-[90vw] ml-[5vw] rounded-2xl sm:w-[80vw] sm:ml-[10vw]">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
        <img class="object-cover object-center rounded-2xl" alt="hero" src="./drumkit.png">
      </div>
      <div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
         Drum Kit
        </h1>
        <h1 class="title-font sm:text-2xl text-2xl mb-4 font-medium text-gray-900">
            Vanilla CSS, JS
           </h1>
        <p class="mb-8 leading-relaxed text-white">Drum Kit website provides user to play their favorite drum combinations without having any need of physical instruments.</p>
        <div class="flex justify-center">
            <a href="https://github.com/AviralPatel0526/Drummer" target="_blank"> <button class="inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Code<img src="./icons8-github-30.png" alt=""></button></a>
            <a href="https://aviralpatel0526.github.io/Drummer/" target="_blank"> <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Live<img src="./icons8-website-32.png" alt=""></button></a>
        </div>
      </div>
    </div>
  </section>
  <section class="text-gray-600 body-font bg-purple-400 my-20 w-[90vw] ml-[5vw] rounded-2xl sm:w-[80vw] sm:ml-[10vw]">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
        <img class="object-cover object-center rounded-2xl" alt="hero" src="./dicegame.png">
      </div>
      <div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
        Dice Game
        </h1>
        <h1 class="title-font sm:text-2xl text-2xl mb-4 font-medium text-gray-900">
            Vanilla CSS, JS
           </h1>
        <p class="mb-8 leading-relaxed text-white">The Dice Game allows users an alternative to heads-tails game. Do use it next time instead of flipping a coin.</p>
        <div class="flex justify-center">
            <a href="https://github.com/AviralPatel0526/TheDiceGame" target="_blank"> <button class="inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Code <img src="./icons8-github-30.png" alt=""></button></a>
            <a href="https://aviralpatel0526.github.io/TheDiceGame/" target="_blank"> <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Live <img src="./icons8-website-32.png" alt=""></button></a>
        </div>
      </div>
    </div>
  </section>
</div>
<hr>
<section class="body-font" id="cnt">
    <div class="container px-5 py-24 mx-auto">
      <div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">
       <h1 class="font-bold text-2xl" >Contact</h1>
       <h1 class="font-bold text-2xl">Don't be shy! Call me up!</h1>
       <div class="box6 inline-flex gap-3 pt-2">
      <a href="https://github.com/AviralPatel0526"> <img src="./icons8-github-30.png" alt="github icon"></a>
      <a href="https://www.linkedin.com/in/aviral-patel-0b4194260/"> <img src="./icons8-linkedin-30.png" alt="linkedin icon"></a>
      <a href="https://www.instagram.com/aviral.patel.26/"> <img src="./icons8-instagram-30.png" alt="instagram icon"></a>
       </div>
       <br>
        <span class="inline-block h-1 w-10 rounded bg-purple-400 mt-8 mb-6"></span>
        <h2 class="font-medium title-font tracking-wider text-sm">AVIRAL PATEL</h2>
        <p >Junior Front-End Developer</p>
      </div>
    </div>
  </section>

  <footer>
    <div class="box8 h-[8vh] flex justify-center items-center bg-purple-400">
        <div>
            <p class="text-white">Copyright &copy , All rights reserved</p>
        </div>
    </div>
  </footer>
   <script>

document.getElementById("toggl").addEventListener("click",function (){

document.querySelector(".box2").classList.toggle("ham");
});

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