updated font alts

README.md

@@ -0,0 +1,75 @@
+# Rajanibala Portifolio
+
+### How To Deploy:  
+
+1. **Make sure you have Node.js, npm, and firebase tools installed**  
+    a. Can be downloaded from [Node.js](https://nodejs.org/en/)  
+    b. Accept & Install  
+    c. Confirm it worked - open Command Prompt and type:  
+    ```cmd
+    node -v   // this command should output a version number, then run next line
+    npm -v    // this command should then also output a version number
+    ```
+    d. Install firebase tools by running:  
+    ```cmd
+    npm install -g firebase-tools   // should have some success code at the end
+    ```
+    
+    
+2. **Now that we have the tools installed, lets login to Firebase in terminal.**  
+    a. Check you have access [by going here](https://console.firebase.google.com/u/0/project/albarajanibala-a9cb6/overview)  
+    b. In Command Prompt type:
+    ```cmd
+    firebase login  // should open up in Chrome, make sure you login with the right Google account
+    ```
+    c. Download the existing code from GitHub if you haven't already _(see button in top right)_  
+    
+    
+3. **Time to prepare new code and publish.** 
+
+    > Before publishing - make sure you have an `index.html` file in the `www` folder
+
+    a. Place your new files or edit the files in the folder called `www`
+    b. Now navigate to the downloaded code from Command Prompt:
+    ```cmd
+    // If you downloaded files are at \Downloads\rajanibala
+    cd ~\Downloads\rajanibala
+    ```
+    c. Finally time to publish:
+    ```cmd
+    firebase deploy --only hosting
+    ```
+    > Accidentally pushed?
+    Firebase lets you rollback changes and delete previous versions - this can be done from [Firebase Hosting Dashboard](https://console.firebase.google.com/u/0/project/albarajanibala-a9cb6/hosting/main)
+
+4. **Updating code to GitHub**  
+    > This is important so your changes are safely stored for the future. This also helps to easily revert any unwanted changes.  
+    
+    a. To push your changes to GitHub, first make sure you have `git` installed - you can [get git from here](https://desktop.github.com/)    
+    b. Find your project in GitHub app - go to File > Add Local Repository > (Navigate to inside rajanibala folder)  
+    c. Select your files that you want to push to GitHub  
+    d. Add a description of changes  
+    e. Click "Commit to master"  
+    f. Button in top bar should now say "Push origin" - click that and you're done!  
+    
+
+### Testing Locally:
+
+To simulate how the website would work on the internet, you can simulate a server locally on your machine.
+
+1. Open Command Prompt and type
+    ```cmd
+    npm install -g http-server
+    ```
+2. Navigate to inside `www` folder in Command Prompt
+    ```cmd
+    // If you downloaded files are at \Downloads\rajanibala
+    cd ~\Downloads\rajanibala\www
+    ```
+3. Start server
+    ```cmd
+    http-server .   \\ Output will have a number after ':' this is called a port number
+    ```  
+4. Go to Chrome and open [localhost:8080](http://localhost:8080)
+    > 8080 might not be correct, use the port number that was output in step 3  
+

firebase.json

@@ -1,10 +1,6 @@
 {
   "hosting": {
-    "public": "build",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ]
+    "public": "www",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
   }
 }

mysite/index.html

@@ -1,249 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>Alba Rajanibala</title>
-	
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79359868-2"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'UA-79359868-2');
-</script>
-
-	
-<style type="text/css">
-
-	
-body {background: linear-gradient(36deg, #c2ca00, #d079d3, #dbff57);
-    background-size: 600% 600%;
-    animation: AnimationName 8s ease infinite;
-	cursor: url('pointerb.png'), auto;	
-}
-
-@keyframes AnimationName {
-    0%{background-position:0% 90%}
-    50%{background-position:100% 5%}
-    100%{background-position:0% 90%}
-}
-	
-
-#section-a, #section-b, #section-c {
-		display:flex;
-		align-content: flex-start;
-	}
-	
-
-#my-name {
-		width: 800px;
-		padding-top: 120px;
-		padding-left: 300px;
-		padding-bottom: 80px;
-		font-family: Georgia;
-		font-size: 90px;
-		font-kerning: auto;
-		line-height:1.2;
-		letter-spacing: 3px
-	}
-	
-#my-photo {
-		flex:1;
-		padding-right: 300px;
-		padding-left: 300px;
-		padding-top:100px;
-		}
-	
-img {
-		width:300px;
-	  	height:300px;
-	 	object-fit:cover;
-	  	border-radius: 50%;
-	}
-	
-#section-title {
-		font-family:"Glacial Indifference";
-		font-size:13px;
-		font-weight:bold;
-		padding-left: 300px;
-		letter-spacing: 1px;
-	}
-	
-#highlight{
-		background-color:black;
-		color:white;
-		width:fit-content;
-		height:16px;
-	}
-	
-#my-skills {
-		padding-left: 300px;
-		width:fit-content;
-		font-family: Lora;
-		font-size: 30px;
-		line-height: 2.5;
-		letter-spacing: 4px;
-	}
-	
-#my-name:hover {
-		color:whitesmoke;
-		font-family:"Helvetica";
-		cursor: url('pointerb.png'), auto;	
-	}
-	
-#hilit:hover {
-		font-family:"Helvetica";
-		color:white;
-		cursor: url('pointerb.png'), auto;	
-	}
-	
-#my-links {
-		width: 300px;
-		padding-left: 300px;
-		padding-top:20px;
-		font-family: Lora;
-		font-size:20px;
-		font-style: italic;
-		line-height: 2.5;
-		text-decoration:none;
-		color:black;
-		letter-spacing: 2px;
-	}
-	
-a {
-		text-decoration: none;
-		color:black;
-		cursor: url('pointerb.png'), auto;	
-	}
-	
-#designotw {
-		align-content: flex-start;
-		padding-bottom: 0px;
-	}
-	
-#my-extras {
-		padding-top: 20px;
-		padding-left:58px;
-		font-family: Lora;
-		font-size:20px;
-		font-style: italic;
-		line-height: 2.5;
-		text-decoration:none;
-		color:black;
-		letter-spacing: 2px;
-	}
-
-#footer {
-	flex:1;
-	width: 400px;
-	text-align: right;
-	padding-top:137px;
-	padding-right: 300px;
-	font-family:"lora";
-	font-size:15px;
-	font-weight:bold;
-	font-style: italic;
-	letter-spacing: 2px;
-}
-</style>
-	
-<body>
-	<div id="section-a">
-		
-		<div class="title-tag" id="my-name">
-			Alba <br>
-			Rajanibala <br>
-	
-		</div>
-			
-		<div id="my-photo">
-			
-			<img src="my-photo.jpg" alt="Alba Rajanibala" height="350", width="350">
-			
-		</div>
-	
-	</div>
-	
-	<div id="section-title"> <div id="highlight">
-		&nbsp; ASK ME ABOUT &nbsp;
-		</div>
-	</div>
-	<br>
-	<div id="my-skills">
-		
-		<a href="https://linkedin.com/in/albarajanibala" target="_blank">
-		<div id="hilit">
-				strategy consulting  <br>
-			</div>
-		</a>
-		<div id="hilit">
-			information design <br/>
-		</div>
-		<div id="hilit">
-			customs by alba <br/> <br>
-		</div>
-			
-	</div>
-	
-	
-	<div id="section-b">
-		
-	<div id="section-title"> 	<div id="highlight">
-		&nbsp; 	MORE  &nbsp;
-		 </div>
-	</div>
-	<br>
-	
-	
-	<div id="section-title">
-		<div id="designotw">
-				<div id="highlight">
-					&nbsp;DESIGN OF THE WEEK&nbsp;
-				</div>
-		</div>
-	</div>
-		
-	</div>
-		
-	<div id="section-c">
-	<div id="my-links">
-		<a href="Alba Rajanibala Resume.pdf" target="_blank">
-			<div id="hilit">
-			resume 
-			</div>
-		</a>
-		<div id="hilit">
-			portfolio
-			</div>
-		<div id="hilit">
-			customs
-			</div> 		
-		</div>	
-
-			
-	<div id="my-extras">
-			<div id="hilit">
-				<a href="https://xkcd.com/832/" target="_blank"></a>
-			week of may 31 
-				</a>
-			</div>
-			<div id="hilit"> 
-				<a href="https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~200375~3001080?" target="_blank">
-			week of may 24 
-				</a>
-			</div>
-			<div id="hilit">
-				<a href="https://www.instagram.com/p/B92bg5ClPNf/" target="_blank">
-			week of may 17
-				</a>
-			</div>
-		</div>
-
-		<div id="footer">
-			designed & developed by alba rajanibala
-		</div>
-	</div>
-	
-</body>

