Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@aditiverma-21
aditiverma-21 authored Sep 20, 2024
1 parent f4537ac commit 06cf01d
Show file tree
Hide file tree
Showing 4 changed files with 533 additions and 0 deletions.
162 changes: 162 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@50,500,0,0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link href="https://languages.abranhe.com/logos.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<nav class="nav-links">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="profile-header">
<div class="profile-info">
<h1>Aditi Verma</h1>
<p id="about">I’m a <b>web designer and developer</b> who loves blending creativity with technology.</p>
</div>
<div class="image-container">
<img src="me_avatar.png" alt="Profile Picture" class="profile-img" />
</div>
</div>
</header>

<main>
<!-- Skills -->
<section class="main-container">
<!-- Skills and Resume Container -->
<div class="skills-resume-container">
<div class="skills-card">
<h2>Skills</h2>
<div class="skills-icons">
<i class="programming lang-cpp"></i>
<i class="programming lang-c"></i>
<i class="programming lang-java"></i>
<i class="fab fa-github"></i>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
<span class="material-symbols-outlined">flutter</span>
<span class="material-symbols-outlined">database</span>
<i class="fab fa-figma"></i>
<i class="fab fa-php"></i>
</div>
</div>
<div class="action-buttons" id="resume">
<a href="resume.pdf" class="btn" download>
<p>Resume</p>
<i class="fas fa-download" aria-hidden="true"></i>
<i class="fas fa-eye" aria-hidden="true"></i>
</a>
</div>
</div>
</section>

<!-- Map and Contact -->
<section class="map-social-container">
<div class="map-card">
<h2>My Location</h2>
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d118983.72840229065!2d81.61907330000004!3d21.261905550000016!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a28dda23be28229%3A0x163ee1204ff9e240!2sRaipur%2C%20Chhattisgarh!5e0!3m2!1sen!2sin!4v1726598256213!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<!-- Contact section -->
<div class="contact-icons-container" id="contact">
<p> Let’s connect and see how we can work together to bring visions to life!</p>
<div class="contact-card">
<a href="https://github.com/aditiverma-21" class="contact-icon"><i class="fab fa-github"></i></a>
<p>Github</p>
</div>
<div class="contact-card">
<a href="tel:6263817742" class="contact-icon"><i class="fa fa-phone"></i></a>
<p>Phone</p>
</div>
<div class="contact-card">
<a href="https://www.linkedin.com/in/aditi-verma-571062227/" class="contact-icon"><i class="fab fa-linkedin-in"></i></a>
<p>LinkedIn</p>
</div>
</div>
</section>
</main>

<!-- Projects Section -->
<section class="projects-section" id="work">
<h2>Projects</h2>
<div class="projects-container">
<!-- Project 1 -->
<div class="project-card">
<h3>Artwork Copyright Website</h3>
<p>This website assists artists in navigating the copyright process by offering educational resources, application guidance, document management, and tracking tools. While the website aids in the process, actual copyright registration is granted by the government.</p>

<div class="tech-icons">
<a href="https://github.com/aditiverma-21/Artwork-Copryright-Website" class="git-link"><i class="fab fa-github"></i></a>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-php"></i>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRr-cvtgTIhNs-wRyktm02SNFKvCkUxsdCfOSEpkDkPBg3ayiym" alt="MySQL" class="skill-icon" style="height: 2rem; margin: 0rem;">
</div>
</div>

<!-- Project 2 -->
<div class="project-card">
<h3>Save Plant - Nurture Your Green Companion</h3>
<p>"Save Plant" is a user-friendly web development project that showcases a responsive landing page designed for an online plant shop. The landing page includes sections for purchasing plants, plant care tips, exploring a selection of plants, and an informative "About Us" section.</p>
<div class="tech-icons">
<a href="https://github.com/aditiverma-21/PlantLandingPage" class="git-link"><i class="fab fa-github"></i></a>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
</div>
</div>

<!-- Project Card 3 -->
<div class="project-card">
<h3>Calculator Website</h3>
<p>This project is a basic functional calculator which performs arithmetic operations like addition, subtraction, multiplication, and division. A clear button to reset all inputs, a clear entry (CE) button to reset only the current number without affecting previous inputs and a delete (DEL) button to remove the last entered digit.</p>
<div class="tech-icons">
<a href="https://github.com/aditiverma-21/Calculator-Website" class="git-link"><i class="fab fa-github"></i></a>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
</div>
</div>

<!-- Project Card 4 -->
<div class="project-card">
<h3>To do List Website</h3>
<p>The application allows users to create, manage, and organize their tasks efficiently. It supports essential features such as adding tasks, viewing them, editing them, marking them as complete, and deleting tasks.</p>
<div class="tech-icons">
<a href="https://github.com/aditiverma-21/To-Do-List-Website" class="git-link"><i class="fab fa-github"></i></a>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-php"></i>
<i class="fab fa-js"></i>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRr-cvtgTIhNs-wRyktm02SNFKvCkUxsdCfOSEpkDkPBg3ayiym" alt="MySQL" class="tech-icons" style="height: 1.5rem; margin: 0rem;">
</div>
</div>

<!-- Project Card 5 -->
<div class="project-card">
<h3>Uptrend - Fashion Shopping App</h3>
<p>The Figma design features a sleek mobile fashion app where users can browse items in carousel sliders, favorite products, and add them to a cart. Profile management and easy checkout from the cart are also included, providing a smooth and engaging shopping experience.</p>
<div class="tech-icons">
<a href="https://www.figma.com/design/hV2os0FyUrzJXI2zmg1Tul/Fashion-App?node-id=0-1&t=bocMxNqDajfvrKwL-1" class="git-link"><i class="fab fa-figma"></i></a>
</div>
</div>
</div>
</section>

<script src="script.js"></script>
</body>
</html>
Binary file added me_avatar.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.
24 changes: 24 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
function initMap() {
var location = { lat: 21.251384, lng: 81.629641 }; // Raipur, Chhattisgarh, India
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 20,
center: location,
});
var marker = new google.maps.Marker({
position: location,
map: map,
});
}
const profileImage = document.querySelector('.profile-img');
const imageContainer = document.querySelector('.image-container');

imageContainer.addEventListener('mousemove', (event) => {
const xAxis = (window.innerWidth/2- event.pageX)/10;
const yAxis = (window.innerHeight/2- event.pageY)/10;

profileImage.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

imageContainer.addEventListener('mouseleave', () => {
profileImage.style.transform = 'rotateY(0deg) rotateX(0deg)';
});
Loading

0 comments on commit 06cf01d

Please sign in to comment.