A minimalist personal portfolio website showcasing experience in Deep Learning, Computer Vision, and Edge AI. Built with HTML, CSS, and JavaScript.
-
Create a GitHub repository named
AngadSingh22.github.io(oryourusername.github.iowith your GitHub username) -
Upload these files to your new repository
-
Enable GitHub Pages:
- Go to your repository settings
- Navigate to "Pages" section
- Under "Source", select the branch (usually
mainormaster) - Click "Save"
-
Visit your site at
https://yourusername.github.io
-
Clone the repository:
git clone https://github.com/yourusername/yourusername.github.io.git cd yourusername.github.io -
Open locally:
- Simply open
index.htmlin your web browser - Or use a local server:
# Python 3 python -m http.server 8000 # Node.js (with http-server package) npx http-server
- Simply open
-
View in browser:
- Navigate to
http://localhost:8000
- Navigate to
- Add your profile image to the root directory
- Replace the placeholder and name it
profile.jpg - Recommended size: 500x500px or similar square aspect ratio
- Or use a placeholder service temporarily:
The website is already customized with:
- ✅ Personal information (Angad Ahuja)
- ✅ Contact details and GitHub link
- ✅ Three professional experiences
- ✅ Four featured projects
- ✅ Complete skills section
- ✅ Recent updates timeline
To make further updates, edit index.html sections as needed.
Edit style.css to change:
- Primary color: Update
#0066ccand#004499(lines 110-111) - Background: Change
#fefefeon line 11 - Font: Modify font-family on line 9
- Spacing: Adjust padding and margins throughout
Add this to index.html right after the opening <body> tag:
<div id="scroll-progress" style="position: fixed; top: 0; left: 0; height: 3px; background: #0066cc; z-index: 1000;"></div>Add this button anywhere in your HTML:
<button onclick="toggleDarkMode()" style="position: fixed; bottom: 20px; right: 20px;">🌙</button>Then add dark mode styles to style.css:
.dark-mode {
background-color: #1a1a1a;
color: #e0e0e0;
}Uncomment the script tag at the bottom of index.html:
<script src="script.js"></script>yourusername.github.io/
├── index.html # Main HTML file
├── style.css # Styling and layout
├── script.js # Optional JavaScript enhancements
├── profile.jpg # Your profile picture (add this)
└── README.md # This file
- Responsive Design: Works on desktop, tablet, and mobile
- Minimalist Aesthetic: Clean and professional appearance
- Tooltip Support: Hover over certain terms for definitions
- Smooth Animations: Subtle transitions and hover effects
- Print-Friendly: Optimized for printing as a resume
- SEO Ready: Includes meta tags and semantic HTML
To add a new section (e.g., "Skills" or "Education"):
<h3>Skills</h3>
<ul class="skills-list">
<li>JavaScript, Python, Java</li>
<li>React, Node.js, Django</li>
<li>Git, Docker, AWS</li>
</ul>- Create a new HTML file (e.g.,
projects.html) - Copy the structure from
index.html - Link to it from your main page:
<a href="projects.html">View All Projects</a>
Consider integrating:
- Jekyll: GitHub Pages' native static site generator
- Hugo: Fast static site generator
- Medium: Link to your Medium profile
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
This template is free to use for personal and commercial projects. No attribution required.
Feel free to fork this project and customize it for your needs. If you create improvements or new features, consider sharing them!
For questions or suggestions about this template, feel free to reach out or open an issue on GitHub.
Built with ❤️ using HTML, CSS, and JavaScript