-
Notifications
You must be signed in to change notification settings - Fork 0
/
about_me.html
168 lines (162 loc) · 9.8 KB
/
about_me.html
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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" />
<title>RUCHIKA YADAV - About Me</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="output.css" />
<link rel="stylesheet" href="styles.css" />
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Start - Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Signika:wght@400;700&display=swap" rel="stylesheet">
<!-- End - Fonts -->
</head>
<body
class="dark:bg-black bg-white h-screen text-black dark:text-white px-5 md:px-20 opacity-0 animate-fade-in transition duration-500">
<!-- Navbar -->
<header class="flex w-full overflow-hidden pt-10 pb-1">
<nav id="nav" x-data="{ open: false }" role="navigation" class="w-full">
<div class="container mx-auto flex flex-wrap items-center md:flex-no-wrap">
<div class="mr-4 md:mr-8">
<a href="index.html" class="text-2xl font-signika font-bold">RUCHIKA YADAV</a>
</div>
<div class="ml-auto md:hidden flex items-center justify-start">
<button onclick="menuToggle()" @click="open = !open"
class="tap-highlight-transparent text-black dark:text-white w-5 h-5 relative focus:outline-none"
@click="open = !open">
<span class="sr-only">Open main menu</span>
<div class="block w-5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'rotate-45': open,' -translate-y-1.5': !open }"></span>
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'opacity-0': open } "></span>
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'-rotate-45': open, ' translate-y-1.5': !open}"></span>
</div>
</button>
</div>
<div id="menu"
class="w-full h-0 transition-all ease-out duration-500 md:transition-none md:w-auto md:flex-grow md:flex md:items-center">
<ul id="ulMenu"
class="flex flex-col duration-300 ease-out md:space-x-5 sm:transition-none mt-5 md:flex-row md:items-center md:ml-auto md:mt-0 md:pt-0 md:border-0">
<li class="group transition duration-300">
<a href="index.html" class="font-signika text-2xl">HOME
<span
class="hidden md:block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black dark:bg-white">
</span>
</a>
</li>
<li class="group transition duration-300">
<a href="about_me.html" class="font-signika text-2xl">ABOUT ME
<span class="hidden md:block h-0.5 bg-black dark:bg-white"></span>
</a>
</li>
<li class="group transition duration-300">
<a href="contact.html" class="font-signika text-2xl">CONTACT
<span
class="hidden md:block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black dark:bg-white">
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Content -->
<div class="container mx-auto">
<h1 class="text-4xl pt-10 pb-8"><b>ABOUT ME</b></h1>
<div class="grid grid-cols-2 gap-14 md:gap-20">
<div class="col-span-2 md:col-span-1">
<div
class="bg-white dark:bg-neutral-900 p-5 pb-28 m-6 md:m-12 shadow-lg border border-gray-100 dark:border-neutral-800 hover:rotate-0 transition duration-500 -rotate-6 relative">
<img src="./assets/profilephoto.jpg" alt=""
class="smooth-edges flex flex-col w-full aspect-square object-cover h-auto" />
<div class="absolute bottom-0 left-0 right-0 text-center">
<p class="text-gray-800 dark:text-slate-200 pb-7 h-full text-6xl font-nothingyoucoulddo">me</p>
</div>
</div>
</div>
<section class="font-normal text-center text-base md:text-start mx-3 col-span-2 md:col-span-1 my-auto">
<div class="block md:hidden">
<p class="text-3xl font-serif font-bold mb-1">Hello there,</p>
<p class="text-3xl font-serif font-bold mb-6">I'm Ruchika <span class="animate-wave">👋</span></p>
</div>
<p class="hidden md:block text-3xl font-serif font-bold mb-6">Hello there, I'm Ruchika
<span class="animate-wave">👋</span>
</p>
<p class="mb-4">
I'm a RUCHIKA-based photographer with over 5 years of
experience in capturing unforgettable moments. I specialize in
creating images that are both visually striking and emotionally
impactful, and I have developed a signature style that blends
natural beauty with vibrant colors and bold compositions.
</p>
<p class="mb-4">
When I'm not behind the camera, you can find me exploring the city's
diverse neighborhoods, trying out new restaurants, or spending time
with my family and friends. I believe that every moment is an
opportunity to experience something new and to create memories that
will last a lifetime.
</p>
<p>
Thank you for taking the time to learn a little bit about me and my
work. If you're interested in collaborating or would like to see
more of my portfolio, please don't hesitate to get in touch. Let's
work together to bring your vision to life!
</p>
</section>
</div>
</div>
<!-- Footer -->
<footer>
<div class="max-w-screen-xl py-16 mx-auto">
<div class="grid grid-cols-1 gap-8 text-center mx-auto">
<div>
<p class="font-signika"><b>RUCHIKA YADAV</b></p>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-300">
Ghaziabad , India<br />ruchika14yadav@gmail.com
</p>
<div class="flex mx-auto">
<div class="mx-auto space-x-6 flex mt-8 text-gray-600 dark:text-gray-300">
<a class="transition duration-300 hover:opacity-75" href="https://www.instagram.com/r.u.c.h.i.k.a.14/" target="_blank"
rel="noreferrer">
<span class="sr-only"> Instagram </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd" />
</svg>
</a>
<a class="transition duration-300 hover:opacity-75" href="https://www.linkedin.com/in/ruchika-connected14/" target="_blank"
rel="noreferrer">
<span class="sr-only">LinkedIn</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<p class="mt-8 text-xs text-gray-600 dark:text-gray-300 text-center">
© 2023 Developed and Designed by
<a href="" class="underline">RUCHIKA YADAV</a>
</p>
</div>
</footer>
<script src="fade_in.js"></script>
<script src="menu.js"></script>
</body>
</html>