Skip to content

feat(portfolio): implement modern responsive homepage with CSS and semantic structure #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cto-new wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(portfolio): implement modern responsive homepage with CSS and semantic structure #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Build outputs
dist/
build/

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# IDE files
.vscode/
.idea/
*.swp
*.swo
*~

# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Logs
logs
*.log

# Cache
.cache/
.parcel-cache/

# Temporary files
*.tmp
*.temp

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache
199 changes: 124 additions & 75 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,85 +4,134 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ayush Ojha</title>
<title>Ayush Ojha - Portfolio</title>
<link rel="stylesheet" type="text/css" href="prop.css">
<div class="topbar">

<h2 style="color: #99ccff;display: inline;">AYUSH</h2>
<h2 style="color: white;display: inline;">OJHA</h2>

<a href="network.html">Network</a>
<a href="work.html">My Work</a>
<a class="on" href="index.html">Home</a>
</div>
</head>
<body>
<marquee> Hello !!! Thank you for visiting our site.</marquee>
<h1>Website Under Construction</h1>
<center><p class="head"> WELCOME TO MY WEBSITE </p>
<p class="animation"></p>
<img class="big" src="img/peter.png" height="300px" width="300px">
<p style="color: white;font-size: 30px;">My Name is Ayush Ojha.</p>
<p class="info1">
I am 20 years old and currently doing my BCS at Sunway International Business School.
I like trying out new things and I am a fast learner as well.
I love Simulation, visualization, web app, vector art, video editing and game designing
and playing various genre of games.
As for my goal, I want to be a researcher and help people with ground breaking
discoveries in the field of Computer Science.
I prefer to work alone as I don't want anyone to slow me down.
</p>
<p>
<h2 style="color: white;">My Skills</h2>

</p>


<!--Video editing , Vector Art, Html , Css , java script , C , C#-->
<div class="container">
<div class="bar front advanced" data-skill="Photo editing"></div>
<div class="bar back intermediate" data-skill="Java"></div>
<div class="bar front advanced" data-skill="HTML"></div>
<div class="bar bar back intermediate" data-skill="CSS3"></div>
<div class="bar bar back intermediate" data-skill="Javascript"></div>
<div class="bar front advanced" data-skill="C"></div>
<div class="bar back basic" data-skill="C#"></div>
<!-- Navigation Bar -->
<nav class="topbar">
<div>
<h2 style="color: #99ccff; display: inline;">AYUSH</h2>
<h2 style="color: white; display: inline;">OJHA</h2>
</div>
<div>
<a href="network.html">Network</a>
<a href="work.html">My Work</a>
<a class="on" href="index.html">Home</a>
</div>
</nav>

<!-- Main Content -->
<main>
<!-- Welcome Banner -->
<section class="welcome-banner">
<p style="font-size: 1.2rem;">👋 Hello! Thank you for visiting my portfolio.</p>
</section>

<!-- Welcome Section -->
<header>
<h1 class="head">WELCOME TO MY WEBSITE</h1>
</header>

<!-- Profile Section -->
<section class="profile-section">
<div class="profile-image fallback" id="profileImage">
👨‍💻
</div>
<br>


<h2 style="color: white;">What am I Currently Doing?</h2>
<p class="info1">
These days I am trying to learn as much as possible
and I am trying out weird things like
learning various programming languages, Data Science,
Machine Learning, Artificial Intelligence
learning to programme and doing weird
questionable project.Check out my work.<br>
<a href="work.html"> <button class="button" type="button">My Work</button></a>
<div class="profile-info">
<h1>My Name is Ayush Ojha.</h1>
<p>
I am 20 years old and currently doing my BCS at Sunway International Business School.
I like trying out new things and I am a fast learner as well.
</p>
<p>
I love simulation, visualization, web apps, vector art, video editing and game designing
and playing various genres of games.
</p>
<p>
As for my goal, I want to be a researcher and help people with groundbreaking
discoveries in the field of Computer Science.
I prefer to work alone as I don't want anyone to slow me down.
</p>
</div>
</section>

<!-- Skills Section -->
<section class="skills-section">
<h2>My Skills</h2>
<div class="container">
<div class="skill-item">
<div class="bar front advanced" data-skill="Photo Editing"></div>
</div>
<div class="skill-item">
<div class="bar back intermediate" data-skill="Java"></div>
</div>
<div class="skill-item">
<div class="bar front advanced" data-skill="HTML"></div>
</div>
<div class="skill-item">
<div class="bar back intermediate" data-skill="CSS3"></div>
</div>
<div class="skill-item">
<div class="bar back intermediate" data-skill="JavaScript"></div>
</div>
<div class="skill-item">
<div class="bar front advanced" data-skill="C Programming"></div>
</div>
<div class="skill-item">
<div class="bar back basic" data-skill="C#"></div>
</div>
</div>
</section>

<!-- Current Work Section -->
<section class="cta-section">
<h2>What am I Currently Doing?</h2>
<p>
These days I am trying to learn as much as possible
and I am trying out weird things like
learning various programming languages, Data Science,
Machine Learning, Artificial Intelligence
learning to programme and doing weird
questionable projects.
</p>




</center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
<footer id="bottom">
&copy; CopyRight 2019 Ayush Ojha
</footer>
<p>
Check out my work below and see what I've been up to!
</p>
<a href="work.html">
<button class="button" type="button">My Work</button>
</a>
</section>
</main>

<!-- Footer -->
<footer id="bottom">
<p>© Copyright 2019 Ayush Ojha. All rights reserved.</p>
</footer>

<script>
// Simple script to handle missing profile image
document.addEventListener('DOMContentLoaded', function() {
const profileImage = document.getElementById('profileImage');

// If the image fails to load, keep the fallback emoji
profileImage.addEventListener('error', function() {
this.innerHTML = '👨‍💻';
this.classList.add('fallback');
});

// Try to load the actual image if it exists
const img = new Image();
img.onload = function() {
profileImage.innerHTML = '<img src="img/peter.png" alt="Ayush Ojha" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">';
};
img.onerror = function() {
// Keep fallback if image doesn't exist
profileImage.innerHTML = '👨‍💻';
profileImage.classList.add('fallback');
};
img.src = 'img/peter.png';
});
</script>
</body>
</html>
Loading