updated design and files

This commit is contained in:
rajanibala
2020-06-29 20:17:03 -04:00
parent e9d38771fa
commit 8d95e0f2d5
39 changed files with 228770 additions and 239 deletions
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

+100
View File
@@ -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>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

+24478
View File
File diff suppressed because one or more lines are too long
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

+100
View File
@@ -0,0 +1,100 @@
<!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>
<!-- <a href="index.html">
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
</a> -->
</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 Rajanibala LinkedIn" target="_blank">
<img src="linkedin.png" alt="Coloring Sheets by Alba Rajanibala" id="madhu" height="165px">
</a>
<a href="Alba Rajanibala Resume.pdf" alt="Alba Rajanibala Resume" target="_blank">
<img src="resume.png" alt="Sitar by Alba Rajanibala" id="sitar" height="165px">
</a>
<a href="mailto:alba.rajanibalaa@gmail.com" target="_blank">
<img src="email.png" alt="Shakti by Alba Rajanibala" id="charity" height="165px">
</a>
</li>
</ul>
<footer>
designed and developed by alba rajanibala
</footer>
</div>
</body>
</html>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

+55235
View File
File diff suppressed because one or more lines are too long
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

+238
View File
@@ -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;
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;
font-size: 60px;
}
li {
font-family:'Lora';
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';
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';
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;
}
}
+69 -222
View File
@@ -2,248 +2,95 @@
<html>
<head>
<meta charset="utf-8">
<title>Alba Rajanibala</title>
<title>alba r.</title>
<link rel="shortcut icon" href="tabicon.png" type="image/x-icon"/>
<link rel="stylesheet" href="index.css"/>
<!-- 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>
</head>
<body>
<div id="section-a">
<div class="title-tag" id="my-name">
Alba <br>
Rajanibala <br>
<div id="my-name">
</div>
<h1>
alba r. <br>
</h1>
<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 href="index.html">
<img src="ar1.jpg" alt="Alba Rajanibala" id="my-photo">
</a>
<div id="hilit">
information design <br/>
</div>
<div id="hilit">
customs by alba <br/> <br>
</div>
</div>
<ul id="my-skills">
<div id="section-b">
<h2> HELLO </h2>
<div id="section-title"> <div id="highlight">
&nbsp; MORE &nbsp;
</div>
</div>
<li>
thanks for visiting. <br>
<br>
<br>
<div id="section-title">
<div id="designotw">
<div id="highlight">
&nbsp;DESIGN OF THE WEEK&nbsp;
</div>
</div>
</div>
</li>
</div>
</ul>
<div id="section-c">
<div id="my-links">
<a href="Alba Rajanibala Resume.pdf" target="_blank">
<div id="hilit">
resume
</div>
<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>
<div id="hilit">
portfolio
</div>
<div id="hilit">
customs
</div>
</li>
</ul> -->
<!-- <ul id="my-links">
<h2>
WHAT ELSE I DO
</h2>
<li>
<a href="https://www.chromewatchparty.com" target="_blank">
helping launch Chrome WatchParty
</a>
</li>
<li>
<a href="shop.rajanibala.com" target="_blank">
creating some Custom Art
</a>
</li>
<li>
<a href="http://stealingfirebook.com/" target="_blank">
updating my resume
</a>
</li>
</ul> -->
<footer>
designed and developed by alba rajanibala
</footer>
</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>
</html>
+102
View File
@@ -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>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

+82
View File
@@ -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>
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 340 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 820 KiB

+236
View File
@@ -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;
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;
font-size: 60px;
}
li {
font-family:'Lora';
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';
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';
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';
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;
}
}
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 633 B

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1009 B