Skip to content

Commit

Permalink
Merge pull request #10 from AksharP5/akshar5/add-projects-section-7
Browse files Browse the repository at this point in the history 
feat: add projects section
  • Loading branch information
@AksharP5
AksharP5 authored Sep 6, 2024
2 parents 0ac9658 + 5754e7a commit c0536fe
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 3 deletions.
69 changes: 66 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<header class="header">
<a href="#" class="logo">Akshar</a>
<i class="fa-solid fa-bars" class="menu-icon"></i>
<i class="fa-solid fa-bars" id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#projects">Projects</a>
Expand All @@ -32,8 +32,71 @@ <h3 class="typing-text">I'm a <span class="typing-span"></span></h3>
<div class="social-icon">
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-square-github"></i></i></a>
</div>

</div>
</div>
</section>


<section class="projects" id="projects">
<h2 class="heading">Projects</h2>
<div class="projects-container">
<a href="https://github.com/ourPLCC" target="_blank" rel="noopener noreferrer"> <div class="project-box">
<div class="project-info">
<h4>PLCC</h4>
<ul>
<li>A Programming Language Compiler Compiler</li>
<li>Introduced a fourth semantics section that accepts user-written Python code</li>
<li>Implemented comprehensive tests for all 32 predefined languages using bats</li>
<li>Optimized testing efficiency through GitHub Actions pipeline integration</li>
<li>Expanded the parser to generate files in Java and Python</li>
<li>Deployed a Dockerized testing environment for streamlined testing processes</li>
</ul>
</div>
</div></a>

<a href="https://github.com/AksharP5/GetSpotifyStats" target="_blank" rel="noopener noreferrer"> <div class="project-box">
<div class="project-info">
<h4>Get Spotify Stats</h4>
<ul>
<li>A Flask Web App for getting Spotify stats</li>
<li>Developed a full-stack web application using Flask</li>
<li>Leveraged the Spotify API to deliver real-time account statistics to users</li>
<li>Automated the generation of a personalized Discover Weekly Homepage on each visit, enhancing user engagement
and satisfaction</li>
<li>Implemented features displaying users' recent songs, top songs, top artists, and recommended songs across various time frames for a comprehensive overview</li>
<li>Displayed real-time Spotify statistics and personalized recommendations for users</li>
</ul>
</div>
</div></a>

<a href="https://github.com/AksharP5/portfolio-react" target="_blank" rel="noopener noreferrer"> <div class="project-box">
<div class="project-info">
<h4>React Portfolio Website</h4>
<ul>
<li>A Portfolio Website In React</li>
<li>Developed a modern and responsive portfolio website using React for an enhanced user experience</li>
<li>Enhanced user interface with custom React components for a unique design</li>
<li>Implemented engaging and interactive features by incorporating letter animations on hover in the portfolio website</li>
<li>Implemented a captivating visual element in the form of a spinning cube on the portfolio website</li>
<li>Integrated a contact form for easy communication and collaboration opportunities</li>
</ul>
</div>
</div></a>

<a href="https://github.com/AksharP5" target="_blank" rel="noopener noreferrer"> <div class="project-box">
<div class="project-info">
<h4>Top Songs 2023 Database</h4>
<ul>
<li>Created a MySQL Database For the Top Songs of 2023</li>
<li>Created relational tables for efficient data management and linking</li>
<li>Created a function to calculate the age of artists, handling both living and deceased cases</li>
<li>Implemented and tested stored procedures for dynamic querying of song and artist information</li>
<li>Developed logical schemas to outline data structures and relationships between all tables</li>
<li>Created views to simplify access to categorized data, such as artist demographics and song genres</li>
</ul>
</div>
</div></a>

</div>
</section>

Expand Down
137 changes: 137 additions & 0 deletions src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,3 +266,140 @@ span {
width: calc(100% + 8px);
}
}
@media (max-width: 1000px) {
.home {
gap: 4rem;
}
}

@media (max-width: 995px) {
.home {
flex-direction: column;
margin: 5rem 4rem;
}
.home .home-content h3 {
font-size: 2.5rem;
}
.home-content h1 {
font-size: 5rem;
}
.home-img img {
width: 70vw;
margin-top: 4rem;
}

}

/* Projects Section */

.projects {
background: var(--second-bg-color);
}

.heading {
text-align: center;
font-size: 4.5rem;
margin-bottom: 2rem;
vertical-align: middle;
}

.projects-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 3.5rem;

}

.project-box {
background-color: var(--main-color);
border-radius: 3rem;
height: 100%;
border-radius: 3rem;
cursor: pointer;
transition: 0.3s ease;
padding: 2rem;
display: grid;
flex-direction: column;
justify-content: center;
align-items: center;
}

.project-box:hover {
background: transparent;
color: var(--main-color);
transform: scale(1.03);
border: 1px solid var(--main-color);
}

.project-box .project-info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
padding: 1rem;
}

.project-info h4 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1rem;
}

.projects-container a {
color: inherit;
text-decoration: inherit;
}

.project-info ul{
font-size: 1.4rem;
font-weight: 400;
margin: 0 auto;
padding: 0;
text-align: left;
width: 100%;
max-width: 90%;

}
.project-info ul li {
margin-bottom: 1.5rem;
line-height: 1.5;
word-wrap: break-word;
}



@media (max-width: 991px) {
section {
padding: 10rem 3% 2rem;
}
.projects {
padding-bottom: 7rem;
}
}

@media (max-width: 895px) {
.projects h2 {
margin-bottom: 3rem;
}
.projects-container {
grid-template-columns: repeat(1, 1fr);
}
}

@media (max-width: 600px) {
.heading {
font-size: 3.5rem;
}
.project-info h4 {
font-size: 2.2rem;
}
.project-info ul {
font-size: 1.2rem;
}
.project-info ul li {
margin-bottom: 1rem;
}
}

0 comments on commit c0536fe

Please sign in to comment.