Skip to content

Commit

Permalink
Skill update
Browse files Browse the repository at this point in the history
  • Loading branch information
@hars-21
hars-21 committed Jan 28, 2024
1 parent 435c096 commit 40f7a90
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 186 deletions.
22 changes: 19 additions & 3 deletions dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ body {

#navbarSupportedContent > ul > li.active > a {
color: #2f78a8;
font-weight: bold ;
font-weight: bold;
}

.hori-selector {
Expand Down Expand Up @@ -88,8 +88,8 @@ body {
background-color: black;
}

.skill span {
color: #042bff;
#head-skill {
color: white;
}

.skills {
Expand All @@ -100,6 +100,22 @@ body {
color: whitesmoke;
}

.circle-bar {
box-shadow: inset 0 0 7px #0d1b2a;
border-left-color: #013a63;
border-top-color: #2a6f97;
border-right-color: #61a5c2;
border-bottom-color: #00172c;
}

.circle-bar .cic-name {
color: white;
}

#b {
border-right-color: #00172c;
}

#projects {
background-color: #c5cfd6;
}
Expand Down
186 changes: 115 additions & 71 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,13 +95,6 @@
<li class="nav-item" id="li_experience">
<a class="nav-link" href="#experience">Experience</a>
</li>
<!-- Not much important -->
<!-- <li class="nav-item" id="li_certificates">
<a class="nav-link" href="#certificates">Certificates</a>
</li>
<li class="nav-item" id="li_faq_section">
<a class="nav-link" href="#faq_section">FAQ</a>
</li> -->
<li class="nav-item" id="li_contact">
<a class="nav-link" href="#contact">Contact</a>
</li>
Expand All @@ -112,7 +105,14 @@
<!-- Home Section -->
<section id="home">
<div class="text">
<p>Hey there <img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="40px"> !</p>
<p>
Hey there
<img
src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif"
width="40px"
/>
!
</p>
<h1>I am <span>Ariana.</span></h1>
<h1>
<a
Expand Down Expand Up @@ -219,53 +219,104 @@ <h1>
<!-- Skills section -->
<section id="skill_section" class="skills">
<div class="container">
<h2>Skills</h2>
<!-- Frontend -->
<h2 id="head-skill">Skills</h2>

<div class="skill-category">
<h3>Frontend Development</h3>
<h3>Technical Skills</h3>
<div class="skills-list">
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fab fa-html5"></i>
<div class="skill-item">
<i class="fa-brands fa-html5"></i
><span class="skill-name">HTML</span>
<div class="prg">
<progress class="skillset" value="95" max="100"></progress>
<span class="amt">95%</span>
</div>
</div>
<div class="skill-item">
<i class="fa-brands fa-css3-alt"></i
><span class="skill-name">CSS</span>
<div class="prg">
<progress class="skillset" value="90" max="100"></progress>
<span class="amt">90%</span>
</div>
</div>
<div class="skill-item">
<i class="fa-brands fa-js"></i
><span class="skill-name">JavaScript</span>
<div class="prg">
<progress class="skillset" value="84" max="100"></progress>
<span class="amt">84%</span>
</div>
</div>
<div class="skill-item">
<i class="fa-brands fa-react"></i
><span class="skill-name">React</span>
<div class="prg">
<progress class="skillset" value="80" max="100"></progress>
<span class="amt">80%</span>
</div>
</div>
<div class="skill-item">
<i class="fa-brands fa-angular"></i
><span class="skill-name">Angular</span>
<div class="prg">
<progress class="skillset" value="60" max="100"></progress>
<span class="amt">60%</span>
</div>
<span>HTML5</span>
</div>
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fab fa-css3-alt"></i>
<div class="skill-item">
<i class="fa-brands fa-node-js"></i
><span class="skill-name">Node.js</span>
<div class="prg">
<progress class="skillset" value="70" max="100"></progress>
<span class="amt">70%</span>
</div>
<span>CSS3</span>
</div>
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fab fa-js"></i>
<div class="skill-item">
<i class="fa-brands fa-python"></i
><span class="skill-name">Python</span>
<div class="prg">
<progress class="skillset" value="85" max="100"></progress>
<span class="amt">85%</span>
</div>
<span>JavaScript</span>
</div>
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fab fa-react"></i>
<div class="skill-item">
<i class="fa-solid fa-database"></i
><span class="skill-name">MongoDB</span>
<div class="prg">
<progress class="skillset" value="65" max="100"></progress>
<span class="amt">65%</span>
</div>
<span>React.js</span>
</div>
<!-- Add more skills with similar structure -->
</div>
</div>
<!-- Backend -->