updated rajanibala.com

@@ -1 +0,0 @@
-

www/art.html

@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>alba's art</title>
+<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
+<link rel="stylesheet" href="skills.css"/>
+
+</head>
+
+<body>
+
+    <a href="index.html">
+        <h2 id="home">
+                ◄ HOME
+        </h2>
+        </a>
+
+<div id="my-name">
+    
+    <h1>
+    art <br>
+    & customs  
+    </h1>
+
+    <!-- <a href="index.html">
+        <img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
+    </a> -->
+
+</div>
+
+<ul id="my-skills">
+
+    <h2> WHAT I DO </h2>
+
+    <li>
+        <a href="https://madhubani.nic.in/handicraft/">
+        madhubani
+        </a>
+    </li>
+    <li> 
+        <a href="https://blog.123rf.com/history-print-design/">
+        print design 
+        </a>
+    </li>
+    <li>
+        <a href="http://suswanachowdhury.com/capsule/">
+        commisioned work
+        </a>
+    </li>
+</ul>
+
+
+<div id="linkture">
+<ul id="my-features">
+
+    <!-- <h2>
+    HOW I DO IT    </h2>
+
+    <li> 
+    Illustrator  </li>
+
+    <li>
+    InDesign 
+    </li>
+
+    <li>
+    Acrylic Painting
+    </li>
+
+ </ul>
+
+ <ul id="my-links"> -->
+    <h2> EXPLORE </h2>
+    <li> 
+        <a href="Coloring Pages by Alba Rajanibala.pdf" target="_blank" alt="Coloring Sheets by Alba Rajanibala"> 
+            <img src="coloring.png" alt="Coloring Sheets by Alba Rajanibala" id="madhu" height="165px">
+        </a>
+
+        <a href="sitar.jpg" target="_blank" alt="Sitar by Alba Rajanibala">
+            <img src="sitar.jpg" alt="Sitar by Alba Rajanibala" id="sitar" height="165px">
+        </a>
+
+        <a href="charity2.pdf" target="_blank" alt="Shakti by Alba Rajanibala">
+        <img src="charity.jpg" alt="Shakti by Alba Rajanibala" id="charity" height="165px">
+        </a>
+
+     </li>
+</ul>
+
+<footer>
+   designed and developed by alba rajanibala
+</footer>
+
+</div>
+
+
+
+</body>
+</html>

