Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@AryaanMishra
AryaanMishra authored Dec 4, 2023
1 parent 9eab5af commit 35bf249
Show file tree
Hide file tree
Showing 4 changed files with 527 additions and 0 deletions.
117 changes: 117 additions & 0 deletions Personal Portfolio/about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
}

h2 {
margin-bottom: 10px;
color: #444;
}

p {
margin-bottom: 20px;
line-height: 1.6;
}

.about {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.experience ul,
.projects ul {
list-style-type: none;
padding-left: 0;
}

.experience ul li,
.projects ul li {
margin-bottom: 15px;
padding-left: 20px;
position: relative;
}

.experience ul li::before,
.projects ul li::before {
content: '\2022';
color: #4CAF50;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
position: absolute;
left: 0;
}
.back-btn {
display: block;
text-align: center;
margin-top: 30px;
}
.back-btn a {
padding: 10px 20px;
text-decoration: none;
background-color: #4CAF50;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.back-btn a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<section class="about">
<div class="personal-summary">
<h2>Personal Summary</h2>
<p>Adaptable and dedicated student pursuing a Computer Science and Engineering degree at the University of California, Merced.
Proficient in JAVA, JavaScript, Python, and C++, with a knack for problem-solving. Enthusiastic about technology, evidenced by self-initiated projects like building a computer,
creating a 3D game, and contributing to cognitive science research. Actively engaged in a Cognitive Science Lab, where I designed experiments using JavaScript and HTML,
incorporating custom plugins and utilizing tools like Jspsych, Pushkin, and Jatos. Experienced in local and online experiment deployment using Docker and AWS.
Also, an active participant in the university's Computer Science and Engineering club.
Engaged in a Car club, contributing to the ground-up construction of a vehicle. Seeking to leverage my skills, teamwork, and hands-on experience as a proactive Software Engineer.</p>
</div>

<div class="experience">
<h2>Experience</h2>
<ul>
<li><strong>Research Tech | LLNC Lab, University Of California Merced</strong><br>
September 2023 - Present
<ul>
<li>Designed and developed experiments focusing on cognitive tasks within the lab's research scope.</li>
<li>Utilized JavaScript and HTML to construct experiment frameworks, incorporating custom plugins to enhance functionality.</li>
</ul>
</li>
</ul>
</div>

<div class="projects">
<h2>Projects</h2>
<ul>
<li><strong>Real-Time Disaster and Traffic Monitoring Website</strong><br>
Led a team to conceptualize and develop a website allowing users to check real-time traffic conditions and natural disaster alerts in their area.
</li>
<li><strong>3D Game Development Project</strong><br>
Conceptualized and developed a captivating 3D game, showcasing creativity and programming prowess.
</li>
</ul>
</div>
</section>
<div class="back-btn">
<a href="portfolio.html">Back to Portfolio</a>
</div>
</body>
</html>
152 changes: 152 additions & 0 deletions Personal Portfolio/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}

.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
animation: rotateBackground 20s linear infinite;
background-image: radial-gradient(circle, #f7f7f7, #ddd);
}

.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
background-image: url('https://assets.codepen.io/143599/particles.png');
animation: animateParticles 10s linear infinite;
}

.container {
text-align: center;
animation: fadeIn 1s ease-in-out;
position: relative;
z-index: 1;
}

h1 {
color: #333;
font-size: 3rem;
margin-bottom: 20px;
animation: scaleIn 1s ease-in-out;
}

p {
color: #666;
font-size: 1.2rem;
margin-bottom: 40px;
animation: slideIn 1s ease-in-out;
}

.btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
animation: fadeInBtn 1s ease-in-out;
}

.btn:hover {
background-color: #45a049;
animation: btnHover 0.5s ease-in-out infinite alternate;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

@keyframes fadeInBtn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes btnHover {
to {
transform: scale(1.1);
}
}

@keyframes rotateBackground {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

@keyframes animateParticles {
0% {
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="background"></div>
<div class="particles"></div>
<div class="container">
<h1>Welcome to My Portfolio</h1>
<p>Explore my work and skills!</p>
<a href="portfolio.html" class="btn">View Portfolio</a>
</div>
</body>
</html>
128 changes: 128 additions & 0 deletions Personal Portfolio/portfolio.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
line-height: 1.6;
}

nav {
display: flex;
justify-content: flex-end;
padding: 20px;
background-color: #333;
}

nav a {
color: #fff;
text-decoration: none;
margin-left: 20px;
transition: color 0.3s ease;
}

nav a:hover {
color: #66cdaa;
}

header {
text-align: center;
padding: 100px 0;
color: #333;
}

header h1 {
font-size: 3.5rem;
margin-bottom: 20px;
animation: fadeInDown 1s ease-out;
}

header p {
font-size: 1.2rem;
margin-bottom: 40px;
animation: fadeInUp 1s ease-out;
}

.projects {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 50px;
padding: 0 20px;
}

.project {
width: 300px;
background-color: #fff;
padding: 20px;
margin: 20px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.project:hover {
transform: translateY(-5px);
}

@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<nav>
<a href="resume.html">Resume</a>
<a href="about.html">About</a>
<a href="#contact">Contact</a>
</nav>

<header>
<h1>Welcome to My Portfolio</h1>
<p>Explore my work and skills!</p>
</header>

<section id="projects" class="projects">
<div class="project">
<h2>Project 1</h2>
<p>Description of Project 1</p>
</div>
<div class="project">
<h2>Project 2</h2>
<p>Description of Project 2</p>
</div>
<div class="project">
<h2>Project 3</h2>
<p>Description of Project 3</p>
</div>
</section>
</body>
</html>
Loading

0 comments on commit 35bf249

Please sign in to comment.