-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (122 loc) · 10.3 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dhruv Shah | Site</title>
<link rel="noopener noreferrer">
<meta name="description" content="">
<!-- tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- favicon -->
<link rel="icon" href="images/DS.ico" type="image/x-icon">
</head>
<body class="font-['Poppins']">
<!-- nav -->
<nav class="fixed top-0 w-screen z-10 bg-[#f7f7f7] md:bg-white md:border-b-2">
<div class="py-6 md:px-5 lg:px-3">
<div class="container px-5 flex flex-col font-semibold mx-auto justify-between md:px-0 md:mx-auto md:flex-row md:items-center">
<!-- smaller than 768px (collapsing nav header and controls) -->
<div class="md:hidden flex flex-row justify-between" id="nav-header">
<a class="h-full" href="#about"><h1 class="text-3xl">Dhruv Shah</h1></a>
<button class="h-full" id="nav-btn" onclick="navIcon(this)">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
</button>
</div>
<div class="flex flex-col text-xl mt-5 md:mt-0 md:flex md:flex-row" id="nav-items" aria-expanded="false" aria-hidden="true">
<a href="#home" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Home</a>
<a href="#about" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">About</a>
<a href="#contact" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Contact</a>
<a href="#projects" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Projects</a>
<a href="files/Dhruv Shah - Resume.pdf" target="_blank" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 active:text-dhruvLight">Resume</a>
</div>
<!-- bigger than 768px -->
<a href="#about" class="md:inline hidden" id="nav-md-title"><h1 class="text-2xl">Dhruv Shah</h1></a>
<div class="hidden text-lg mt-0 md:flex flex-row" id="nav-md">
<a href="#home" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Home</a>
<a href="#about" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">About</a>
<a href="#contact" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Contact</a>
<a href="#projects" class="mt-5 md:mt-0 md:mr-3 lg:mr-6 nav-link">Projects</a>
<div>
<a href="files/Dhruv Shah - Resume.pdf" target="_blank" class="rounded-full px-3 py-2 text-white bg-dhruv hidden md:inline hover:bg-dhruvDark focus:bg-dhruvDarker">Resume</a>
</div>
</div>
</div>
</div>
</nav>
<!-- main content (home/title, about, projects) -->
<main>
<!-- home/title -->
<section class="border-b-2" id="home">
<div class="container mx-auto px-5 md:px-5 lg:px-3 grid grid-cols-1 lg:grid-cols-2">
<div class="md:hidden font-semibold text-6xl xs:text-7xl">
<p class="text-dhruv">Developer</p>
<p class="my-6 text-dhruvDark">Designer</p>
<p class="text-dhruvDarker">Student</p>
</div>
<div class="flex my-auto hidden md:block">
<div>
<p class="text-7xl lg:text-5xl xl:text-6xl 2xl:text-7xl">I am a <span class="font-semibold text-dhruv" id="developer-text"></span></p>
<p class="text-6xl lg:text-5xl xl:text-5xl 2xl:text-6xl py-5">I am a <span class="font-semibold text-dhruvDark" id="designer-text"></span></p>
<p class="text-5xl lg:text-5xl xl:text-4xl 2xl:text-5xl">I am a <span class="font-semibold text-dhruvDarker" id="student-text"></span></p>
</div>
</div>
<div class="grid place-content-center hidden lg:block" id="#main-dhruv-image">
<img src="images/dhruv-image.png" alt="Dhruv Shah image" class="rounded-full mx-auto">
</div>
</div>
</section>
<div class=""></div>
<!-- about -->
<section class="grid place-content-center md:h-fit" id="about">
<div>
<img src="images/dhruv-image.png" alt="Dhruv Shah image" class="mx-auto lg:hidden mt-6" height="300" width="300">
<div class="mt-10 text-lg mx-8 max-w-2xl md:mx-auto">
<p>Hi, I'm a student who has had a vast interest in STEM ever since I was young. Whether it be playing with Lego or watching documentaries on the Science Channel, I have always been interested in STEM. I love learning new things and solving problems. I also have a passion for web development and web design. I enjoy creating websites that are functional, beautiful and user-friendly. I have learned various skills and tools such as HTML, CSS, JavaScript, Bootstrap, TailwindCSS, ReactJS, NextJS and more. I have also worked on some projects for myself and for others. You can check out some of my work on my portfolio website. I hope to pursue a career in computer engineering in the future.</p>
</div>
</div>
</section>
<!-- contact -->
<section class="bg-neutral-800 mt-6 py-6 text-neutral-400" id="contact">
<div class="container mx-auto grid grid-rows-3 justify-center text-center gap-y-3 lg:gap-y-0 lg:w-3/5 lg:grid-cols-3 lg:grid-rows-1">
<i class="bi bi-envelope not-italic hover:text-dhruvLighter"> <a href="mailto:dvvshah@gmail.com" target="_blank"> dvvshah@gmail.com</a></i>
<i class="bi bi-linkedin not-italic md:mx-10 hover:text-dhruvLighter"> <a href="https://www.linkedin.com/in/dhruv-shah-6a7210277/" target="_blank"> Dhruv Shah</a></i>
<i class="bi bi-github not-italic hover:text-dhruvLighter"><a href="https://github.com/dmanslick" target="_blank"> dmanslick</a></i>
</div>
</section>
<!-- projects -->
<section class="border-b-2" id="projects">
<div class="container mx-auto py-20 px-5">
<h1 class="text-center mb-16 text-5xl font-semibold">Projects</h1>
<div class="grid mx-5 grid-cols-1 gap-10 lg:grid-cols-2 lg:mx-0">
<portfolio-project data-website="The Davv Group" data-link=https://thedavvgroup.com/ data-image="images/The Davv Group.png" data-alt="The Davv Group Website" data-tags="TailwindCSS, JavaScript, NodeJS, ExpressJs"></portfolio-project>
<!-- <portfolio-project data-website="My Personal Website" data-link="#home" data-image="images/Dhruv Shah Site.png" data-alt="My Personal Site" data-tags="TailwindCSS, JavaScript, Web Components"></portfolio-project> -->
<!-- <portfolio-project data-website="JavaScript Weather App" data-link="./files/javascript-weather-app/index.html" data-image="images/Javascript Weather App.png" data-alt="Javascript Based Weather App" data-tags="HTML, CSS, JavaScript"></portfolio-project> -->
<!-- <portfolio-project data-website="High School GPA Calculator" data-link="./files/highschool-gpa-calculator/index.html" data-image="images/High School GPA Calculator.png" data-alt="High School GPA Calculator" data-tags="HTML, CSS, JavaScript"></portfolio-project> -->
<!-- <portfolio-project data-website="JavaScript Rock, Paper, Scissors Game" data-link="./files/javascript-rock-paper-scissors/index.html" data-image="images/JavaScript Rock Paper Scissors Game.png" data-alt="JavaScript Rock, Paper, Scissors Game" data-tags="HTML, CSS, JavaScript"></portfolio-project> -->
<!-- <portfolio-project data-website="JavaScript State Sales Tax Calculator" data-link="./files/javascript-state-sales-tax-calculator/index.html" data-image="images/JavaScript State Sales Tax Calculator.png" data-alt="JavaScript State Sales Tax Calculator" data-tags="HTML, CSS, JavaScript"></portfolio-project> -->
<portfolio-project data-website="TensorFlowJS Rock Paper Scissors" data-link="./files/tensorflowjs-rock-paper-scissors/index.html" data-image="images/tensorflow rock paper scissors.png" data-alt="TensorFlowJS Rock Paper Scissors" data-tags="HTML, CSS, JavaScript, TensorFlowJS"></portfolio-project>
<portfolio-project data-website="React Weather App" data-link="./files/react-weather-app/index.html" data-image="images/react weather app.png" data-alt="React Weather App" data-tags="ReactJS, TailwindCSS, OpenWeather API, REST APIs"></portfolio-project>
<portfolio-project data-website="Nemesis Scoutview 2023" data-link="https://www.dhruvshah.site/files/nemesis/index.html" data-image="images/scoutview-2023.png" data-alt="Nemesis Scoutview 2023 Image" data-tags="ReactJS, Ionic CLI, Mobile Dev"></portfolio-project>
<portfolio-project data-website="Nemesis Scoutview 2024" data-link="https://scoutview-2024-deployment.vercel.app/" data-image="images/scoutview-2024.png" data-alt="Nemesis Scoutview 2024 Image" data-tags="ReactJS, Ionic CLI, Mobile Dev"></portfolio-project>
<portfolio-project data-website="Nemesis Masterscout 2024" data-link="https://2024-masterscout-deployment.vercel.app/" data-image="images/masterscout-2024.png" data-alt="Nemesis Masterscout 2024 Image" data-tags="ReactJS, NextJS, MUI, Firebase, D3.js, API"></portfolio-project>
<portfolio-project data-website="Roam" data-link="https://theroamtravel.com" data-image="images/roam.png" data-alt="Roam Website Image" data-tags="React, TailwindCSS, NextUI"></portfolio-project>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer class="bg-neutral-800 py-10 text-neutral-400 text-center">
<p>© 2023 Dhruv Shah</p>
</footer>
<script src="script.js"></script>
<!-- project element JS -->
<script defer src="project.js"></script>
</body>
</html>