www/consulting.html

@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>alba's work</title>
+<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
+<link rel="stylesheet" href="skills.css"/>
+
+</head>
+
+<body>
+
+    <a href="index.html">
+        <h2 id="home">
+                ◄ HOME
+        </h2>
+        </a>
+
+<div id="my-name">
+    
+    <h1>
+    strategy <br>
+    & consulting  
+    </h1>
+
+</div>
+
+<ul id="my-skills">
+
+    <h2> WORKED AT </h2>
+
+    <li>
+        <a href="https://www.razorfish.com/" alt="Razorfish Publicis Groupe" target="_blank">
+        razorfish @ Publicis
+        </a>
+    </li>
+    <li> 
+        <a href="https://www.mccannny.com/" alt="McCann New York" target="_blank">
+        McCann New York @ IPG
+        </a>
+    </li>
+    <li>
+        <a href="https://www.groupsjr.com" alt="Group SJR" target="_blank">
+         Group SJR @ WPP 
+        </a>
+    </li>
+</ul>
+
+
+<div id="linkture">
+<ul id="my-features">
+
+    <h2>
+    WHAT I DO   </h2>
+
+    <li> 
+    analytics & reporting </li>
+
+    <li>
+    go-to-market strategy 
+    </li>
+
+    <li>
+    product & .com strategy
+    </li>
+
+ </ul>
+
+ <ul id="my-links">
+    <h2> EXPLORE </h2>
+    <li> 
+        <a href="http://linkedin.com/in/albarajanibala" alt="Alba's LinkedIn" target="_blank"> 
+            <img src="mylinkedin.png" alt="Alba's LinkedIn" id="madhu" height="165px">
+        </a>
+
+        <a href="Alba Rajanibala Resume.pdf" alt="Alba's Resume" target="_blank">
+            <img src="myresume.png" alt="Alba's Resume" id="sitar" height="165px">
+        </a>
+
+        <a href="mailto:alba.rajanibalaa@gmail.com" target="_blank">
+        <img src="myemail.png" alt="Email Alba" id="charity" height="165px">
+        </a>
+
+     </li>
+</ul>
+
+<footer>
+   designed and developed by alba rajanibala
+</footer>
+
+</div>
+
+
+
+</body>
+</html>

