Web-Developer-Portfolio-Tailwind-Codewell/index.html at main · MichaelKanios/Web-Developer-Portfolio-Tailwind-Codewell · 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
<!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="custom.css">
    <title>tailwindcss</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="overflow-x-hidden px-5 md:px-20 mt-10 bg-black text-white font_body" >

  <div class="flex justify-between pb-2 sticky top-0 bg-black font_nav">
    <a class="text-lg" href="#">Johnathan Specter</a>
    <ul class="hidden lg:flex text-white/75">
        <li class="px-2 "><a href="">Articles</a></li>
        <li class="px-2"><a href="">Chats</a></li>
        <li class="px-2"><a href="">Awards</a></li>
        <li class="px-2"><a href="">About</a></li>
    </ul>
    <a class="hidden md:flex lg:flex bg-yellow-500 py-2 px-4 rounded text-black"href="#">Get in touch</a>
    <button class="visible md:hidden" data-collapse-toggle="navbar-hamburger" type="button" aria-controls="navbar-hamburger" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

   <div class="pb-12 pt-20 ">
     <div class="text-white font-semi-bold text-4xl md:text-6xl pb-5 ">
       <h1>Helping companies build <br>better,scalable software.</h1>
    </div>
    <div class="text-lg text-white/75">
      <p>Award-winning web developer and author, with over 15+ years of working</p>
      <p>experience with Fortune 500 companies like Apple, Google, Facebook, and</p>
      <p>more.</p>
    </div>
  </div>
   <div class="md:flex justify-between flex-wrap grid grid-cols-2 justify-items-center pt-12 pb-20">
     <div><img src="Walmart.svg" alt=""></div>
     <div><img src="JP Morgan.svg" alt=""></div>
     <div><img src="Visa.svg" alt=""></div>
     <div><img src="Tinder.svg" alt=""></div>
     <div><img src="Samsung.svg" alt=""></div>
     <div><img src="Verizon.svg" alt=""></div>
   </div>

   <div class="flex flex-col md:flex-row justify-between justify-center gap-4">
     <div class="">
       <img class="pb-10"src="Spense.png" alt="">
       <a class="text-4xl"href="">Spense.com<span>&#8594;</span></a>
       <div class="py-5 text-md text-white/75">
         <p>Rethinking the way writers get paid, an open-source platform </p>
         <p>designed to help writers focus more on writing, and less on </p>
         <p>when and how they'll get paid. Project in collaboration with</p>
         <p>Codewell.cc</p>
       </div>

     </div>
     <div class="YelpCamp">
       <img class="pb-10" src="YelpCamp.png" alt="">
       <a class="text-4xl" href="">YelpCamp.com<span>&#8594;</span></a>
       <div class="py-5 text-md text-white/75">
         <p>Allowing backpack travelers to perfectly plan their trip </p>
         <p>through an open-source platform similar to TripAdvisor. With</p>
         <p>over 1m MAU, YelpCamp has been the crowd's favorite in</p>
         <p>2021.</p>
       </div>
     </div>
   </div>

   <div class="flex flex-col md:flex-row py-10 bg-gray-800 -mx-20 px-20 gap-10 md:gap-40 text-white/75 ">
     <div >
         <h2 class="text-4xl text-white">A co-founder at one of the<br>world's largest communities.</h2>
         <p class="py-5">The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
         <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new</p>
         <p> world of opportunities.</p>
     </div>
     <div class="">
       <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
       <p class="py-10">A quote I live by perfectly illustrates what I mean.</p>
       <p>"How big would you dream, if you knew you wouldn't fail?"You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader in something you're passionate about.</p>
       <p class="py-10">I'm happy to chat over coffee some time about how I can help your company.</p>
     </div>
   </div>

   <div class="py-20 text-white/75">
       <h2 class="text-4xl text-white pb-5">Interested in working with me?</h2>
       <p>I'm active on all social media platforms listed below,</p>
       <p>but you can also me an email and I will get back to you within 24-48</p>
       <p class="pb-5"> hours.</p>
       <a class="bg-yellow-500 py-2 px-4 rounded text-black "href="#">Get in touch</a>
   </div>


<footer>
 <div class="flex bg-gray-800 -mx-20 px-20 justify-between py-8">
   <div class="">
     <h4>Johnathan Specter</h4>
   </div>
   <div class="flex">
     <img src="Twitter.svg" alt="">
     <img class="px-3"src="LinkedIn.svg" alt="">
     <img src="Github.svg" alt="">
   </div>

 </div>

</footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
  </body>
</html>