Skip to content

Commit

Permalink
Added portfolio page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bharath314
Bharath314 committed Aug 9, 2024
1 parent 0690949 commit e112c90
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 19 deletions.
54 changes: 48 additions & 6 deletions certification/portfolio-page/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,62 @@
<ul>
<li><a class="nav-link" href="#welcome-section">About</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#skills">Skills</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
<li><a class="nav-link" href="#contact">Find Me</a></li>
</ul>
</nav>
</header>
<body>
<section id="welcome-section">
<h1>Hi, I am <span>Bharath Valaboju</span></h1>
<div>
<h1 class="greeting">Hi👋, I am</h1>
<h1><span>Bharath Valaboju</span></h1>
<h3>Web Developer and Data Science Enthusiast</h3>
<p>I'm an Undergrad student pursuing a BS in Data Science and Applications from IIT Madras. I am an aspiring software developer and I really love data science.</p>
</div>
</section>
<section id="projects">
<h1>Projects</h1>
<div class="project">
<h2 class="project-title"></h2>
<a href="https://bharath314.github.io/fCC-RWD/">fcc-RWD</a>
<div class="projects-list">
<div class="project-tile">
<h2 class="project">Carousel</h2>
<p> A simple static instagram clone that allows for multiple users who can
make posts that allow for images. The users can also edit and delete their
posts and follow each other. Made for the course BSCS2003P</p>
<p><strong>Tech Stack</strong> Flask <em>Backend</em>, sqlite <em>Database</em></p>
<p class="link-text"><a href="https://github.com/Bharath314/Carousel">Repository <img class="link-icon" src="../../static/external-link.png" alt=""></a></p>
</div>
<div class="project-tile">
<h2 class="project"> MovieZoo </h2>
<p> A RESTful movie ticketing and venue management system that allows for
users to book tickets and managers to manage shows and venues. Notable
features include token-based RBAC, caching and async jobs. Made for the
course BSCS2006P</p>
<p> <strong>Tech Stack</strong> Flask <em>Backend</em>, sqlite <em>Database</em>, redis <em>Cache</em>, celery <em>Async Jobs</em>,
Vue.js <em>Frontend</em>, vite <em>Development Server</em></p>
<p class="link-text"><a href="https://github.com/Bharath314/MovieZoo">Repository <img class="link-icon" src="../../static/external-link.png" alt=""></a></p>
</div>
<div class="project-tile">
<h2 class="project"><a href="https://bharath314.github.io/fCC-RWD/">fCC-RWD <img class="link-icon" src="../../static/external-link.png" alt=""></a></h2>
<p>A bunch of html+css pages that I made to practice my vanilla css. I followed freeCodeCamp's Responsive Web Design course to make these projects.</p>
<p class="link-text"><a href="https://github.com/Bharath314/fCC-RWD">Repository <img class="link-icon" src="../../static/external-link.png" alt=""></a></p>
</div>
<div class="project-tile">
<h2 class="project"><a href="https://bsc-iitm.github.io/python-textbook/">Python Textbook <img class="link-icon" src="../../static/external-link.png" alt=""></a></h2>
<p>Ported an existing textbook to the
framework Material for mkdocs,
proofread and expanded upon some of its
chapters.</p>
<p class="link-text"><a href="https://github.com/bsc-iitm/python-textbook">Repository <img class="link-icon" src="../../static/external-link.png" alt=""></a></p>
</div>
</div>
</section>
<section id="contact">
<h1>Find Me</h1>
<div class="contact-list">
<div class="contact-option"><a id="profile-link" target="_blank" href="mailto:[email protected]"><img src="../../static/email (1).png" alt="email"></a></div>
<div class="contact-option"><a id="profile-link" target="_blank" href="https://www.linkedin.com/in/bharath-valaboju-0bb24521a/"><img src="../../static/linkedin.png" alt="email"></a></div>
<div class="contact-option"><a id="profile-link" target="_blank" href="https://github.com/Bharath314"><img src="../../static/github.png" alt="email"></a></div>
<div class="contact-option"><a id="profile-link" target="_blank" href="https://www.hackerrank.com/profile/valabojubharath"><img src="../../static/hackerrank_logo_icon_248120.png" alt="email"></a></div>
</div>
</section>
</body>
Expand Down
148 changes: 135 additions & 13 deletions certification/portfolio-page/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ body{
}