www/index.css

@@ -0,0 +1,238 @@
+@keyframes AnimationName {
+    0%{background-position:0% 90%}
+    50%{background-position:100% 5%}
+    100%{background-position:0% 90%}
+}
+
+@font-face {
+    font-family: Playfair Display;
+    src: url(PlayfairDisplay-Regular.otf);
+  }
+  
+  div {
+    font-family: myFirstFont;
+  }
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: linear-gradient(45deg, black, #444444);
+    background-size: 100% 600%;
+    animation: AnimationName 8s ease infinite;
+    /* background-color:black; */
+    cursor: url("sparkle.png"), auto;
+    height: 100vh;
+    padding:6rem;
+}
+
+#my-name {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+#my-photo {
+    width:250px;
+    height:250px;
+    border-radius: 50%;
+}
+
+#my-photo:hover {
+    opacity: 100;
+    transition: all 0.2s ease-in-out; 
+    transform: scale(1.2);
+}
+
+#linkture{
+    display: flex;
+    flex-direction: column;
+}
+
+h1 {
+    font-family:Playfair Display, Georgia;
+    font-size:200px;
+    letter-spacing: 1px;
+    font-weight: 100;
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+    color:rgb(112, 111, 111);
+
+}
+
+ul {
+    list-style:none;
+    padding:0;
+    line-height: 2;
+    font-family:Lora, Georgia;
+    font-size: 60px;
+}
+
+li {
+    font-family:'Lora', Georgia;
+    letter-spacing: .25rem;
+    line-height:2.5;
+    color:rgb(112, 111, 111);
+}
+
+a {
+    text-decoration: none;
+    cursor: url("sparkle2.png"), auto;
+    color:rgb(112, 111, 111);
+}
+
+h2 a {
+    color:black;
+}
+
+footer {
+    padding-top: 5rem;
+    padding-bottom: 10rem;
+    padding-right: 5rem;
+    font-family:'lora';
+    font-style: italic;
+    font-size: 20px;
+    font-weight: bold;
+    color:rgb(112, 111, 111);
+}
+
+h2 {
+    margin-top:3rem;
+    margin-bottom: 3rem;
+    width: fit-content;
+    font-family:'Glacial Indifference', HELVETICA;
+    font-weight: bold;
+    font-size: 35px;
+    background-color:rgb(94, 92, 92);
+	color:balck;
+    line-height: initial;
+    padding:.5rem;
+    white-space: nowrap;
+    letter-spacing: 2px;
+}
+
+#home:hover{
+    background-color:white;
+}
+
+@media only screen and (min-width:1440px) {
+
+    /* POSITIONING */
+
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        height: calc(100vh - 8rem);
+        padding:8rem 16rem;
+        padding-bottom: 0;
+    }
+    
+    #my-name, #linkture, footer {
+        flex-direction: row;
+        margin:0;
+    }
+
+    #my-name h1, #my-links, #my-features {
+        flex:1;
+    }
+
+    #linkture {
+        margin-top: 3rem;
+        align-items: flex-end;
+    }
+
+    #my-photo {
+        width: 310px;
+        height:310px;
+    }
+
+    h1 a {
+        cursor: url("sparkle2.png"), auto;
+    }
+
+    li a:hover {
+        color:#d9e021;
+        font-style: italic;
+    }
+   
+
+    #my-photo:hover {
+        opacity: 100;
+        transition: all 0.2s ease-in-out; 
+        transform: scale(1.2);
+    }
+
+    /* FONT FORMAT */
+
+    h1 {
+        font-size:200px;
+        margin:0;
+        padding:0;
+        margin-block-end:0;
+        line-height: 1;
+        letter-spacing: .2rem;
+        font-style: PlayfairDisplay;
+    }
+
+    h2 {
+        margin:0;
+        letter-spacing:2px;
+        font-size:12px;
+        padding:3px;
+        background-color:rgb(134, 134, 134);
+	    color:balck;
+    }
+
+    #my-skills li {
+        font-size: 24px;
+        margin-top: .8rem;
+        font-style: none;
+    }
+
+    #my-links li {
+        font-size: 24px;
+        margin-top:1rem;
+        position:top;
+    }
+
+    #my-features li {
+        font-size: 24px;
+        margin-top:1rem;
+    }
+
+    footer {
+        font-family:'lora', georgia;
+        font-style: italic;
+        font-size: 11px;
+        font-weight: bold;
+        padding: 0;
+        text-align: justify;
+        margin-bottom: 1rem;
+        color: white;
+        letter-spacing: .1rem;
+    }
+
+    footer:hover {
+        color:#d9e021;
+        cursor: url("sparkle2.png"), auto;
+    }
+
+    #home h2:hover{
+        background-color:white;
+    }
+
+    img#madhu:hover, img#sitar:hover, img#charity:hover {
+        opacity: 100;
+        transition: all 0.2s ease-in-out; 
+        transform: scale(1.1);
+        cursor: url("sparkle2.png"), auto;
+    }
+
+    h2 a {
+        color:black;
+    }
+}

