first_commit

README.md

@@ -1 +1,2 @@
-# portfolio-content
+# janismdhanbad.github.io
+This is my personal website

css/html5reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,166 @@
+/*Add padding and margin to space out the page.
+Make the font larger too.*/
+body{
+	margin:1%;
+	padding:1%;
+	font-size:150%;
+	background-color: aliceblue;
+}
+
+/*Make the h1 heading bigger with a bold font*/
+h1{
+	font-size: 2em; 
+	font-weight: bold;
+	text-align: center;
+
+}
+
+.active{
+	background: rgb(238, 143, 143);
+    text-transform: uppercase;
+	text-align: center;
+}
+a:link { text-decoration: none; }
+.active a{
+	text-decoration: none;;
+}
+.bio_para{
+	line-height: 1.5;
+	padding: 75px;
+	text-align: justify;
+}
+/*Style the images*/
+.project_image {
+	/* display: inline-block; */
+	text-align: center;
+	/* border: 1px dotted gray; */
+	margin: auto; 
+	justify-content: center;
+  }
+  .project_image img{
+	margin-top: 10px;
+  }
+  .project_image figcaption {
+	padding: 0;
+	position: relative;
+	/* margin-top: -20px; */
+
+  }
+
+a{
+	color: whitesmoke;
+}
+#footer {
+	position: relative;
+	margin-top: 400px;
+	/* negative value of footer height */
+	height: 20px;
+	clear: both;
+	background-color: black;
+	color: white;
+  }
+
+/*Make the h2 heading match h1*/
+h2{
+	font-size: 2em; 
+	font-weight: bold;
+}
+
+/*Improve the spacing for paragraphs AND headings*/
+p, h1, h2 {
+    padding: 10px;
+}
+
+/*Add borders around the main components and some
+space too*/
+.profile_img{
+    height: 300px;
+	width:auto;
+    padding: 75px;
+
+
+}
+
+/*Change the styling for all of the list 
+items in the nav section*/
+nav li{
+	background-color: #8c3434;
+	padding:10px;
+	width:25%;
+	border:1px solid black;
+	display: inline-block;
+	width: 23.16%;
+
+}
+
+/*Added this so the links stay the same color*/
+a:visited{color:#f2f2f7}
+
+.project_heading{
+	font-family: Georgia, 'Times New Roman', Times, serif;
+	background-color: #8c3434;
+	color: white;
+	font-size: 20pt;
+	margin-top: 25px;
+}
+.project_desc{
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 16pt;
+	text-align: justify;
+	padding-bottom: 50px;
+	line-height: 1.2;
+}
+.bolded { font-weight: bold; }
+.italics{font-style: italic;
+			font-size: 14pt;}
+.blog_head{
+	background-image: url("../images/books_bg.jpg");
+	margin-top: 10px;
+	background-size: cover;
+	background-position: center;
+	height: 200px;
+
+	/* width: 87.5%; */
+}
+
+
+
+
+.caption {
+	display: block;
+	font-family: Georgia, 'Times New Roman', Times, serif;
+	font-size: 24px;
+	line-height: 1.5;
+
+	padding-top: 120px;
+	position: relative;
+	color: white;
+	background-color: rgba(0, 0, 0, 0.5);
+
+  }
+
+.publication_list{
+	/* make bullet points red squares */
+	list-style:square ;
+	margin-left: 50px;
+  }
+
+.blog_body{
+	background-size: cover;
+	background-position: center;
+	height: 120px;
+	margin-top: 30px;
+	padding-top: 30px;
+	border-color: grey;
+	border-width: 1px;
+	border-style:solid;
+}
+
+
+
+
+.blog_body:hover {
+display: block;
+background-image: url("../images/polka_dots_bg.png");
+color: whitesmoke
+}

index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- All of the meta data for the page belongs in the header tag -->
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="icon" href="images/bio-photo.jpg">
+	<link rel="stylesheet" href="css/html5reset.css">
+	<link rel="stylesheet" href="css/style.css">
+	<title>Personal Portfolio</title>
+</head>
+
+<body>
+	<nav>
+		<ul>
+			<li class="active"><a href="index.html">Home</a></li>
+			<li><a href="./pages/projects.html">Projects</a></li>
+            <li><a href="./pages/blogs.html">Blogs</a></li>
+            <li><a href="./pages/readings.html">Interesting readings</a></li>
+		</ul>
+	</nav>
+	<main>
+
+		<img class="profile_img" alt="profile picture" src="./images/bio-photo.jpg" style="float: left;">
+		<p class='bio_para'>
+			Hi all, this is Janpreet, currently doing masters in Electrical and Computer Science 
+            engineering at the University of Michigan, Ann Arbor. My major area of study is Computer Vision. Prior to this I was
+            working at Atkins as a Data scientsit where I worked on using Computer Vision algortihms like object detection and instance 
+            segmentation to perfrom digital inspection of roads, railways, sewer lines etc. The goal here was to identify defects and damages on 
+            these public assets for maintenance tasks.
+            </br>
+            During my masters, I've been taking courses to enhance my understanding of linear algebra in computer
+            vision.As I am still learning more, I am fascinated by the use of vision algorithms in AR/VR use cases and
+            want to pursue this direction as my future career. I am currently doing a co-op at 
+            <a href="https://www.yembo.ai/" style="color: blue;">Yembo.ai </a> where I am
+            working on Indoor Scene understanding using 2D and 3D computer vision algorithms.  
+
+		</p>
+        <p>
+        <h2>
+            Publications
+        </h2>
+        <ul class="publication_list">
+            <li> Road Damage Detection And Classification In Smartphone Captured Images Using Mask R-CNN
+                <a href="https://arxiv.org/pdf/1811.04535.pdf" style="text-decoration: underline; color: black;"> [link] </a>
+            </br>
+                <span class="italics">Janpreet Singh, Shashank Shekhar</span> Arxiv.
+            </li>
+        </ul>
+        </p>
+
+	</main>
+
+	<footer id ="footer">
+		&copy; 2022
+	</footer>
+</body>
+</html>

pages/blogs.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- All of the meta data for the page belongs in the header tag -->
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="icon" href="../images/bio-photo.jpg">
+	<link rel="stylesheet" href="../css/html5reset.css">
+	<link rel="stylesheet" href="../css/style.css">
+	<title>Personal Portfolio</title>
+</head>
+<body>
+	<nav>
+		<ul>
+			<li><a href="../index.html">Home</a></li>
+			<li><a href="../pages/projects.html">Projects</a></li>
+            <li class="active"><a href="../pages/blogs.html">Blogs</a></li>
+            <li><a href="../pages/readings.html">Interesting readings</a></li>
+		</ul>
+	</nav>
+    <div class="blog_head">
+        <p class="caption">
+            I think writing blogs is the best way to learn things. Sometimes it's also helpful to concretize a 
+        concept I learnt recently. Here are some blogs that I have written:
+        </p>
+    </div>
+    <a href="https://medium.com/p/6a34e2485911" style="color: black;">
+
+    <div class="blog_body">
+        From scanned PDFs to text summarization:
+    </br></br>
+    TLDR; The article discusses about basics of data extraction from scanned PDFs. I have shared my experience
+            in performing Optical Character recognition(OCR) on PDFs and used two different libraries, OCRPus and Tesseract for text extraction.
+
+    </div>
+    </a>
+    <a href="https://thebittheories.com/understanding-the-data-things-you-might-miss-c7710da8f765#.9snbire17" style="color: black;">
+        <div class="blog_body">
+
+        UNDERSTANDING THE DATA : Things you might miss!!
+        </br></br>
+        TLDR; The following article deals with the measures of statistical analysis for univarite( analysis on one variable) and 
+        bivariate(analysis between two variable). You can easily find codes for 
+        these in the language you use for doing exploration.
+
+
+        </div>
+    </a>
+
+    <a href="https://thebittheories.com/data-analysis-and-statistical-inference-a-quick-guide-82a51246834a#.9z8r5umql" style="color: black;">
+        <div class="blog_body">
+
+            Data analysis and statistical inference : A quick guide
+            </br></br>
+            TLDR; The article further deep dives into statistical tests for discrete and continuous and discrete 
+            variables. I have included example codes in R.
+        </div>
+    </a>
+
+    <a href="https://medium.com/the-bit-theories/data-analysis-and-statistical-inference-a-quick-guide-part-2-anova-87441c5018e5" style="color: black;">
+        <div class="blog_body">
+
+            Data Analysis and Statistical Inference: A Quick Guide Part 2 (ANOVA)
+            </br></br>
+            TLDR; The article discusses about making inferences between a categorical and continuous variable using ANOVA (ANalysis Of VAriance).
+            This could be essential when you are making hypothesis upon a continuous quantity like housing price vs 
+            a categorical quantity like income class of the people.
+        </div>
+    </a>
+
+
+
+    <footer id ="footer">
+		&copy; 2022
+	</footer>
+</body>