<div class="skill-category">
<h3>Backend Development</h3>
<h3>Professional Skills</h3>
<div class="skills-list">
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fab fa-node"></i>
<div class="skill-item">
<div class="circle-bar">
<div class="cic-value">85%</div>
<div class="cic-name">Creativity</div>
</div>
</div>
<div class="skill-item">
<div class="circle-bar" id="b">
<div class="cic-value">60%</div>
<div class="cic-name">Communication</div>
</div>
<span>Node.js</span>
</div>
<div class="skill" data-aos="zoom-in">
<div class="skill-icon">
<i class="fas fa-database"></i>
<div class="skill-item">
<div class="circle-bar">
<div class="cic-value">90%</div>
<div class="cic-name">Problem Solving</div>
</div>
</div>
<div class="skill-item">
<div class="circle-bar">
<div class="cic-value">80%</div>
<div class="cic-name">Teamwork</div>
</div>
<span>MongoDB</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -571,6 +622,7 @@ <h6 class="test-head">
</div>
</div>
<div class="carousel-item">
<i class="fa-brands fa-"></i>
<img src="assets/test_icons/2.png" alt="Profile Photo" />
<h6 class="test-head">Riya Jain | Project Admin | Google</h6>
<p class="test-desc">
Expand All @@ -592,6 +644,7 @@ <h6 class="test-head">Riya Jain | Project Admin | Google</h6>
</div>
</div>
<div class="carousel-item">
<i class="fa-brands fa-"></i>
<img src="assets/test_icons/3.png" alt="Profile Photo" />
<h6 class="test-head">
Aayush Gupta | Freelancer | GSoC Contributor
Expand All @@ -615,6 +668,7 @@ <h6 class="test-head">
</div>
</div>
<div class="carousel-item">
<i class="fa-brands fa-"></i>
<img src="assets/test_icons/4.png" alt="Profile Photo" />
<h6 class="test-head">Neha Sharma | HR at Infosys | Recruiter</h6>
<p class="test-desc">
Expand All @@ -636,6 +690,7 @@ <h6 class="test-head">Neha Sharma | HR at Infosys | Recruiter</h6>
</div>
</div>
<div class="carousel-item">
<i class="fa-brands fa-"></i>
<img src="assets/test_icons/5.png" alt="Profile Photo" />
<h6 class="test-head">Prof. Dr. Anubhav Singh | IGDTUW</h6>
<p class="test-desc">
Expand Down Expand Up @@ -707,44 +762,33 @@ <h2 id="certificate-heading">Certificates</h2>
style="margin-left: 105px"
/>
</div>

<h1>
<span id="faq-head">Frequently Asked Questions?</span>
</h1>
<div class="tabss-container">
<section>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc1" id="acc1" />
<label for="acc1">
01 In which year do I study?
</label>
<div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
</div>
</section>
<section>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc2" id="acc2" />
<label for="acc2">
02 Am I a member of any of the college societies?
</label>
<div class="contentfaqs">
<p>Yes, I am the part of college societies named_____</p>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc1" id="acc1" />
<label for="acc1"> 01 In which year do I study? </label>
<div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
</div>
</div>
</section>
<section>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc3" id="acc3" />
<label for="acc3">
03 What are my hobbies?
</label>
<div class="contentfaqs">
<p>I have various hobbies, I like to ___name of hobbies___</p>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc2" id="acc2" />
<label for="acc2">
02 Am I a member of any of the college societies?
</label>
<div class="contentfaqs">
<p>Yes, I am the part of college societies named_____</p>
</div>
</div>
<div class="tabss" data-aos="zoom-in">
<input type="checkbox" name="acc3" id="acc3" />
<label for="acc3"> 03 What are my hobbies? </label>
<div class="contentfaqs">
<p>I have various hobbies, I like to ___name of hobbies___</p>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<!----FAQ Section ending------------->

Expand All @@ -754,7 +798,7 @@ <h1>
<h1><span class="feedback-title">Feedback</span></h1>
<div class="contact-right">
<form class="feedback-form" name="submit-to-google-sheet">
<h4 id="feed-item">Your Name</h4>
<h4 id="feed-item"><i class="fa-brands fa-"></i>Your Name</h4>
<p>
<textarea
type="text"
Expand All @@ -764,7 +808,7 @@ <h4 id="feed-item">Your Name</h4>
data-aos="zoom-in"
></textarea>
</p>
<h4 id="feed-item">Your Email</h4>
<h4 id="feed-item"><i class="fa-brands fa-"></i>Your Email</h4>
<p>
<textarea
type="email"
Expand All @@ -774,7 +818,7 @@ <h4 id="feed-item">Your Email</h4>
data-aos="zoom-in"
></textarea>
</p>
<h4 id="feed-item">Feedback</h4>
<h4 id="feed-item"><i class="fa-brands fa-"></i>Feedback</h4>
<p>
<textarea
name="Message"
Expand Down
Loading

0 comments on commit 40f7a90

Please sign in to comment.