www/index.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>alba r.</title>
+<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
+<link rel="stylesheet" href="index.css"/>
+
+</head>
+
+<body>
+
+<div id="my-name">
+    
+    <h1>
+    alba r. <br>
+    </h1>
+
+    <a href="index.html">
+        <img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
+    </a>
+
+</div>
+
+<ul id="my-skills">
+
+    <h2> HELLO </h2>
+
+    <li>
+        thanks for visiting. <br>
+        <br>
+        <br>
+    
+
+    </li>
+   
+</ul>
+
+
+<div id="linkture">
+<ul id="my-features">
+
+    <h2>
+        HERE'S WHAT I DO
+    </h2>
+
+    <li id="sc"> 
+        <a href="consulting.html">
+        strategy & consulting
+        </a> </li>
+    <li id="id"> 
+        <a href="art.html">
+        art & customs 
+        </a></li>
+    <li id="ca">
+        <a href="otherthings.html">
+        & some other things
+        </a>
+    </li>
+
+ </ul>
+
+<footer>
+   designed and developed by alba rajanibala
+</footer>
+
+</div>
+
+
+
+</body>
+</html>

www/infodesign.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Alba Rajanibala</title>
+<link rel="shortcut icon" href="tabicon.jpg" type="image/x-icon"/>
+<link rel="stylesheet" href="skills.css"/>
+
+</head>
+
+<body>
+
+    <h2 id="home">
+        <a href="index.html">
+            ◄ HOME
+        </a></h2>
+
+<div id="my-name">
+    
+    <h1>
+    information <br>
+    design  
+    </h1>
+
+    <!-- <a href="index.html">
+        <img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
+    </a> -->
+
+</div>
+
+<ul id="my-skills">
+
+    <h2> WHAT I DO </h2>
+
+    <li>
+        data visualization
+    </li>
+    <li> 
+        information design
+    </li>
+    <li>
+        storytelling
+    </li>
+</ul>
+
+
+<div id="linkture">
+<ul id="my-features">
+
+    <h2>
+    HOW I DO IT    </h2>
+
+    <li> 
+        <a href="https://public.tableau.com/en-us/gallery/?tab=viz-of-the-day&type=viz-of-the-day" target="_blank">
+        Tableau</a>
+    </li>
+
+    <li>
+        <a href="https://www.adobe.com/products/illustrator.html" target="_blank">
+        Illustrator
+        </a>
+    </li>
+
+    <li>
+        <a href="https://www.adobe.com/products/indesign.html" target="_blank">
+       InDesign
+       </a>
+    </li>
+
+ </ul>
+
+ <ul id="my-links">
+    <h2> INSPIRATION </h2>
+    <li>
+        <a href="https://monachalabi.com/" target="_blank">
+            Mona Chalabi
+        </a>
+    </li>
+
+    <li> 
+        <a href="http://giorgialupi.com/" target="_blank">
+            Giorgia Lupi 
+        </a>
+    </li>
+
+    <li> 
+        <a href="https://www.davidrumsey.com/luna/servlet/view/search?q=author=%22Rand%20McNally%20and%20Company%22&sort=Pub_List_No_InitialSort,Pub_Date,Pub_List_No,Series_No" target="_blank">
+        John B Sparks 
+        </a>
+    </li>
+</ul> 
+
+<footer>
+   designed and developed by alba rajanibala
+</footer>
+
+</div>
+
+
+
+</body>
+</html>

