Skip to content

Commit

Permalink
skill section update and social icon update
Browse files Browse the repository at this point in the history
  • Loading branch information
Ashish Kumar Jha committed Oct 27, 2024
1 parent 24dca5f commit a5c6ffe
Show file tree
Hide file tree
Showing 2 changed files with 219 additions and 36 deletions.
65 changes: 60 additions & 5 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12718,10 +12718,6 @@ p.lead {
}
}

.dev-icons {
font-size: 3rem;
}

section.resume-section {
display: flex;
align-items: center;
Expand Down Expand Up @@ -12751,8 +12747,24 @@ section.resume-section .resume-section-content {
}
}

/* Skill/Dev Icons - Start */
.dev-icons {
font-size: 3rem;
}

.dev-icons i,
.devicon-svg {
height: 3rem;
width: auto;
vertical-align: middle;
display: inline-block;
}

/* Skill/Dev Icons - End */

/* Social Icons - Start */
.social-icons .social-icon {
/* Social Icons style before I have modified to use th Deviocns instead of font awesome */
/* .social-icons .social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
Expand All @@ -12771,8 +12783,51 @@ section.resume-section .resume-section-content {
.social-icons .social-icon:hover {
background-color: #bd5d38;
} */

/* Social Icons Container */
.social-icons {
display: flex;
/* Use flexbox to manage layout */
gap: 1rem;
/* Reduce spacing between icons */
}

/* Individual Social Icon Link */
.social-icons .social-icon {
display: inline-flex;
/* Inline-flex to center icon inside link */
align-items: center;
justify-content: center;
height: 3rem;
/* Adjusted height for more consistent sizing */
width: 3rem;
/* Adjusted width for more consistent sizing */
overflow: hidden;
/* Prevent overflow from icon */
transition: transform 0.3s ease;
/* Smooth scaling effect */
color: inherit;
/* Keep the natural colors of the icons */
}

/* SVG Icon Styling */
.social-icons .social-icon img.social-svg {
height: 2rem;
/* Explicit height for icon */
width: 2rem;
/* Explicit width for icon */
display: block;
/* Prevent extra inline spacing */
}

/* Hover Effect */
.social-icons .social-icon:hover {
transform: scale(1.1);
/* Slightly enlarge the container on hover */
}


/* Social Icons - End */

/* Contact Section - Start */
Expand Down
190 changes: 159 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<script src="https://www.google.com/recaptcha/api.js?render=6LcX7WwqAAAAAHTkqZTeAaX3UDgHaDy7bfNiaOo-"></script>
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
</head>

<body id="page-top">
Expand Down Expand Up @@ -48,23 +49,39 @@
<section class="resume-section" id="about">
<div class="resume-section-content">
<h1 class="mb-0">
Clarence
<span class="text-primary">Taylor</span>
Ashish
<span class="text-primary">Jha</span>
</h1>
<div class="subheading mb-5">
3542 Berry Street · Cheyenne Wells, CO 80810 · (317) 585-8468 ·
<a href="mailto:[email protected]">[email protected]</a>
Bengaluru, Karnataka, India
<!-- <a href="mailto:[email protected]">[email protected]</a> -->
</div>
<p class="lead mb-5">I am experienced in leveraging agile frameworks to provide a robust synopsis for
high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to
further the overall value proposition.</p>
<div class="social-icons">

<!-- Social Icons before I have changed to use the colorful icons -->
<!-- <div class="social-icons">
<a class="social-icon" href="https://linkedin.ashishjha.dev" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="social-icon" href="https://github.ashishjha.dev" target="_blank"><i
class="fab fa-github"></i></a>
<a class="social-icon" href="https://twitter.ashishjha.dev" target="_blank"><i
class="fab fa-twitter"></i></a>
</div> -->
<div class="social-icons">
<a class="social-icon" href="https://linkedin.ashishjha.dev" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linkedin/linkedin-original.svg"
alt="LinkedIn" class="social-svg" title="LinkedIn">
</a>
<a class="social-icon" href="https://github.ashishjha.dev" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
alt="GitHub" class="social-svg" title="GitHub">
</a>
<a class="social-icon" href="https://x.ashishjha.dev" target="_blank" rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/twitter/twitter-original.svg"
alt="Twitter" class="social-svg" title="Twitter">
</a>
</div>
</div>
</section>
Expand Down Expand Up @@ -147,38 +164,140 @@ <h3 class="mb-0">James Buchanan High School</h3>
<section class="resume-section" id="skills">
<div class="resume-section-content">
<h2 class="mb-5">Skills</h2>
<div class="subheading mb-3">Programming Languages & Tools</div>

<!-- Programming Languages -->
<div class="subheading mb-3">Programming Languages & Frameworks</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item"><i class="fab fa-html5"></i></li>
<li class="list-inline-item"><i class="fab fa-css3-alt"></i></li>
<li class="list-inline-item"><i class="fab fa-js-square"></i></li>
<li class="list-inline-item"><i class="fab fa-angular"></i></li>
<li class="list-inline-item"><i class="fab fa-react"></i></li>
<li class="list-inline-item"><i class="fab fa-node-js"></i></li>
<li class="list-inline-item"><i class="fab fa-sass"></i></li>
<li class="list-inline-item"><i class="fab fa-less"></i></li>
<li class="list-inline-item"><i class="fab fa-wordpress"></i></li>
<li class="list-inline-item"><i class="fab fa-gulp"></i></li>
<li class="list-inline-item"><i class="fab fa-grunt"></i></li>
<li class="list-inline-item"><i class="fab fa-npm"></i></li>
<li class="list-inline-item"><i class="devicon-csharp-plain colored" title="C#"></i></li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg"
alt="JavaScript" class="devicon-svg" title="JavaScript" />
</li>
<li class="list-inline-item"><i class="devicon-typescript-plain colored" title="TypeScript"></i>
</li>
<li class="list-inline-item">
<img src="https://raw.githubusercontent.com/dotnet/brand/refs/heads/main/logo/dotnet-logo.svg"
alt="dotnet" class="devicon-svg" title=".NET" />
</li>
<li class="list-inline-item"><i class="devicon-dotnetcore-plain colored" title=".NET Core"></i></li>
</ul>

<!-- Databases & Data Technologies -->
<div class="subheading mb-3">Databases & Data Technologies</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item"><i class="devicon-azuresqldatabase-plain colored"
title="Azure SQL Database"></i></li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/microsoftsqlserver/microsoftsqlserver-original-wordmark.svg"
alt="MS SQL Server" class="devicon-svg" title="MS SQL Server" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original-wordmark.svg"
alt="MySQL" class="devicon-svg" title="MySQL" />
</li>
<li class="list-inline-item"><i class="devicon-postgresql-plain-wordmark colored"
title="PostgreSQL"></i></li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/redis/redis-original-wordmark.svg"
alt="Redis" class="devicon-svg" title="Redis" />
</li>
</ul>

<!-- Cloud & DevOps -->
<div class="subheading mb-3">Cloud & DevOps</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item"><i class="devicon-azure-plain colored" title="Azure"></i></li>
<li class="list-inline-item"><i class="devicon-azuredevops-plain colored" title="Azure DevOps"></i>
</li>
<li class="list-inline-item"><i class="devicon-docker-plain-wordmark colored" title="Docker"></i>
</li>
<li class="list-inline-item"><i class="devicon-kubernetes-plain colored" title="Kubernetes"></i>
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/argocd/argocd-original.svg"
alt="ArgoCD" class="devicon-svg" title="ArgoCD" />
</li>
<li class="list-inline-item"><i class="devicon-helm-original colored" title="Helm"></i>
</li>
<li class="list-inline-item"><i class="devicon-git-plain colored" title="Git"></i></li>
<li class="list-inline-item"><i class="devicon-github-original-wordmark colored" title="GitHub"></i>
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/gitlab/gitlab-original-wordmark.svg"
alt="GitLab" class="devicon-svg" title="GitLab" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/bitbucket/bitbucket-original-wordmark.svg"
alt="Bitbucket" class="devicon-svg" title="Bitbucket" />
</li>
<li class="list-inline-item"><i class="devicon-nuget-original colored" title="NiGet"></i></li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/grafana/grafana-original-wordmark.svg"
alt="Grafana" class="devicon-svg" title="Grafana" />
</li>
<li class="list-inline-item"><i class="devicon-splunk-original-wordmark colored" title="Splunk"></i>
</li>
<li class="list-inline-item"><i class="devicon-sonarqube-plain-wordmark colored"
title="SonarQube"></i>
</li>
</ul>

<!-- Tools & Miscellaneous -->
<div class="subheading mb-3">Tools & Miscellaneous</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/visualstudio/visualstudio-original.svg"
alt="Visual Studio" class="devicon-svg" title="Visual Studio" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg"
alt="VS Code" class="devicon-svg" title="VS Code" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/yaml/yaml-original.svg"
alt="YAML" class="devicon-svg" title="YAML" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/json/json-original.svg"
alt="JSON" class="devicon-svg" title="JSON" />
</li>
<li class="list-inline-item">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jira/jira-original-wordmark.svg"
alt="Jira" class="devicon-svg" title="Jira" />
</li>
<li class="list-inline-item"><i class="devicon-apachekafka-original-wordmark colored"
title="Apache Kafka"></i>
</li>
</ul>
<div class="subheading mb-3">Workflow</div>
<ul class="fa-ul mb-0">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Mobile-First, Responsive Design
System Architecture Design
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Microservices Architecture and Design Patterns
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
API Development and Integration
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Agile Software Development
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Cross Browser Testing & Debugging
Database Optimization Strategies
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Cross Functional Teams
Performance Optimization
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Agile Development & Scrum
Software Development Life Cycle (SDLC)
</li>
</ul>
</div>
Expand Down Expand Up @@ -283,17 +402,26 @@ <h2 class="mb-5">Contact</h2>
<div class="col-md-6">
<div class="contact-info p-4">
<h4>Other Ways to Contact Me</h4>
<p><strong>Address:</strong> Chennai, Tamil Nadu, India</p>
<p><strong>Email:</strong> <a
href="mailto:[email protected]">[email protected]</a></p>
<p><strong>Address:</strong> Bengaluru, Karnataka, India</p>
<!-- <p><strong>Email:</strong> <a
href="mailto:[email protected]">[email protected]</a></p> -->
<p><strong>Follow Me:</strong></p>
<div class="social-icons">
<a class="social-icon" href="https://linkedin.ashishjha.dev" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="social-icon" href="https://github.ashishjha.dev" target="_blank"><i
class="fab fa-github"></i></a>
<a class="social-icon" href="https://twitter.ashishjha.dev" target="_blank"><i
class="fab fa-twitter"></i></a>
<a class="social-icon" href="https://linkedin.ashishjha.dev" target="_blank"
rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/linkedin/linkedin-original.svg"
alt="LinkedIn" class="social-svg" title="LinkedIn">
</a>
<a class="social-icon" href="https://github.ashishjha.dev" target="_blank"
rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg"
alt="GitHub" class="social-svg" title="GitHub">
</a>
<a class="social-icon" href="https://x.ashishjha.dev" target="_blank"
rel="noopener">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/twitter/twitter-original.svg"
alt="Twitter" class="social-svg" title="Twitter">
</a>
</div>
</div>
</div>
Expand Down

0 comments on commit a5c6ffe

Please sign in to comment.