version 1

SwatiModi · Mar 17, 2020 · 41ddf77 · 41ddf77
1 parent d4c0812
commit 41ddf77
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -1,37 +1,12 @@
-## Welcome to GitHub Pages
+# Portfolio
+Personal Website 
 
-You can use the [editor on GitHub](https://github.com/SwatiModi/swatimodi.com/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
 
-Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
+---
 
-### Markdown
-
-Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
-
-```markdown
-Syntax highlighted code block
-
-# Header 1
-## Header 2
-### Header 3
-
-- Bulleted
-- List
-
-1. Numbered
-2. List
-
-**Bold** and _Italic_ and `Code` text
-
-[Link](url) and ![Image](src)
-```
-
-For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
-
-### Jekyll Themes
-
-Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/SwatiModi/swatimodi.com/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
-
-### Support or Contact
-
-Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
+#### Web design todo 
+* Social media icon interactions
+* Social media icons tooltips
+* Dark light mode switch
+* Logo Font - point to medium
+* fetch medium post from api and display
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Swati Modi | Machine Learning Engineer</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<meta name="viewport" content="width=device-width , initial-scale=1.0">
+	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+</head>
+<body>
+	<div class="full-content">
+		<div class="header">
+			<!-- <div class="logo">
+				<a href="https://medium.com/@swati_modi" target="_blank">Swati Modi</a>
+			</div> -->
+		</div>
+		<div class="body-content">
+			<div class="headng">
+				<p class="intro">Hello, I’m Swati Modi. I solve problems with Tech</p>
+			</div>
+			<div class="sub-heading">Software Engineer | Maker | Tech Enthusiast</div>
+			<div class="socials">
+				<a href="https://medium.com/@swati_modi" target="_blank"><i class="fab fa-medium"></i></a>
+				<a href="https://github.com/SwatiModi" target="_blank"><i class="fab fa-github-alt"></i></a>
+				<a href="https://twitter.com/SwatiModi1609" target="_blank"><i class="fab fa-twitter"></i></a>
+				<a href="https://www.linkedin.com/in/swati-modi-795874122/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
+				<a href="mailto:swatimodi1609@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
+			</div>
+		</div>
+		<!-- <div class="scroll">
+			<div class="scroll-dot"></div>
+			<div class="scroll-line"></div>
+		</div> -->
+		<div class="fancy-box-1"></div>
+	</div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,100 @@
+/* reset css */
+@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
+
+body{
+	margin: 0;
+	padding: 0;
+	font-size: 20px;
+	line-height: 1.5;
+	font-family: 'Rubik', sans-serif;
+}
+*,*:before,*:after{
+	box-sizing: border-box;
+}
+a{
+	text-decoration: none;
+}
+img{
+	max-width: 100%;
+	height: auto;
+}
+p{
+	margin: 0;
+}
+/* structure */
+body{
+	height: 100vh;
+	width: 100%;
+	background-color:#121212;
+}
+.full-content{
+	height: 100%;
+	width: 100%;
+	padding: 10% 10% 10% 15%;
+	background-color:#121212;
+	color: #fefefe;
+}
+.header{
+	height: 25%;
+	width: 100%;
+}
+.intro{
+	font-size: 3rem;
+	word-spacing: -0.1rem;
+	margin-bottom: 0.8rem;
+	color:#2c5dec;
+}
+.sub-heading{
+	font-size: 1.8rem;
+	margin-bottom: 4%;
+	/* color:#787878; */
+	color:#a7a7a7;
+}
+.socials{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	height: 20%;
+	width: 30%;
+	color:#a9acb5;
+}
+.socials :hover{
+	color:#2c5dec;
+}
+.socials a{
+	margin: 2% 5%;
+	font-size: 2.5rem;
+	color: inherit;
+}
+
+/* fancy stuff */
+/* .scroll{
+	width: 5px;
+	height: 18%;
+	position: absolute;
+	bottom: 0;
+}
+.scroll-dot{
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: #2c5dec;
+	position: relative;
+	right: 3.5px;
+	z-index: 1;
+}
+.scroll-line{
+	background-color: #a7a7a7;
+	width: 15%;
+	height: 100%;
+} */
+.fancy-box-1{
+	z-index: 0;
+	width: 45%;
+	height: 60%;
+	border: 2px solid green;
+	position: absolute;
+	transform: rotate(50deg);
+	left: -32%;
+	bottom: -5%;
+}