www/otherthings.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>about alba</title>
+<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
+<link rel="stylesheet" href="skills.css"/>
+
+</head>
+
+<body>
+
+    <a href="index.html">
+    <h2 id="home">
+            ◄ HOME
+    </h2>
+    </a>
+
+<div id="my-name">
+    
+    <h1>
+    & some  <br>
+    other things  
+    </h1>
+
+    <!-- <a href="index.html">
+        <img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
+    </a> -->
+
+</div>
+
+<ul id="my-skills">
+
+    <h2> WORKING ON  </h2>
+
+    <li>
+        <a href="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi by Alba Rajanibala" target="_blank">
+        information design
+        </a>
+    </li>
+    <li> 
+        <a href="Chrome WatchParty - Summary by Alba.pdf" alt="Chrome WatchParty" target="_blank">
+        chrome watchparty
+        </a>
+    </li>
+    <li>
+        <a href="Coloring Photos by Alba Rajanibala.pdf" alt="Photographs by Alba RajanibalaR" target="_blank">
+         recoloring photos
+        </a>
+    </li>
+</ul>
+
+
+<div id="linkture">
+<ul id="my-features">
+    <h2> EXPLORE </h2>
+    <li> 
+        <a href="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi by Alba Rajanibala" target="_blank"> 
+            <img src="Gandhi's Vision by Alba Rajanibala.jpg" alt="Gandhi's Vision by Alba Rajanibala" id="madhu" height="165px">
+        </a>
+
+        <a href="http://chromewatchparty.com" alt="Chrome Watch Party" target="_blank">
+            <img src="cwp.png" alt="Chrome WatchParty" id="sitar" height="165px">
+        </a>
+
+        <a href="Coloring Photos by Alba Rajanibala.pdf" alt="Coloring Photos by Alba Rajanibala" target="_blank">
+        <img src="balcony-by-alba-rajanibala-02.jpg" alt="Balcony by Alba Rajanibala" id="charity" height="165px">
+        </a>
+
+     </li>
+</ul>
+
+<footer>
+   designed and developed by alba rajanibala
+</footer>
+
+</div>
+
+
+
+</body>
+</html>

www/skills.css

