A developer-focused portfolio showcasing my projects, repositories, coding experiments, and explorations across web development and modern technology.
mayank-techs.github.io is my personal portfolio website and a central place to showcase my development work, projects, experiments, and GitHub repositories.
The website focuses on a clean, responsive, developer-oriented interface while keeping the project lightweight, simple, and easy to maintain.
It also dynamically fetches my public GitHub repositories and displays useful repository information directly on the website.
- ⚡ Single-page navigation without regular page reloads
- 🌙 Dark and light theme support
- 📱 Responsive design for mobile, tablet, and desktop
- 📂 Dynamic GitHub repository listing
- ⭐ Repository stars, forks, and watchers
- 💻 Repository language and topics
- 📅 Repository creation and update dates
- 🔗 Direct links to GitHub repositories
- 📩 Functional contact form powered by Web3Forms
- 🚀 Interactive space-themed 404 page
- ⌨️ Animated developer roles and text
- 🎨 Futuristic developer-focused interface
- 💾 Local theme preference
- 🔍 SEO-friendly metadata and structure
mayank-techs.github.io/
│
├── index.html
├── 404.html
│
├── assets/
│ ├── css/
│ │ ├── style.css
│ │ └── fonts.css
│ │
│ ├── js/
│ │ └── script.js
│ │
│ └── icons/
│
├── robots.txt
├── sitemap.xml
├── favicon.ico
└── README.md
Contains the main structure and content of the portfolio, including navigation, Home, About, Contact, Repository sections, theme controls, social links, and SEO metadata.
Contains the primary styling for the website, including layout, responsive design, navigation, sidebar, buttons, cards, repository grid, contact form, themes, and animations.
Contains font configuration and typography rules used throughout the website.
Contains the main JavaScript functionality, including page navigation, theme switching, local storage, sidebar controls, animated text, GitHub API integration, repository rendering, contact form submission, and interactive UI behavior.
The repository section uses the GitHub REST API to retrieve public repositories dynamically.
The website displays:
- Repository name
- Description
- Programming language
- Topics
- Stars
- Forks
- Watchers
- Created date
- Updated date
- Repository URL
Forked repositories are excluded from the main repository showcase.
The contact page uses Web3Forms to process form submissions.
The form collects:
- Name
- Message
The information is submitted through the Web3Forms API without requiring a custom backend.
| Technology | Usage |
|---|---|
| HTML | 20% |
| CSS | 60% |
| Vanilla JavaScript | 20% |
- HTML5
- CSS3
- Vanilla JavaScript
- GitHub REST API
- Web3Forms
- GitHub Pages
The website follows a developer-focused visual style with:
- Dark futuristic interface
- Purple accent colors
- Clean typography
- Responsive layouts
- Subtle animations
- Interactive cards
- Developer-oriented visual elements
The goal is to keep the interface modern without making it unnecessarily complicated.
The website is designed to work across:
- 📱 Mobile devices
- 📲 Tablets
- 💻 Laptops
- 🖥️ Desktop displays
The layout adapts to different screen sizes while keeping the main content accessible.
The website includes a custom interactive 404.html page instead of relying on the default GitHub Pages error page.
The page features:
- 🌌 Space-inspired background
- ⭐ Animated and twinkling stars
- ☄️ Shooting stars
- ✨ Subtle glowing effects
- 🔢 Large
404typography - 😂 Random funny messages
- 🏠 Button to return to the homepage
The website includes:
- Descriptive page title
- Meta description
- Canonical URL
- Open Graph metadata
- Twitter metadata
- Robots configuration
- Sitemap
- Structured data
- Responsive viewport configuration
The website is intentionally built without a large frontend framework.
Using plain HTML, CSS, and JavaScript keeps the core application lightweight and reduces unnecessary client-side overhead.
The website is hosted using GitHub Pages.
Repository:
mayank-techs/mayank-techs.github.io
Live Website:
The project is continuously evolving.
- ✨ More advanced visual styling
- ⚙️ Additional interactive features
- 🗄️ Backend integration
- 🛢️ Database integration
- 📊 More detailed project information
- 🔐 Improved security and validation
- ⚡ Further performance optimization
- 🌐 Additional deployment options
Clone the repository:
git clone git@github.com:mayank-techs/mayank-techs.github.io.gitEnter the project directory:
cd mayank-techs.github.ioThe project uses standard HTML, CSS, and JavaScript and does not require a frontend framework or package installation for the basic website.
This is primarily my personal portfolio project, but suggestions, bug reports, and improvements are welcome.
If you find an issue, feel free to open an Issue or submit a Pull Request.
This project is intended for my personal portfolio and website.
Please check the repository license before reusing or redistributing the code.