Web-Developer-Portfolio/index.html at master · aayusranjan/Web-Developer-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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>Landing Page</title>
</head>
<body class="bg-black text-white">
    <!-- Navbar -->
    <nav class="relative container mx-auto p-6">
        <!-- flex container -->
        <div class="flex item-center justify-between">
            <!-- logo -->
            <div class="pt-2">
                <p class="text-lg">Johanathan Speeter</p>
            </div>
            <!-- Menu Items -->
            <div class="hidden md:flex space-x-6 pt-2">
                <a href="#" class="hower:text-gray-800 ">Articles</a>
                <a href="#" class=" hower:text-gray-500">Chats</a>
                <a href="#" class="hower:text-gray-500">Awards</a>
                <a href="#" class="hower:text-gray-500">About</a>
            </div>
            <!-- button -->
            <div class="hidden p-3 pt-2 px-6 md:block">
                <a href="#" class="focus:outline-none text-black bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900">Get in touch</a>
            </div>
        </div>
    </nav>
    <!-- Hero Section -->
    <section id="hero">
        <!-- Hero-Left items -->
        <div class="container px-6 py-16 mx-auto">
            <div class="items-center lg:flex">
                <div class="w-full lg:w-full">
                    <div class="lg:max-w-xl">
                        <h1 class="text-4xl font-bold text-center md:text-5xl md:text-left">
                            Helping companies Build better, scalable software.
                        </h1>
                        <p class="text-justify pt-6 text-gray-500 md:text-left">Award-winning web developer and author, with over 15+ years
                            of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- company  -->
    <sectioin id="company">
        <div class="container md:flex  justify-between mx-auto p-6">
            <img src="Assets/Logos/JP Morgan.svg" alt="">
            <img src="Assets/Logos/Samsung.svg" alt="">
            <img src="Assets/Logos/Tinder.svg" alt="">
            <img src="Assets/Logos/Verizon.svg" alt="">
            <img src="Assets/Logos/Visa.svg" alt="">
            <img src="Assets/Logos/Walmart.svg" alt="">
        </div>
    </sectioin>
    <!-- portfolio -->
    <section id="portfolio">
        <div class="container px-6 mx-auto">
            <div class="flex flex-col md:flex-row md:justify-between">
                <div>
                    <img src="Assets/Spense.png" alt="">
                    <a href="#" class="text-lg">Spense.com</a>
                    <p class="py-6 md:max-w-lg">
                        Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on
                        when and how they'll get paid. Project in collaboration with Codewell.cc
                    </p>
                </div>
                <div>
                    <img src="Assets/YelpCamp.png" alt="">
                    <a href="" class="text-lg">YelpCamp.com</a>
                    <p class="py-6 md:max-w-lg">
                        Allowing backpack travelers to perfectly plan their trip through an open-source platform similar to TripAdvisor. With
                        over 1m MAU, YelpCamp has been the crowd's favorite in 2021
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="about">
        <div class="bg-gray-800">
            <div class="container px-6 mx-auto">
                <div class="flex flex-col md:flex-row md:justify-between">
                    <div>
                        <h1 class="4xl md:5xl">A co-founder at one of the world's largest communities.</h1>
                        <p class="py-6 md:max-w-lg">
                            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 class="py-6 md:max-w-lg">
                            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 developer and open them to a whole new world of opportunities.
                        </p>
                    </div>
                    <div>
                        <p class="py-6 md:max-w-lg">
                            As developer, you have everything available to you and all that's holding you back is yourself.
                        </p>
                        <p class="py-6 md:max-w-lg">
                            A qoute I live by perfectly illustrates what I mean.
                        </p>
                        <p class="py-6 md:max-w-lg">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus itaque excepturi eveniet voluptatibus dicta saepe. Assumenda, adipisci repellat at iste odit rem saepe commodi asperiores dignissimos eveniet dolores quos quaerat.
                        </p>
                        <p class="py-6 md:max-w-lg">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo fuga consectetur, quam maiores eaque recusandae.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contact">
        <div class="container px-6 py-12 mx-auto">
            <div class="w-full lg:w-full">
                <div class="lg:max-w-xl">
                    <h1 class="text-4xl font-bold text-center md:text-5xl md:text-left">
                        Interested in working with me?
                    </h1>
                    <p class="text-justify py-6 text-gray-500 md:text-left">I'm active on all social media platforms listed below, but you can also me an email an dI will get back to you within 24-48 hours.</p>
                    <button class="focus:outline-none text-black bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900" type="button">
                        Get in touch
                    </button>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="bg-gray-800">
            <div class="container px-6 mx-auto">
                <div class="flex flex-row justify-between py-6">
                    <div>
                        <p class="text-lg">Johanathan Speeter</p>
                    </div>
                    <div class="flex flex-row px-6 space-x-4">
                        <img src="Assets/Social Icons/Github.svg" alt="">
                        <img src="Assets/Social Icons/LinkedIn.svg" alt="">
                        <img src="Assets/Social Icons/Twitter.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>