@@ -0,0 +1,236 @@
+@keyframes AnimationName {
+    0%{background-position:0% 90%}
+    50%{background-position:100% 5%}
+    100%{background-position:0% 90%}
+}
+
+@font-face {
+    font-family: Playfair Display;
+    src: url(PlayfairDisplay-Regular.otf);
+  }
+  
+  div {
+    font-family: myFirstFont;
+  }
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: linear-gradient(45deg, black, #444444);
+    background-size: 100% 600%;
+    animation: AnimationName 8s ease infinite;
+    cursor: url("sparkle.png"), auto;
+    height: 100vh;
+    padding:6rem;
+}
+
+#my-name {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+#my-photo {
+    width:250px;
+    height:250px;
+    border-radius: 50%;
+}
+
+#my-photo:hover {
+    opacity: 100;
+    transition: all 0.2s ease-in-out; 
+    transform: scale(1.2);
+}
+
+#linkture{
+    display: flex;
+    flex-direction: column;
+}
+
+h1 {
+    font-family:Playfair Display, Georgia;
+    font-size:100px;
+    font-weight: 100;
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+    color:rgb(112, 111, 111);
+
+}
+
+ul {
+    list-style:none;
+    padding:0;
+    line-height: 2;
+    font-family: lora, Georgia;
+    font-size: 60px;
+}
+
+li {
+    font-family:'Lora', Georgia;
+    letter-spacing: .25rem;
+    line-height:2.5;
+    color:rgb(112, 111, 111);
+}
+
+a {
+    text-decoration: none;
+    cursor: url("sparkle2.png"), auto;
+    color:rgb(112, 111, 111);
+}
+
+a h2 {
+    color:black;
+}
+
+footer {
+    padding-top: 5rem;
+    padding-bottom: 10rem;
+    padding-right: 5rem;
+    font-family:'lora', Georgia;
+    font-style: italic;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: .2rem;
+    color:rgb(112, 111, 111);
+}
+
+h2 {
+    margin-top:3rem;
+    margin-bottom: 3rem;
+    width: fit-content;
+    font-family:'Glacial Indifference', Helvetica;
+    font-weight: bold;
+    font-size: 35px;
+    background-color:rgb(94, 92, 92);
+	color:balck;
+    line-height: initial;
+    padding:.5rem;
+    white-space: nowrap;
+    letter-spacing: 2px;
+}
+
+#home:hover{
+    background-color:#d9e021;
+}
+
+@media only screen and (min-width:1440px) {
+
+    /* POSITIONING */
+
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        height: calc(100vh - 8rem);
+        padding:8rem 16rem;
+        padding-bottom: 0;
+    }
+    
+    #my-name, #linkture, footer {
+        flex-direction: row;
+        margin:0;
+    }
+
+    #my-name h1, #my-links, #my-features {
+        flex:1;
+    }
+
+    #linkture {
+        margin-top: 3rem;
+        align-items: flex-end;
+    }
+
+    #my-skills {
+        padding-top: 4rem;
+    }
+
+    h1 a {
+        cursor: url("sparkle2.png"), auto;
+    }
+
+    li a:hover {
+        color:#d9e021;
+        font-style: italic;
+        font-size: 26px;
+    }
+   
+
+    #my-photo:hover {
+        opacity: 100;
+        transition: all 0.2s ease-in-out; 
+        transform: scale(1.2);
+    }
+
+    /* FONT FORMAT */
+
+    h1 {
+        font-size:100px;
+        margin:0;
+        padding:0;
+        margin-block-end:0;
+        line-height: 1;
+        padding-top: 2rem;
+        letter-spacing:3px;
+    }
+
+    h2 {
+        margin:0;
+        letter-spacing:2px;
+        font-size:14px;
+        padding:3px;
+        background-color:rgb(134, 134, 134);
+	    color:balck;
+    }
+
+    #my-skills li {
+        font-size: 28px;
+        margin-top: .8rem;
+        font-style: none;
+    }
+
+    #my-links li {
+        font-size: 20px;
+        margin-top:1rem;
+        position:top;
+    }
+
+    #my-features li {
+        font-size: 20px;
+        margin-top:1rem;
+    }
+
+    footer {
+        font-family:'lora', Georgia;
+        font-style: italic;
+        font-size: 11px;
+        font-weight: bold;
+        padding: 0;
+        text-align: justify;
+        margin-bottom: 1rem;
+        color: white;
+        letter-spacing: .1rem;
+    }
+
+    footer:hover {
+        color:#d9e021;
+    }
+
+    #home h2:hover{
+        background-color:#d9e021;
+        cursor: url("sparkle2.png"), auto;
+    }
+
+    img#madhu:hover, img#sitar:hover, img#charity:hover {
+        opacity: 100;
+        transition: all 0.2s ease-in-out; 
+        transform: scale(1.1);
+    }
+
+    h2 a {
+        color:black;
+    }
+}