header {
position: sticky;
position: fixed;
width: 100%;
top: 0;
padding: 8px;
border-color: rgba(0, 22, 22, 0.4);
background-color: rgba(24, 24, 24, 0.9);
padding: 8px 0 8px 0;
/* background-color: black; */
display: flex;
justify-content: flex-end;
height: 42px;

}

#navbar {
Expand All @@ -23,12 +24,14 @@ header {
#navbar ul {
display: flex;
margin: auto;
margin-right: 20px;
list-style: none;
padding: 0px;
}

#navbar ul li {
margin: 10px
margin: 18px;
font-size: 1.2rem;
}

#navbar ul li a {
Expand All @@ -37,20 +40,139 @@ header {
}

#navbar ul li a:hover {
color: aqua;
color: transparent;
background: linear-gradient(90deg, #FF0000 0%, #990000 25%, #FF0000 75%, #990000 100%);
-webkit-background-clip: text;
background-clip: text;
background-size: 400% 100%;
animation: logo 1s linear infinite;
}

#welcome-section {
padding-top: 58px;
/* padding-top: 58px; */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#welcome-section > h1 > span {
display: block;
/* text-align: center; */
font-size: 6rem;
#welcome-section div {
max-width: 768px;
padding-left: 20px;
padding-right: 20px
}

#welcome-section h1 {
margin: 0;
}

#welcome-section h1 > span {
display: inline-block;
font-size: 5rem;
color: transparent;
background: linear-gradient(90deg, red ,blue );
background: linear-gradient(90deg, blue 0%, red 25%, blue 75%, red 100%);
-webkit-background-clip: text;
background-clip: text;
margin-bottom: 25px;
background-size: 400% 100%;
animation: logo 10s linear infinite;
}

@keyframes logo {
0%{background-position:right}
100%{background-position:left}
/* 100%{background-position:100% 0%} */
/* 100%{background-position:100% 0%} */
}

#projects {
padding-top: 80px
}

#projects h1 {
font-size: 2.2rem;
text-align: center;
}


.projects-list {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.projects-list a {
color: white;
text-decoration: none;
font-weight: lighter;
font-style: italic
}

.projects-list h2 a {
font-weight: bold;
font-style: normal;
}

.link-icon {
height: 0.8rem;
}

h2 .link-icon {
height: 1.2rem;
}

.link-text {
margin: 2px
}

.project-tile {
max-width: 768px;
}

.project-tile em {
/* font-style: normal; */
font-weight: lighter;
}

#contact {
padding-top: 80px;
padding-bottom: 80px;
}

#contact h1 {
font-size: 2.2rem;
text-align: center;
}

#contact img {
height: 5rem;
}

.contact-list {
display: flex;
justify-content: space-around;
}

@media only screen and (max-width: 1368px) {
header {
background-color: black;
justify-content: center;
}
}

@media only screen and (max-width: 688px) {
#welcome-section h1 > span {
font-size: 4rem;
}
}

@media only screen and (max-width: 558px) {
#welcome-section h1 > span {
font-size: 3rem;
}

#contact img {
height: 3rem;
}
}
5 changes: 5 additions & 0 deletions credits.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ <h2>Product Landing Page</h2>
</p>
<div> Icons made by <a href="https://www.flaticon.com/authors/didin-jpr" title="Didin jpr"> Didin jpr </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<div> Icons made by <a href="https://www.flaticon.com/authors/kerismaker" title="kerismaker"> kerismaker </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<h2>Portfolio Page</h2>
<div> Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect"> Pixel perfect </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<div> Icons made by <a href="https://www.flaticon.com/authors/bharat-icons" title="Bharat Icons"> Bharat Icons </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<div> Icons made by <a href="https://www.flaticon.com/authors/riajulislam" title="riajulislam"> riajulislam </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
<div> Icons made by <a href="https://www.flaticon.com/authors/uniconlabs" title="Uniconlabs"> Uniconlabs </a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
</div>
</body>
</html>
Binary file added static/email (1).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/external-link.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/github.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/hackerrank_logo_icon_248120.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/linkedin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e112c90

Please sign in to comment.