Add files via upload

vaibhavtrivedi2002 · Mar 4, 2024 · 51ebd55 · 51ebd55
commit 51ebd55
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Basic Portfolio-Vaibhav</title>
+</head>
+<body>
+    <div class="grid-2">
+        <div class="section-1">
+            <i class="fas fa-code fa-10x white"></i>
+            <h2>It's me, Vaibhav Trivedi</h2>
+            <p>Lucknow,UttarPradesh.</p>
+            <a href="https://www.linkedin.com/in/vaibhavtrivedi2002/"><i class="fab fa-linkedin"></i></a>
+            <a href="https://github.com/vaibhavtrivedi2002"><i class="fab fa-github"></i></a>
+        </div>
+        <div class="section-2">
+            <h2>About</h2>
+            <p>A tech-savvy individual currently pursuing Bachelor's in Computer Application. I'm passionate about learning and constantly advancing my knowledge and skills. I'm skilled in Front-End Development, I have a good knowledge of Java.
+            </p>
+            <h2>Experience</h2>
+            <p>I'm skilled in Front-End Development and i have a good knowledge in Java. I've been working on Fron-End from more than an year now.</p>
+            <h2>Skills</h2>
+            <p>My Tech Stack includes<br/> Java | SQL | HTML | CSS | Javascript | Bootstrap | Git | Github</p>
+            <h2>Projects</h2>
+            <a href="https://vaibhavtrivedi2002.github.io/Text-To-Speech/">Narration</a>
+            <a href="https://vaibhavtrivedi2002.github.io/Weather-With-API/">Weather</a>
+            <a href="https://vaibhavtrivedi2002.github.io/Quiz/">Quiz</a>
+            <h2>Contact</h2>
+            <p>vaibhavtrivedi2002@gmail.com</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,104 @@
+/* global */
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+.grid-2{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+}
+
+body{
+    margin-bottom: 50px;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    background-color: black;
+    color: #7A7C80;
+
+}
+
+h2,.white{
+    color: #fff;
+}
+
+a{
+    color: #7A7C80;
+    text-decoration: none;
+}
+/* section 1 */
+.section-1{
+    padding-top: 40vh;
+    text-align: center;
+}
+
+.section-1 p{
+    font-size: 1.1rem;
+    padding-bottom: 10px;
+    margin:0;
+}
+
+.section-1 h2{
+    font-size: 1.7rem;
+    margin-bottom: 10px;
+}
+
+.section-1 a{
+    font-size: 1.5rem;
+    padding: 10px;
+}
+/* section 2 */
+.section-2{
+    padding-top: 10vh;
+    width: 70%;
+}
+
+.section-2 h2{
+    font-size: 1.7rem;
+    margin-bottom: 10px;
+}
+
+.section-2 p{
+    font-size: 1.1rem;
+    padding-bottom: 10px;
+    margin:0;
+}
+
+.section-2 a{
+    display: block;
+    padding: 5px;
+    font-size: 1.2rem;
+    padding-left: 0;
+    width: 100px;
+}
+/* animations / utilities */
+.section-2 a:hover{
+    font-size: 1.3rem;
+    color: #fff;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.section-1 a:hover{
+    color: #fff;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.white:hover{
+    position: relative;
+    padding-left: 10px;
+}
+
+/* media queres */
+@media(max-width:780px){
+    .grid-2{
+        grid-template-columns: 1fr;
+    }
+    .section-1{
+        padding:0;
+        padding-top: 5rem;
+    }
+    .section-2{
+        padding: 0;
+        padding-left: 1.5rem;
+        padding-top: 2rem;
+    }
+}