├── backend ├── .gitignore ├── package.json ├── functions │ ├── github-activity.js │ └── send-mail.js └── package-lock.json ├── .gitignore ├── 0c2188f5162c4ec2b49b03982851a76e.txt ├── google37a82ba6b963c097.html ├── googlecc86ebf5a5e41e72.html ├── assets ├── og.png ├── avatar.jpg ├── frame.png ├── avatar.webp ├── favicon.ico ├── pixel-art.jpg ├── project-preview │ ├── doodle.webp │ ├── geu-preview.webp │ ├── chess-preview.webp │ ├── chess-preview1.webp │ ├── numpie-preview.webp │ ├── snake-preview.webp │ ├── notehub-preview.webp │ ├── sorting-preview.webp │ ├── whisper-preview.webp │ ├── pathfinder-preview.webp │ ├── portfolio-preview.webp │ └── typingGuru-preview.webp ├── icons │ ├── tick-inside-circle.png │ ├── html.svg │ ├── tailwind.svg │ ├── exclamation-svgrepo-com.svg │ ├── paper-plane.svg │ ├── shadcn.svg │ ├── figma.svg │ ├── external-link.svg │ ├── link.svg │ ├── socket-io.svg │ ├── firebase.svg │ ├── css.svg │ ├── git.svg │ ├── express.svg │ ├── cpp.svg │ ├── javascript.svg │ ├── mongo-db.svg │ ├── node-js.svg │ ├── next-js.svg │ ├── typescript.svg │ ├── react.svg │ └── postman.svg └── social icons │ ├── Abhijeet_Resume.pdf │ ├── insta.svg │ ├── leetcode.svg │ ├── linkedin.svg │ ├── youtube.svg │ ├── gfg.svg │ └── github.svg ├── robots.txt ├── BingSiteAuth.xml ├── netlify.toml ├── sitemap.xml ├── package.json ├── dist ├── js │ ├── effects.min.js │ ├── controlls.min.js │ ├── form.min.js │ ├── chart.min.js │ └── github.min.js └── css │ ├── calendar.min.css │ ├── utils.min.css │ └── style.min.css ├── js ├── effects.js ├── controlls.js ├── form.js ├── github.js └── chart.js ├── css ├── calendar.css ├── utils.css └── style.css ├── README.md └── index.html /backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Local Netlify folder 2 | .netlify 3 | .env -------------------------------------------------------------------------------- /0c2188f5162c4ec2b49b03982851a76e.txt: -------------------------------------------------------------------------------- 1 | 0c2188f5162c4ec2b49b03982851a76e -------------------------------------------------------------------------------- /google37a82ba6b963c097.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google37a82ba6b963c097.html -------------------------------------------------------------------------------- /googlecc86ebf5a5e41e72.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googlecc86ebf5a5e41e72.html -------------------------------------------------------------------------------- /assets/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/og.png -------------------------------------------------------------------------------- /assets/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/avatar.jpg -------------------------------------------------------------------------------- /assets/frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/frame.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | 4 | Sitemap: https://mrcodium.netlify.app/sitemap.xml 5 | 6 | -------------------------------------------------------------------------------- /BingSiteAuth.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | DCF4DE3C631E387108F7150F083B1A9D 4 | -------------------------------------------------------------------------------- /assets/avatar.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/avatar.webp -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /assets/pixel-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/pixel-art.jpg -------------------------------------------------------------------------------- /assets/project-preview/doodle.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/doodle.webp -------------------------------------------------------------------------------- /assets/icons/tick-inside-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/icons/tick-inside-circle.png -------------------------------------------------------------------------------- /assets/project-preview/geu-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/geu-preview.webp -------------------------------------------------------------------------------- /assets/social icons/Abhijeet_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/social icons/Abhijeet_Resume.pdf -------------------------------------------------------------------------------- /assets/project-preview/chess-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/chess-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/chess-preview1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/chess-preview1.webp -------------------------------------------------------------------------------- /assets/project-preview/numpie-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/numpie-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/snake-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/snake-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/notehub-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/notehub-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/sorting-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/sorting-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/whisper-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/whisper-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/pathfinder-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/pathfinder-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/portfolio-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/portfolio-preview.webp -------------------------------------------------------------------------------- /assets/project-preview/typingGuru-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abhijeetSinghRajput/Personal-Portfolio/HEAD/assets/project-preview/typingGuru-preview.webp -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | functions = "backend/functions" 3 | command = "npm install --prefix backend" 4 | 5 | [[redirects]] 6 | from = "/.netlify/functions/*" 7 | to = "/.netlify/functions/:splat" 8 | status = 200 -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://mrcodium.netlify.app/ 5 | 2025-09-15 6 | 7 | 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "personal-portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "echo 'No build step'" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } -------------------------------------------------------------------------------- /backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "type": "commonjs", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "dotenv": "^16.4.7", 15 | "node-fetch": "^3.3.2", 16 | "nodemailer": "^6.9.16" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/icons/html.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/icons/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | file_type_tailwind -------------------------------------------------------------------------------- /assets/icons/exclamation-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/paper-plane.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist/js/effects.min.js: -------------------------------------------------------------------------------- 1 | function animate(t){t=t.toLowerCase(),animation=[],write.classList.add("writing"),vowel.test(t[0]);let e="",o=0;for(const i of t){for(let t="a".charCodeAt(0);t<=i.charCodeAt(0);++t)animation.push(e+String.fromCharCode(t));e+=i}for(const t of animation)setTimeout(()=>{write.textContent=t},SPEED*o++);setTimeout(()=>{write.classList.remove("writing")},SPEED*o),setTimeout(()=>{animate(list[i]),i=(i+1)%list.length},SPEED*o+INTERVAL)}const write=document.querySelector(".write");let text=write.innerText,animation=[];list=["developer","student","fresher"];let i=0;const SPEED=8,INTERVAL=2500,vowel=/^[aeiou]$/;animate(list[i++]); -------------------------------------------------------------------------------- /assets/social icons/insta.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/icons/shadcn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/icons/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/icons/external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/social icons/leetcode.svg: -------------------------------------------------------------------------------- 1 | 3 | 5 | LeetCode icon 6 | 8 | -------------------------------------------------------------------------------- /assets/social icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | linkedin 6 | 8 | -------------------------------------------------------------------------------- /assets/icons/socket-io.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /backend/functions/github-activity.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config(); 2 | const fetch = (...args) => import("node-fetch").then(({ default: fetch }) => fetch(...args)); 3 | 4 | exports.handler = async function (event, context) { 5 | const token = process.env.GITHUB_TOKEN; 6 | const username = "abhijeetSinghRajput"; 7 | const query = ` 8 | query($username: String!) { 9 | user(login: $username) { 10 | contributionsCollection { 11 | contributionCalendar { 12 | weeks { 13 | contributionDays { 14 | date, 15 | contributionCount 16 | } 17 | } 18 | } 19 | } 20 | } 21 | } 22 | `; 23 | 24 | const response = await fetch("https://api.github.com/graphql", { 25 | method: "POST", 26 | headers: { 27 | "Content-Type": "application/json", 28 | Authorization: `Bearer ${token}`, 29 | }, 30 | body: JSON.stringify({ query, variables: { username } }), 31 | }); 32 | 33 | const data = await response.json(); 34 | 35 | return { 36 | statusCode: 200, 37 | body: JSON.stringify(data), 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /assets/icons/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | file_type_firebase -------------------------------------------------------------------------------- /js/effects.js: -------------------------------------------------------------------------------- 1 | const write = document.querySelector('.write'); 2 | let text = write.innerText; 3 | let animation = []; 4 | 5 | list = [ 6 | 'developer', 7 | 'student', 8 | 'fresher', 9 | ]; 10 | 11 | let i = 0; 12 | const SPEED = 8; 13 | const INTERVAL = 2500; 14 | const vowel = /^[aeiou]$/; 15 | 16 | animate(list[i++]); 17 | function animate(text) { 18 | text = text.toLowerCase(); 19 | animation = []; 20 | write.classList.add('writing'); 21 | 22 | if(vowel.test(text[0])){ 23 | } 24 | 25 | let str = ""; 26 | let count = 0; 27 | for (const char of text) { 28 | for (let i = 'a'.charCodeAt(0); i <= char.charCodeAt(0); ++i) { 29 | animation.push(str + String.fromCharCode(i)); 30 | } 31 | str += char; 32 | } 33 | 34 | for (const str of animation) { 35 | setTimeout(() => { 36 | write.textContent = str; 37 | }, SPEED * count++); 38 | } 39 | 40 | //cursor will blink once the writing stop 41 | setTimeout(() => { 42 | write.classList.remove('writing'); 43 | }, SPEED * count); 44 | 45 | setTimeout(() => { 46 | animate(list[i]); 47 | i = (i + 1) % list.length; 48 | }, SPEED * count + INTERVAL); 49 | 50 | } -------------------------------------------------------------------------------- /assets/icons/css.svg: -------------------------------------------------------------------------------- 1 | 2 | file_type_css -------------------------------------------------------------------------------- /assets/icons/git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /dist/css/calendar.min.css: -------------------------------------------------------------------------------- 1 | #github.container{color:#e6edf3;background-color:transparent}:root{--lv-clr-0:#1e1e1f;--lv-clr-1:hsl(150, 66%, 16%);--lv-clr-2:hsl(148, 100%, 21%);--lv-clr-3:hsl(133, 63%, 40%);--lv-clr-4:hsl(130, 64%, 53%)}#github .grid{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto 1fr;grid-gap:4px;overflow-x:scroll;font-size:12px;line-height:12px;text-transform:capitalize;padding-bottom:4px;margin-top:16px;margin-bottom:6px}#github .grid::-webkit-scrollbar{background-color:#222;height:6px}#github .grid::-webkit-scrollbar-thumb{background-color:#434345}#github .grid .month{grid-column:2/3;display:grid}#github .month.skeleton{display:flex;justify-content:space-between}.month.skeleton li{height:12px;width:28px;border-radius:2px;background-color:#1e1e1f}#github .grid .week li{margin-top:13px}#github .levels{font-size:12px;color:#9ba1a8;display:flex;align-items:center;gap:3px;justify-content:right}#github .levels span{aspect-ratio:1;display:inline-block;width:10px}.calendar{display:grid;grid-gap:3px;grid-template-columns:repeat(53,minmax(10px,1fr));grid-template-rows:repeat(7,minmax(10px,1fr))}.day{border-radius:2px;aspect-ratio:1;background-color:var(--lv-clr-0)}.level-0{background-color:var(--lv-clr-0)}.level-1{background-color:var(--lv-clr-1)}.level-2{background-color:var(--lv-clr-2)}.level-3{background-color:var(--lv-clr-3)}.level-4{background-color:var(--lv-clr-4)} -------------------------------------------------------------------------------- /backend/functions/send-mail.js: -------------------------------------------------------------------------------- 1 | const nodemailer = require('nodemailer'); 2 | require('dotenv').config({path: './backend/.env'}); 3 | 4 | exports.handler = async (event, context) => { 5 | if (event.httpMethod !== 'POST') { 6 | return { 7 | statusCode: 405, 8 | body: JSON.stringify({ message: 'Method Not Allowed' }), 9 | }; 10 | } 11 | 12 | const { name, email, message } = JSON.parse(event.body); 13 | 14 | 15 | const transporter = nodemailer.createTransport({ 16 | service: 'gmail', 17 | secure: true, 18 | auth: { 19 | user: process.env.EMAIL_USER, 20 | pass: process.env.EMAIL_PASS, 21 | }, 22 | }); 23 | 24 | const mailOptions = { 25 | from: email, 26 | to: process.env.EMAIL_TO, 27 | subject: `New message from ${name}`, 28 | text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`, 29 | }; 30 | 31 | try { 32 | await transporter.sendMail(mailOptions); 33 | return { 34 | statusCode: 200, 35 | body: JSON.stringify({ message: 'Email sent successfully' }), 36 | }; 37 | } catch (error) { 38 | // console.error('Error:', error); 39 | return { 40 | statusCode: 500, 41 | body: JSON.stringify({ message: 'Failed to send email' }), 42 | }; 43 | } 44 | }; -------------------------------------------------------------------------------- /dist/js/controlls.min.js: -------------------------------------------------------------------------------- 1 | function optionSlector(e){e.forEach(t=>{t.addEventListener("click",()=>{e.forEach(e=>e.classList.remove("active")),t.classList.add("active")})})}const toggleAllProjectsBtn=document.getElementById("toggle-all-projects"),projectCards=document.querySelectorAll("#projects .card");optionSlector(document.querySelectorAll("#skills #web .btn")),optionSlector(document.querySelectorAll("#skills #dsa .btn"));const navLinks=document.querySelectorAll(".nav-item a"),sections=document.querySelectorAll(".body > section"),[heroSection,aboutSection,educationSection,projectsSection,skillsSection]=sections,nav=document.querySelector("nav");let expanded=!1;projectCards.forEach((e,t)=>{t>=6&&(e.style.display="none")}),toggleAllProjectsBtn.addEventListener("click",()=>{projectCards.forEach((e,t)=>{t>=6&&(e.style.display=expanded?"none":"block")}),expanded=!expanded,toggleAllProjectsBtn.textContent=expanded?"Collapse Projects":"Show All Projects"}),navLinks.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();const o=e.getAttribute("href").substring(1),c=document.getElementById(o),n=c.offsetTop-nav.clientHeight;window.scrollTo({top:n})})}),window.addEventListener("scroll",()=>{let e="";sections.forEach(t=>{const o=t.offsetTop-nav.clientHeight,c=o+t.clientHeight;window.scrollY>=o&&window.scrollY{t.classList.remove("active"),t.getAttribute("href")===`#${e}`&&t.classList.add("active")})}); -------------------------------------------------------------------------------- /assets/icons/express.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icons/cpp.svg: -------------------------------------------------------------------------------- 1 | 2 | file_type_cpp3 -------------------------------------------------------------------------------- /assets/social icons/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | youtube [#168] 7 | Created with Sketch. 8 | 9 | 10 | 11 | 12 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /assets/icons/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/js/form.min.js: -------------------------------------------------------------------------------- 1 | function validateForm(){let e=!0;return nameRegex.test(fullNameInput.value)?(fullNameInput.classList.add("valid"),fullNameInput.classList.remove("invalid")):(fullNameInput.classList.add("invalid"),fullNameInput.classList.remove("valid"),e=!1),emailRegex.test(emailInput.value)?(emailInput.classList.add("valid"),emailInput.classList.remove("invalid")):(emailInput.classList.add("invalid"),emailInput.classList.remove("valid"),e=!1),messageRegex.test(messageInput.value)?(messageInput.classList.add("valid"),messageInput.classList.remove("invalid")):(messageInput.classList.add("invalid"),messageInput.classList.remove("valid"),e=!1),messageBtn.disabled=!e,e}function alert(e,a="success"){alertBox.textContent=e,alertBox.className=`${a} alert show`,setTimeout(()=>{alertBox.classList.remove("show")},4e3)}const form=document.querySelector("#contact-form"),fullNameInput=document.getElementById("fullname"),emailInput=document.getElementById("email"),messageInput=document.getElementById("message"),messageBtn=document.getElementById("message-btn"),loader=document.querySelector(".loader"),alertBox=document.querySelector(".alert"),nameRegex=/^[a-zA-Z\s'-\.]+$/,emailRegex=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,messageRegex=/\S+/;validateForm(),fullNameInput.onfocus=validateForm,emailInput.oninput=validateForm,fullNameInput.oninput=validateForm,messageInput.oninput=validateForm,messageBtn.onclick=(async()=>{const e={name:fullNameInput.value,email:emailInput.value,message:messageInput.value};loader.classList.add("show"),fullNameInput.value="",emailInput.value="",messageInput.value="",messageBtn.disabled=!0;try{const a=await fetch("/.netlify/functions/send-mail",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});a.ok?alert("Email sent successfully"):alert("Failed to send email","danger")}catch(e){alert("Failed to send email","danger")}finally{loader.classList.remove("show")}}); -------------------------------------------------------------------------------- /assets/social icons/gfg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/icons/mongo-db.svg: -------------------------------------------------------------------------------- 1 | 2 | file_type_mongo -------------------------------------------------------------------------------- /assets/social icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | github [#142] 7 | Created with Sketch. 8 | 9 | 10 | 11 | 12 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dist/js/chart.min.js: -------------------------------------------------------------------------------- 1 | function updateChart(e){let t,a;t=Object.keys(dsaSkills[e]),a=Object.values(dsaSkills[e]),updateDataset(dsa_chart,dsa_skillElement,t,a,e)}function renderBars(e,t){const a=Object.entries(t).map(([e,t])=>`\n
  • \n ${e}\n ${t}%\n
    \n
    \n
    \n
    • \n `);return e.innerHTML=a.join(""),{labels:e.querySelectorAll("strong"),data:e.querySelectorAll("data"),bar:e.querySelectorAll(".bar")}}function renderChart(e,t,a){return new Chart(e,{type:"radar",data:{labels:Object.keys(t),datasets:[{label:"Efficiency index",data:Object.values(t),backgroundColor:gradient,pointRadius:0,pointHoverRadius:0}]},options:{responsive:!0,scales:{r:{min:0,max:100,angleLines:{color:"#666"},grid:{color:"#666"},pointLabels:{color:"#fff",font:{size:12}},ticks:{display:!1,stepSize:100/3}}},plugins:{legend:{display:!1},title:{display:!0,text:a,color:"#ff6b6b",font:{size:16}},tooltip:{enabled:!1}}}})}function updateDataset(e,t,a,l,n){e.data.labels=a,e.data.datasets[0].data=l,e.data.datasets[0].backgroundColor=gradient,e.options.plugins.title.text=n,e.update();for(let e=0;e=e.length){clearExtraSkeletonDays(a);break}const[r,o]=e[a++],[l,i,c]=r.split("-").map(Number);let d=0;s+=o,o>=7?d=4:o>=4?d=3:o>=2?d=2:o>0&&(d=1),days[n][t].title=`${o} contributions on ${months_str[i-1]} ${c+sufixs[c%10]}`,days[n][t].className=`day level-${d}`}document.getElementById("contribution-count").textContent=s}function rendarMonths(t,e){let n=new Date(e).getMonth();monthWrapper.innerHTML="",monthWrapper.classList.remove("skeleton");for(let e=0;e section"); 8 | const [ 9 | heroSection, 10 | aboutSection, 11 | educationSection, 12 | projectsSection, 13 | skillsSection, 14 | ] = sections; 15 | const nav = document.querySelector("nav"); 16 | let expanded = false; 17 | 18 | projectCards.forEach((card, index) => { 19 | if (index >= 6) { 20 | card.style.display = "none"; 21 | } 22 | }); 23 | 24 | toggleAllProjectsBtn.addEventListener("click", () => { 25 | projectCards.forEach((card, index) => { 26 | if (index >= 6) { 27 | card.style.display = expanded ? "none" : "block"; 28 | } 29 | }); 30 | 31 | expanded = !expanded; 32 | toggleAllProjectsBtn.textContent = expanded 33 | ? "Collapse Projects" 34 | : "Show All Projects"; 35 | }); 36 | 37 | navLinks.forEach((link) => { 38 | link.addEventListener("click", (e) => { 39 | e.preventDefault(); 40 | const targetId = link.getAttribute("href").substring(1); 41 | const targetSection = document.getElementById(targetId); 42 | const offsetTop = targetSection.offsetTop - nav.clientHeight; 43 | 44 | window.scrollTo({ top: offsetTop }); 45 | }); 46 | }); 47 | 48 | // active link on scroll 49 | window.addEventListener("scroll", () => { 50 | let currentSectionId = ""; 51 | 52 | sections.forEach((section) => { 53 | const sectionTop = section.offsetTop - nav.clientHeight; 54 | const sectionBottom = sectionTop + section.clientHeight; 55 | 56 | if (window.scrollY >= sectionTop && window.scrollY < sectionBottom) { 57 | currentSectionId = section.getAttribute("id"); 58 | } 59 | }); 60 | 61 | navLinks.forEach((link) => { 62 | link.classList.remove("active"); 63 | if (link.getAttribute("href") === `#${currentSectionId}`) { 64 | link.classList.add("active"); 65 | } 66 | }); 67 | }); 68 | 69 | function optionSlector(options) { 70 | options.forEach((option) => { 71 | option.addEventListener("click", () => { 72 | options.forEach((e) => e.classList.remove("active")); 73 | option.classList.add("active"); 74 | }); 75 | }); 76 | } 77 | -------------------------------------------------------------------------------- /assets/icons/node-js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /assets/icons/next-js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/icons/typescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/css/utils.min.css: -------------------------------------------------------------------------------- 1 | p{color:var(--para-clr);line-height:1.4rem}p a{color:#a3a3a3;text-decoration:underline;text-underline-offset:2px}.text-muted-foreground{color:#a3a3a3}p a:hover{filter:brightness(.8)}li span,p span,p span a{color:#ffeea6;font-weight:600}strong{font-weight:600}.btn-wrapper{display:flex;gap:10px;margin-top:20px}.btn img{width:16px;height:16px}.btn{user-select:none;cursor:pointer;background-color:#383838;padding:8px 12px;height:36px;border-radius:8px;color:#fafafa;text-align:center;text-transform:capitalize;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px;transition:.3s ease}.btn.primary{background-color:#fff;color:#000}.btn.active,.btn:hover{filter:brightness(.9)}.icon{aspect-ratio:1;width:24px;overflow:hidden}.icon:hover{filter:brightness(200)}.icon img{width:100%;height:100%;object-fit:contain}.gold{font-weight:500;color:#ffdb70;user-select:none;white-space:nowrap;padding:10px;background:linear-gradient(to bottom right,#3f3f3f 0,hsla(0,0%,25%,0) 50%);font-size:13px;border-radius:15px;box-shadow:var(--shadow-2);z-index:1;transition:.25s ease;position:relative}.gold::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(to bottom right,hsla(240,1%,18%,.251) 0,hsla(240,2%,11%,0) 100%),#202021;transition:.25s ease;z-index:-1}.gold:focus,.gold:hover{background:linear-gradient(to bottom right,#ffda6b 0,hsla(36,100%,69%,0) 50%)}.gold:focus::before,.gold:hover::before{background:linear-gradient(135deg,hsla(45,100%,71%,.251) 0,hsla(35,100%,68%,0) 59.86%),#202021}sub,sup{font-weight:400;font-size:12px;padding:2px}.write{font-size:24px;color:#ffdb70;font-weight:600;text-transform:capitalize;text-align:center;font-family:Orbitron,sans-serif;position:relative;width:max-content}.write::before{content:'';position:absolute;height:100%;width:3px;top:0;right:-6px;background-color:#ffda6f;animation:blink 1s infinite linear}.write.writing::before{animation:none}@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}.alert.show{display:flex}.alert{display:none;align-items:center;padding:10px 20px;color:#cce8cd;gap:10px;font-size:16px;background-color:#2e7d32;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.1);transform-origin:50% 0 0;animation:bounceIn .5s ease-out;position:fixed;top:20px;right:10px;transition:.3s ease-in-out;z-index:100}.alert::before{content:'';background-size:contain;background-repeat:no-repeat;width:18px;height:18px;overflow:hidden}@keyframes bounceIn{0%{opacity:0;transform:translateY(-100%) scale(.5)}60%{opacity:1;transform:translateY(10%) scale(1.05)}80%{transform:translateY(-5%) scale(.95)}100%{transform:translateY(0) scale(1)}}.alert.danger{background-color:#160b0b}.alert.danger::before{background-image:url(../assets/icons/exclamation-svgrepo-com.svg)}.alert.success{background-color:#0c130d}.alert.success::before{background-image:url(../assets/icons/tick-inside-circle.png)}.loader{display:flex;gap:5px}.dot{width:10px;aspect-ratio:1/1;background-color:#fafafa;border-radius:50%;animation:pulse 1.2s infinite linear;animation-delay:calc(var(--i) * .25s);box-shadow:0 4px 5px rgba(0,0,0,.5)}.loader{display:none;position:fixed;z-index:100;bottom:20px;right:50%;transform:translateX(50%)}.loader.show{display:flex}@keyframes pulse{0%,100%{transform:scale(0);opacity:.5}50%{transform:scale(1.2);opacity:1}} -------------------------------------------------------------------------------- /js/form.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector("#contact-form"); 2 | const fullNameInput = document.getElementById("fullname"); 3 | const emailInput = document.getElementById("email"); 4 | const messageInput = document.getElementById("message"); 5 | const messageBtn = document.getElementById("message-btn"); 6 | 7 | const loader = document.querySelector('.loader'); 8 | const alertBox = document.querySelector('.alert'); 9 | 10 | const nameRegex = /^[a-zA-Z\s'-\.]+$/; 11 | const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; 12 | const messageRegex = /\S+/; 13 | 14 | 15 | function validateForm() { 16 | let isValid = true; 17 | 18 | // Name validation 19 | if (nameRegex.test(fullNameInput.value)) { 20 | fullNameInput.classList.add('valid'); 21 | fullNameInput.classList.remove('invalid'); 22 | } else { 23 | fullNameInput.classList.add('invalid'); 24 | fullNameInput.classList.remove('valid'); 25 | isValid = false; 26 | } 27 | 28 | // Email validation 29 | if (emailRegex.test(emailInput.value)) { 30 | emailInput.classList.add('valid'); 31 | emailInput.classList.remove('invalid'); 32 | } else { 33 | emailInput.classList.add('invalid'); 34 | emailInput.classList.remove('valid'); 35 | isValid = false; 36 | } 37 | 38 | // Message validation 39 | if (messageRegex.test(messageInput.value)) { 40 | messageInput.classList.add('valid'); 41 | messageInput.classList.remove('invalid'); 42 | } else { 43 | messageInput.classList.add('invalid'); 44 | messageInput.classList.remove('valid'); 45 | isValid = false; 46 | } 47 | 48 | messageBtn.disabled = !isValid; 49 | return isValid; 50 | } 51 | 52 | validateForm(); 53 | fullNameInput.onfocus = validateForm; 54 | emailInput.oninput = validateForm; 55 | fullNameInput.oninput = validateForm; 56 | messageInput.oninput = validateForm; 57 | 58 | messageBtn.onclick = async () => { 59 | const data = { 60 | name: fullNameInput.value, 61 | email: emailInput.value, 62 | message: messageInput.value, 63 | }; 64 | loader.classList.add('show'); 65 | 66 | 67 | fullNameInput.value = ""; 68 | emailInput.value = ""; 69 | messageInput.value = ""; 70 | messageBtn.disabled = true; 71 | 72 | try { 73 | const response = await fetch('/.netlify/functions/send-mail', { 74 | method: 'POST', 75 | headers: { 76 | 'Content-Type': 'application/json', 77 | }, 78 | body: JSON.stringify(data), 79 | }); 80 | 81 | if (response.ok) { 82 | alert("Email sent successfully"); 83 | } else { 84 | alert("Failed to send email", "danger"); 85 | } 86 | } catch (error) { 87 | // console.error('Error: ', error); 88 | alert("Failed to send email", "danger"); 89 | } finally { 90 | loader.classList.remove('show'); 91 | } 92 | }; 93 | 94 | function alert(message, type = "success") { 95 | alertBox.textContent = message; 96 | alertBox.className = `${type} alert show`; 97 | 98 | setTimeout(() => { 99 | alertBox.classList.remove('show'); 100 | }, 4000); 101 | } -------------------------------------------------------------------------------- /js/github.js: -------------------------------------------------------------------------------- 1 | const months_str = [ 2 | "January", 3 | "February", 4 | "March", 5 | "April", 6 | "May", 7 | "June", 8 | "July", 9 | "August", 10 | "September", 11 | "October", 12 | "November", 13 | "December", 14 | ]; 15 | const sufixs = [ 16 | "th", // 0th 17 | "st", // 1st 18 | "nd", // 2nd 19 | "rd", // 3rd 20 | "th", // 4th, 21 | "th", // 5th, 22 | "th", // 6th, 23 | "th", // 7th, 24 | "th", // 8th, 25 | "th", // 9th, 26 | ]; 27 | 28 | let result; 29 | 30 | async function loadGitHubActivity() { 31 | try { 32 | const response = await fetch("/.netlify/functions/github-activity"); 33 | if (!response.ok) { 34 | const errorText = await response.text(); 35 | throw new Error(errorText || "Network response was not ok"); 36 | } 37 | 38 | result = await response.json(); 39 | const weeks = 40 | result.data.user.contributionsCollection.contributionCalendar.weeks; 41 | rendarCalendar(weeks); 42 | } catch (err) { 43 | // console.error("Fetch error:", err); 44 | } 45 | } 46 | 47 | loadGitHubActivity(); 48 | 49 | const calendar = document.querySelector("#github .calendar"); 50 | const monthWrapper = document.querySelector("#github .grid .month"); 51 | const grid = document.querySelector("#github .grid"); 52 | grid.scrollLeft = grid.scrollWidth; 53 | const days = new Array(7); 54 | 55 | const SKELETON_ROWS = 7; 56 | const SKELETON_COLS = 53; 57 | rendarSkeleton(); 58 | 59 | function rendarSkeleton() { 60 | for (let i = 0; i < 12; ++i) { 61 | const li = document.createElement("li"); 62 | monthWrapper.append(li); 63 | } 64 | monthWrapper.classList.add("skeleton"); 65 | 66 | for (let row = 0; row < SKELETON_ROWS; ++row) { 67 | days[row] = new Array(SKELETON_COLS); 68 | for (let col = 0; col < SKELETON_COLS; ++col) { 69 | const day = document.createElement("div"); 70 | day.className = "day"; 71 | calendar.appendChild(day); 72 | days[row][col] = day; 73 | } 74 | } 75 | } 76 | 77 | function rendarCalendar(weeks) { 78 | const contributions = []; 79 | const months = []; 80 | for (const { contributionDays } of weeks) { 81 | months.push(+contributionDays[0].date.split("-")[1]); 82 | for (const { date, contributionCount } of contributionDays) { 83 | contributions.push([date, contributionCount]); 84 | } 85 | } 86 | let count = 1; 87 | const fr = []; 88 | for (let i = 1; i < months.length; ++i) { 89 | if (months[i - 1] == months[i]) { 90 | count++; 91 | } else { 92 | fr.push(count); 93 | count = 1; 94 | } 95 | } 96 | fr.push(count); 97 | rendarMonths(fr, contributions[0][0]); 98 | let i = 0; 99 | let totalContribution = 0; 100 | for (let col = 0; col < 53; ++col) { 101 | for (let row = 0; row < 7; ++row) { 102 | if (i >= contributions.length) { 103 | clearExtraSkeletonDays(i); 104 | break; 105 | } 106 | const [date, contributionCount] = contributions[i++]; 107 | const [y, m, d] = date.split("-").map(Number); 108 | let level = 0; 109 | totalContribution += contributionCount; 110 | if (contributionCount >= 7) level = 4; 111 | else if (contributionCount >= 4) level = 3; 112 | else if (contributionCount >= 2) level = 2; 113 | else if (contributionCount > 0) level = 1; 114 | 115 | days[row][col].title = `${contributionCount} contributions on ${ 116 | months_str[m - 1] 117 | } ${d + sufixs[d % 10]}`; 118 | days[row][col].className = `day level-${level}`; 119 | } 120 | } 121 | 122 | document.getElementById("contribution-count").textContent = totalContribution; 123 | } 124 | 125 | function rendarMonths(fr, dateStart) { 126 | let m = new Date(dateStart).getMonth(); 127 | monthWrapper.innerHTML = ""; 128 | monthWrapper.classList.remove("skeleton"); 129 | 130 | for (let i = 0; i < fr.length; ++i) { 131 | m %= 12; 132 | const li = document.createElement("li"); 133 | li.textContent = months_str[m].slice(0, 3); 134 | monthWrapper.appendChild(li); 135 | m++; 136 | } 137 | 138 | let columns = fr.join("fr "); 139 | monthWrapper.style.gridTemplateColumns = columns + "fr"; 140 | } 141 | 142 | function clearExtraSkeletonDays(offset) { 143 | let length = SKELETON_ROWS * SKELETON_COLS; 144 | while (offset < length) { 145 | let row = offset % 7; 146 | let col = Math.floor(offset / 7); 147 | days[row][col].style.visibility = "hidden"; 148 | offset++; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /backend/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "backend", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "dotenv": "^16.4.7", 13 | "node-fetch": "^3.3.2", 14 | "nodemailer": "^6.9.16" 15 | } 16 | }, 17 | "node_modules/data-uri-to-buffer": { 18 | "version": "4.0.1", 19 | "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", 20 | "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", 21 | "license": "MIT", 22 | "engines": { 23 | "node": ">= 12" 24 | } 25 | }, 26 | "node_modules/dotenv": { 27 | "version": "16.4.7", 28 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", 29 | "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==", 30 | "engines": { 31 | "node": ">=12" 32 | }, 33 | "funding": { 34 | "url": "https://dotenvx.com" 35 | } 36 | }, 37 | "node_modules/fetch-blob": { 38 | "version": "3.2.0", 39 | "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", 40 | "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", 41 | "funding": [ 42 | { 43 | "type": "github", 44 | "url": "https://github.com/sponsors/jimmywarting" 45 | }, 46 | { 47 | "type": "paypal", 48 | "url": "https://paypal.me/jimmywarting" 49 | } 50 | ], 51 | "license": "MIT", 52 | "dependencies": { 53 | "node-domexception": "^1.0.0", 54 | "web-streams-polyfill": "^3.0.3" 55 | }, 56 | "engines": { 57 | "node": "^12.20 || >= 14.13" 58 | } 59 | }, 60 | "node_modules/formdata-polyfill": { 61 | "version": "4.0.10", 62 | "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", 63 | "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", 64 | "license": "MIT", 65 | "dependencies": { 66 | "fetch-blob": "^3.1.2" 67 | }, 68 | "engines": { 69 | "node": ">=12.20.0" 70 | } 71 | }, 72 | "node_modules/node-domexception": { 73 | "version": "1.0.0", 74 | "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", 75 | "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", 76 | "funding": [ 77 | { 78 | "type": "github", 79 | "url": "https://github.com/sponsors/jimmywarting" 80 | }, 81 | { 82 | "type": "github", 83 | "url": "https://paypal.me/jimmywarting" 84 | } 85 | ], 86 | "license": "MIT", 87 | "engines": { 88 | "node": ">=10.5.0" 89 | } 90 | }, 91 | "node_modules/node-fetch": { 92 | "version": "3.3.2", 93 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz", 94 | "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==", 95 | "license": "MIT", 96 | "dependencies": { 97 | "data-uri-to-buffer": "^4.0.0", 98 | "fetch-blob": "^3.1.4", 99 | "formdata-polyfill": "^4.0.10" 100 | }, 101 | "engines": { 102 | "node": "^12.20.0 || ^14.13.1 || >=16.0.0" 103 | }, 104 | "funding": { 105 | "type": "opencollective", 106 | "url": "https://opencollective.com/node-fetch" 107 | } 108 | }, 109 | "node_modules/nodemailer": { 110 | "version": "6.9.16", 111 | "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.16.tgz", 112 | "integrity": "sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==", 113 | "engines": { 114 | "node": ">=6.0.0" 115 | } 116 | }, 117 | "node_modules/web-streams-polyfill": { 118 | "version": "3.3.3", 119 | "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", 120 | "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==", 121 | "license": "MIT", 122 | "engines": { 123 | "node": ">= 8" 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /js/chart.js: -------------------------------------------------------------------------------- 1 | let skillData = null; 2 | const dsa_skills = document.getElementById('dsa_skills'); 3 | const web_skills = document.getElementById('web_skills'); 4 | 5 | let dsa_skillElement = null; 6 | let dsa_chart = null; 7 | let web_chart = null; 8 | 9 | const dsaSkills = { 10 | "Advanced": { 11 | "Divide and Conquer": 69, 12 | "Union Find": 30, 13 | "DP": 79, 14 | "Backtracking": 48, 15 | "Trie": 21, 16 | "Game Theory": 90 17 | }, 18 | "Intermediate": { 19 | "DFS": 70, 20 | "Hash Table": 90, 21 | "BFS": 60, 22 | "Tree": 55, 23 | "Math": 45, 24 | "Greedy": 60 25 | }, 26 | "Fundamental": { 27 | "Array": 90, 28 | "String": 85, 29 | "Sorting": 70, 30 | "Two Pointers": 77, 31 | "Matrix": 92, 32 | "Linked List": 95 33 | } 34 | } 35 | 36 | // helper function to update chart data on btn interaction 37 | function updateChart(field) { 38 | let labels, values; 39 | labels = Object.keys(dsaSkills[field]); 40 | values = Object.values(dsaSkills[field]); 41 | updateDataset(dsa_chart, dsa_skillElement, labels, values, field); 42 | } 43 | 44 | const dsa_ctx = document.getElementById('dsa_chart').getContext('2d'); 45 | 46 | // Create gradient 47 | const gradient = dsa_ctx.createLinearGradient(0, 0, 0, 400); 48 | gradient.addColorStop(0, 'rgba(255, 50, 0, 0.75)'); 49 | gradient.addColorStop(1, 'rgba(254, 202, 102, 0.75)'); 50 | 51 | // Initialize the bars and chart 52 | dsa_skillElement = renderBars(dsa_skills, dsaSkills.Fundamental); 53 | dsa_chart = renderChart(dsa_ctx, dsaSkills.Fundamental, 'Fundamental'); 54 | 55 | //rendering the skill progress bars 56 | function renderBars(parent, data) { 57 | // Create an array to store all HTML fragments 58 | const htmlFragments = Object.entries(data).map(([label, value]) => { 59 | return ` 60 |
  • 61 | ${label} 62 | ${value}% 63 |
    64 |
    65 |
    66 |
    • 67 | `; 68 | }); 69 | 70 | // Join all HTML fragments into a single string and assign to innerHTML 71 | parent.innerHTML = htmlFragments.join(''); 72 | return { 73 | labels: parent.querySelectorAll('strong'), // Changed from 'h5' to 'strong' 74 | data: parent.querySelectorAll('data'), 75 | bar: parent.querySelectorAll('.bar'), 76 | } 77 | } 78 | 79 | function renderChart(ctx, skills, title) { 80 | return new Chart(ctx, { 81 | type: 'radar', 82 | data: { 83 | labels: Object.keys(skills), 84 | datasets: [{ 85 | label: 'Efficiency index', 86 | data: Object.values(skills), 87 | backgroundColor: gradient, 88 | pointRadius: 0, 89 | pointHoverRadius: 0 90 | }] 91 | }, 92 | 93 | options: { 94 | responsive: true, 95 | scales: { 96 | r: { 97 | min: 0, 98 | max: 100, 99 | angleLines: { 100 | color: '#666' 101 | }, 102 | grid: { 103 | color: '#666' 104 | }, 105 | pointLabels: { 106 | color: '#fff', 107 | font: { 108 | size: 12 109 | } 110 | }, 111 | ticks: { 112 | display: false, 113 | stepSize: 100 / 3, 114 | } 115 | } 116 | }, 117 | plugins: { 118 | legend: { 119 | display: false 120 | }, 121 | title: { 122 | display: true, 123 | text: title, 124 | color: '#ff6b6b', 125 | font: { 126 | size: 16 127 | } 128 | }, 129 | tooltip: { 130 | enabled: false 131 | }, 132 | } 133 | } 134 | }) 135 | } 136 | 137 | function updateDataset(chart, skillElement, labels, values, title) { 138 | //update the chart 139 | chart.data.labels = labels; 140 | chart.data.datasets[0].data = values; 141 | chart.data.datasets[0].backgroundColor = gradient; 142 | chart.options.plugins.title.text = title; 143 | chart.update(); 144 | 145 | //update the bar 146 | for (let i = 0; i < labels.length; ++i) { 147 | skillElement.labels[i].textContent = labels[i]; 148 | skillElement.data[i].value = values[i]; 149 | skillElement.data[i].textContent = values[i] + '%'; 150 | skillElement.bar[i].style.width = `${values[i]}%`; 151 | } 152 | } -------------------------------------------------------------------------------- /css/utils.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: var(--para-clr); 3 | line-height: 1.4rem; 4 | } 5 | 6 | p a { 7 | color: #a3a3a3; 8 | text-decoration: underline; 9 | text-underline-offset: 2px; 10 | } 11 | .text-muted-foreground { 12 | color: #a3a3a3; 13 | } 14 | 15 | p a:hover { 16 | filter: brightness(0.8); 17 | } 18 | p span a, 19 | p span, 20 | li span{ 21 | color: #ffeea6; 22 | font-weight: 600; 23 | } 24 | 25 | strong{ 26 | font-weight: 600; 27 | } 28 | 29 | .btn-wrapper { 30 | display: flex; 31 | /* flex-wrap: wrap; */ 32 | gap: 10px; 33 | margin-top: 20px; 34 | } 35 | .btn img{ 36 | width: 16px; 37 | height: 16px; 38 | } 39 | .btn{ 40 | user-select: none; 41 | cursor: pointer; 42 | background-color: #383838; 43 | padding: 8px 12px; 44 | height: 36px; 45 | border-radius: 8px; 46 | color: #fafafa; 47 | text-align: center; 48 | text-transform: capitalize; 49 | font-weight: 600; 50 | font-size: 14px; 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | gap: 6px; 55 | transition: .3s ease; 56 | } 57 | 58 | .btn.primary { 59 | background-color: white; 60 | color: black; 61 | } 62 | 63 | .btn.active, 64 | .btn:hover { 65 | filter: brightness(0.9); 66 | } 67 | .icon{ 68 | aspect-ratio: 1; 69 | width: 24px; 70 | overflow: hidden; 71 | } 72 | .icon:hover{ 73 | filter: brightness(200); 74 | } 75 | 76 | .icon img{ 77 | width: 100%; 78 | height: 100%; 79 | object-fit: contain; 80 | } 81 | .gold { 82 | font-weight: 500; 83 | color: hsl(45, 100%, 72%); 84 | user-select: none; 85 | white-space: nowrap; 86 | padding: 10px; 87 | background: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%); 88 | font-size: 13px; 89 | /* border-radius: 0 15px; */ 90 | border-radius: 15px; 91 | box-shadow: var(--shadow-2); 92 | z-index: 1; 93 | transition: 0.25s ease; 94 | position: relative; 95 | } 96 | 97 | .gold::before { 98 | content: ""; 99 | position: absolute; 100 | inset: 1px; 101 | border-radius: inherit; 102 | background: linear-gradient(to bottom right, hsla(240, 1%, 18%, 0.251) 0%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%); 103 | transition: 0.25s ease; 104 | z-index: -1; 105 | } 106 | 107 | .gold:hover, 108 | .gold:focus { 109 | background: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%); 110 | } 111 | 112 | .gold:hover::before, 113 | .gold:focus::before { 114 | background: linear-gradient(135deg, hsla(45, 100%, 71%, 0.251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%); 115 | } 116 | sub, 117 | sup{ 118 | font-weight: 400; 119 | font-size: 12px; 120 | padding: 2px; 121 | } 122 | 123 | /* write is an animation class */ 124 | .write { 125 | font-size: 24px; 126 | color: #ffdb70; 127 | font-weight: 600; 128 | text-transform: capitalize; 129 | text-align: center; 130 | font-family: "Orbitron", sans-serif; 131 | position: relative; 132 | width: max-content; 133 | } 134 | 135 | .write::before { 136 | content: ''; 137 | position: absolute; 138 | height: 100%; 139 | width: 3px; 140 | top: 0; 141 | right: -6px; 142 | background-color: #ffda6f; 143 | animation: blink 1s infinite linear; 144 | } 145 | 146 | .write.writing::before { 147 | animation: none; 148 | } 149 | 150 | @keyframes blink { 151 | 152 | 0%, 153 | 100% { 154 | opacity: 0; 155 | } 156 | 157 | 50% { 158 | opacity: 1; 159 | } 160 | } 161 | 162 | .alert.show { 163 | display: flex; 164 | } 165 | .alert { 166 | display: none; 167 | align-items: center; 168 | padding: 10px 20px; 169 | color: #cce8cd; 170 | gap: 10px; 171 | font-size: 16px; 172 | background-color: #2e7d32; 173 | border-radius: 5px; 174 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 175 | transform-origin: 50% 0% 0px; 176 | animation: bounceIn .5s ease-out; 177 | position: fixed; 178 | top: 20px; 179 | right: 10px; 180 | transition: .3s ease-in-out; 181 | z-index: 100; 182 | } 183 | .alert::before{ 184 | content: ''; 185 | background-size: contain; 186 | background-repeat: no-repeat; 187 | width: 18px; 188 | height: 18px; 189 | overflow: hidden; 190 | } 191 | 192 | @keyframes bounceIn { 193 | 0% { 194 | opacity: 0; 195 | transform: translateY(-100%) scale(0.5); 196 | } 197 | 198 | 60% { 199 | opacity: 1; 200 | transform: translateY(10%) scale(1.05); 201 | } 202 | 203 | 80% { 204 | transform: translateY(-5%) scale(0.95); 205 | } 206 | 207 | 100% { 208 | transform: translateY(0) scale(1); 209 | } 210 | } 211 | 212 | .alert.danger { 213 | background-color: #160b0b; 214 | } 215 | .alert.danger::before{ 216 | background-image: url(../assets/icons/exclamation-svgrepo-com.svg); 217 | } 218 | 219 | .alert.success { 220 | background-color: #0c130d; 221 | } 222 | .alert.success::before{ 223 | background-image: url(../assets/icons/tick-inside-circle.png); 224 | } 225 | 226 | .loader{ 227 | display: flex; 228 | gap: 5px; 229 | } 230 | .dot{ 231 | width: 10px; 232 | aspect-ratio: 1/1; 233 | background-color: #fafafa; 234 | border-radius: 50%; 235 | animation: pulse 1.2s infinite linear; 236 | animation-delay: calc(var(--i) * 0.25s); 237 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5); 238 | } 239 | .loader{ 240 | display: none; 241 | position: fixed; 242 | z-index: 100; 243 | bottom: 20px; 244 | right: 50%; 245 | transform: translateX(50%); 246 | } 247 | .loader.show{ 248 | display: flex; 249 | } 250 | @keyframes pulse { 251 | 0%, 100% { 252 | transform: scale(0); 253 | opacity: 0.5; 254 | } 255 | 50% { 256 | transform: scale(1.2); 257 | opacity: 1; 258 | } 259 | } 260 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Abhijeet Singh Rajput - MERN Stack Developer Portfolio 2 | 3 | ![Portfolio Preview](https://mrcodium.netlify.app/assets/project-preview/portfolio-preview.webp) 4 | 5 | 🚀 **Welcome to my professional portfolio!** I'm **Abhijeet Singh Rajput**, a passionate and skilled **MERN Stack Developer** with a strong foundation in data structures and algorithms. I specialize in building fast, scalable, and user-friendly full-stack web applications. 6 | 7 | **Portfolio Live Link:** [https://mrcodium.netlify.app/](https://mrcodium.netlify.app/) 8 | 9 | --- 10 | 11 | ## 👨‍💻 About Me 12 | 13 | I'm a **Master of Computer Applications (MCA) student** at Graphic Era University, actively building my skills in modern web development. I have a proven track record of creating over **15 projects**, from conceptual UI/UX designs to fully functional, end-to-end products. 14 | 15 | I'm also a dedicated problem-solver, having tackled **750+ coding questions** on platforms like **LeetCode** (where I ranked in the **top 4.2% in 2023**) and GeeksforGeeks. This strong algorithmic background allows me to write clean, efficient, and scalable code. 16 | 17 | I am actively seeking **full-time opportunities** as a **Software Developer, Full-Stack Developer, or Backend Engineer**. 18 | 19 | --- 20 | 21 | ## 🛠️ Technologies & Skills 22 | 23 | ### **Frontend & Frameworks** 24 | ![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) 25 | ![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white) 26 | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) 27 | ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) 28 | ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 29 | ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) 30 | ![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) 31 | 32 | ### **Backend & Databases** 33 | ![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white) 34 | ![Express.js](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white) 35 | ![MongoDB](https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white) 36 | 37 | ### **Tools & Others** 38 | ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) 39 | ![Socket.io](https://img.shields.io/badge/Socket.io-010101?style=for-the-badge&logo=socketdotio&logoColor=white) 40 | ![Firebase](https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=black) 41 | ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white) 42 | ![Postman](https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=postman&logoColor=white) 43 | 44 | ### **Data Structures & Algorithms** 45 | - **Proficient In:** Dynamic Programming (DP), Game Theory, Divide and Conquer, Backtracking. 46 | - **Platforms:** LeetCode, GeeksforGeeks. 47 | 48 | --- 49 | 50 | ## 🚀 Featured Projects 51 | 52 | ### **1. GEU ERP Redesign** 53 | A complete modern redesign of the legacy university portal, focusing on a **40% faster** and more intuitive user experience for students to access academics, attendance, and results. 54 | - **Tech:** Next.js, Node.js, TypeScript, Tailwind CSS, Shadcn UI. 55 | - **Key Features:** Optimized UI/UX, faster navigation, responsive design. 56 | 57 | ### **2. Notehub - Collaborative Note-Taking Platform** 58 | A feature-rich, collaborative note-management platform supporting real-time editing, LaTeX for mathematical notation, and a distraction-free writing environment. 59 | - **Tech:** React.js, Node.js, Express.js, MongoDB, Socket.io, Tailwind CSS. 60 | - **Key Features:** Real-time collaboration, smart text formatting, LaTeX support, user authentication. 61 | 62 | ### **3. Chess Engine (C++ & JavaScript)** 63 | Developed a high-performance chess engine using advanced algorithms like **alpha-beta pruning** and bitboard representations to compete at an advanced ELO level. 64 | - **Tech:** C++, JavaScript, HTML5, CSS3. 65 | - **Key Features:** Strategic move evaluation, efficient search tree pruning, interactive UI. 66 | 67 | ### **4. Path Finder Visualizer** 68 | An interactive tool that visually demonstrates how pathfinding algorithms like **A*, Dijkstra, BFS, and DFS** operate in real-time. 69 | - **Tech:** HTML5, CSS3, JavaScript. 70 | - **Key Features:** Real-time visualization, customizable grids, algorithm comparison. 71 | 72 | ### **5. Sorting Simulator** 73 | A real-time visualization tool to learn how sorting algorithms work, including Bubble, Selection, Insertion, Merge, and Quick Sort — with step-by-step animations. 74 | - **Tech:** HTML5, CSS3, JavaScript. 75 | - **Key Features:** Step-by-step animations, multiple algorithm support, interactive controls. 76 | 77 | --- 78 | 79 | ## 📊 Coding Profiles & Achievements 80 | 81 | - **LeetCode:** [Your LeetCode Profile URL] - **Top 4.2% (2023)**, 750+ Problems Solved 82 | - **GeeksforGeeks:** [Your GFG Profile URL] 83 | - **GitHub:** **629 contributions** in the last year 84 | 85 | --- 86 | 87 | ## 📚 Education 88 | 89 | - **Master of Computer Applications (MCA)** | Graphic Era University, Dehradun (*2024 - 2026*) | CGPA: 8.8/10 90 | - **Bachelor of Computer Applications (BCA)** | BRABU, Bihar (*2021 - 2024*) | Percentage: 76.03% 91 | - **12th Grade (Science)** | Bhagwan Singh College, Bihar (*2020 - 2021*) | Percentage: 57.80% 92 | 93 | --- 94 | 95 | ## 📞 Let's Connect! 96 | 97 | I'm always open to discussing new opportunities, exciting projects, or just having a tech chat. 98 | 99 | - **Portfolio:** [https://mrcodium.netlify.app/](https://mrcodium.netlify.app/) 100 | - **LinkedIn:** [https://www.linkedin.com/in/abhijeet-singh-rajput1/](https://www.linkedin.com/in/abhijeet-singh-rajput1/) 101 | - **GitHub:** [https://github.com/abhijeetSinghRajput](https://github.com/abhijeetSinghRajput) 102 | - **Email:** abhijeet62008@gmail.com 103 | 104 | --- 105 | 106 | **⭐ Feel free to star this repository if you find my work interesting!** 107 | -------------------------------------------------------------------------------- /assets/icons/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /dist/css/style.min.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;list-style:none;text-decoration:none;background:0 0}html{scroll-behavior:smooth}:root{--bg-dark:#121212;--white:#fafafa;--old-white:#d6d6d6;--shadow-1:-4px 8px 24px hsla(0, 0%, 0%, 0.125);--shadow-2:0 16px 30px hsla(0, 0%, 0%, 0.125);--shadow-3:0 16px 40px hsla(0, 0%, 0%, 0.125)}.badge{padding:4px 8px;border-radius:8px;font-size:12px;color:#fff;background-color:#383838;font-weight:600;display:flex;align-items:center;gap:2px}.badge img{width:16px;height:16px}body{margin-top:100px;background-color:var(--bg-dark);color:var(--white)}nav{white-space:nowrap;background-color:var(--bg-dark);z-index:999;position:fixed;top:0;width:100%;border-bottom:1px solid #383838;display:flex;justify-content:center}nav>div{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:860px;padding:20px}nav ul{display:flex;gap:16px}nav .nav-item a{color:var(--old-white);padding:8px 12px;border-radius:12px}.nav-item a.active,.nav-item a:hover{color:#ffdb70;background-color:#252525}.body{width:100%;max-width:860px;margin:auto;overflow:hidden}.container{padding:30px;margin:0 16px;margin-bottom:30px;border:1px solid #383838;background-color:#1e1e1f;border-radius:20px;box-shadow:var(--shadow-1)}section#hero{display:flex;gap:20px}#hero .content{flex:1;display:flex;flex-direction:column;justify-content:center}#hero .content #name{font-size:48px;font-weight:700;color:var(--white);white-space:nowrap}#hero .content .sub-title{margin-top:10px;display:flex;align-items:center;gap:16px}.ping{width:10px;aspect-ratio:1;background-color:#43ff62;border-radius:50%;position:relative;flex-shrink:0}.ping::before{content:'';flex-shrink:0;position:absolute;width:100%;height:100%;background-color:#43ff62;border-radius:50%;animation:ping 1.2s ease-out infinite}@keyframes ping{0%{transform:scale(1);opacity:100%}100%{transform:scale(3);opacity:0}}#hero .content h2{font-family:Orbitron,sans-serif;color:#ffdb70;font-size:20px;font-weight:600;letter-spacing:2px;margin-top:10px}#hero .content .description{margin-top:20px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}#hero .content p{font-size:16px}#hero .content .cta-wrapper{gap:16px;margin-top:42px;margin-bottom:20px}#hero .content .cta-wrapper .cta,#hero .content .cta-wrapper button{margin-right:8px;color:#fff;padding:12px 20px;font-weight:600;background:linear-gradient(135deg,#f8a552,#e03f04);border-radius:16px;text-transform:capitalize;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 6px 12px rgba(0,0,0,.2);z-index:1}#hero .content .cta-wrapper a::before,#hero .content .cta-wrapper button::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(to bottom right,hsla(240,1%,18%,.25) 0,hsla(240,2%,11%,0) 100%),#202021;transition:.25s ease;z-index:-1}#hero .content .cta-wrapper a:hover,#hero .content .cta-wrapper button:hover{transform:translateY(-3px);box-shadow:0 12px 20px rgba(0,0,0,.3);background:linear-gradient(135deg,#f9b26b,#f94605)}#hero .content .cta-wrapper a:hover::before,#hero .content .cta-wrapper button:hover::before{background:linear-gradient(135deg,hsla(45,100%,71%,.25) 0,hsla(35,100%,68%,0) 60%),#202021}#hero .content .social-links{display:flex;margin-top:32px;margin-left:4px;gap:20px;width:max-content}#hero .profile-photo{flex:1;position:relative;border-radius:50%;height:300px;overflow:hidden}#hero .profile-photo img{width:100%;height:100%;object-fit:cover}#hero .profile-photo .status{width:100%;height:100%;object-fit:contain;position:absolute;left:0;transform:rotate(0);z-index:100}section>h2{padding:20px 24px;margin:0 -24px 16px;padding-top:0}#about h3{font-size:16px;margin-top:30px;margin-bottom:12px}#about .content{display:flex;gap:20px;align-items:start;justify-content:space-between}#about .content .avatar{flex-shrink:0;width:174px;aspect-ratio:1;overflow:hidden;border-radius:18px;position:relative}#about .content .avatar img{width:100%;height:100%;object-fit:cover}#about p:not(:last-child){margin-bottom:16px}#about .technologies .badge{gap:4px;font-size:13px}#about .technologies .badges img{width:18px;height:18px}#about .technologies .badges{display:flex;flex-wrap:wrap;gap:8px}#education li strong{font-weight:700}section#projects{background-color:transparent;box-shadow:none;border:none;padding:0}section#projects .card-wrapper .btn-wrapper{margin-top:32px}section#projects .card-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:20px}section#projects .card h3{margin-bottom:8px}section#projects .card p{font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}section#projects .technologies{margin-top:10px}section#projects .technologies .icons{margin-top:4px;display:flex;gap:10px}section#projects .technologies img{width:24px;aspect-ratio:1}.card{height:max-content;border-radius:14px;font-size:15px;box-shadow:0 16px 30px hsla(0,0%,0%,.25);background:linear-gradient(to bottom right,#3f3f3f 0,hsla(0,0%,25%,0) 50%);position:relative;z-index:1;color:#fafafa;overflow:hidden}.card::before{content:"";position:absolute;inset:1px;overflow:hidden;background:linear-gradient(to bottom right,hsla(240,1%,18%,.251) 0,hsla(240,2%,11%,0) 100%),#202021;border-radius:inherit;z-index:-1}.preview{flex-shrink:0;overflow:hidden;height:200px}.preview img{width:100%;height:100%;object-fit:cover;transition:.3s ease}.card .content{margin:16px}.card:hover .preview img{transform:scale(1.1)}.lists li{margin-bottom:30px;position:relative;padding-left:30px}.lists li::before{content:"";position:absolute;top:7px;left:4px;border-radius:50%;aspect-ratio:1;width:8px;box-shadow:0 0 0 4px #363636;background-color:#feca66;z-index:1}.lists li::after{content:"";background-color:#363636;height:calc(100% + 30px);top:7px;left:8px;width:1px;position:absolute;z-index:0}.lists li:last-child::after{display:none}section#expertise .lists li{margin-bottom:16px;font-size:14px}section#expertise .lists li::after{height:calc(100% + 16px)}.card .content h3{text-transform:capitalize;transition:.3s ease}.card:hover h3{color:#e4c466}#toggle-all-projects{margin-top:30px;height:44px;align-items:center;width:max-content;margin-left:auto;margin-right:auto}h5{font-size:14px;letter-spacing:.5px}.skill{display:block}.skill li .skill-label{display:flex;gap:8px}.skill li{padding:0;margin-bottom:25px}.skill strong{white-space:nowrap;font-size:15px;color:#fafafa;display:inline;margin-right:8px}.skill data{color:var(--old-white);font-size:15px}.skill-progress{width:100%;height:8px;border-radius:10px;background-color:#383838}.skill-progress .bar{margin-top:8px;background:linear-gradient(to right,#ffdb70,#ffbb5b);height:100%;border-radius:inherit;transition:.3s ease-in-out}#skills h2{margin:16px;margin-top:46px;padding:0}#skills .statistics{display:grid;grid-template-columns:1fr 1fr;grid-gap:6px;max-width:100%}.statistics .chart{display:flex;align-items:center;justify-content:center;overflow:hidden}#contact-form{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;margin-bottom:20px}.valid:focus{outline:3px solid #bca358}.invalid:focus{outline:3px solid #b84c4c}input,textarea{padding:15px 20px;color:#fafafa;font-weight:400;font-size:15px;border:1px solid #383838;border-radius:14px;outline:0;width:100%}textarea{resize:none;height:120px;grid-column:1/-1}.circle-gradient{position:relative}.circle-gradient::before{position:absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#d1a854,#d13c0a);height:100%;aspect-ratio:1;border-radius:50%}#message-btn{display:flex;align-items:center;gap:8px;font-size:15px;outline:0;border:none;cursor:pointer;margin-left:auto;padding:16px 20px}button:disabled{filter:grayscale(100%);cursor:not-allowed!important}input::placeholder{color:#757575}@media screen and (max-width:770px){#about .content{flex-direction:column}#hero .content #name{font-size:40px}.card{padding:0}.preview{aspect-ratio:1/.5;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid #383838;margin:1px;height:auto}}@media screen and (max-width:680px){body{margin-top:60px}section#projects .card-wrapper{display:grid;grid-template-columns:1fr;gap:20px}#contact-form{grid-template-columns:1fr}.container{padding:24px 15px;margin:12px;margin-bottom:20px}nav>div{padding:0 16px;height:60px;font-size:15px}nav .nav-item a{padding:0}nav .nav-item a.active,nav .nav-item a:hover{background-color:transparent}nav ul{gap:20px}section#hero{display:flex;flex-direction:column-reverse}#hero .content #name{font-size:36px}#hero .content h2{font-size:18px}#hero .content{padding:0}#hero .profile-photo{flex:1;width:200px;height:200px}.skill li{margin-bottom:15px}.skill strong{font-weight:500;font-size:13px}.skill data{font-size:13px}#skills .statistics{display:flex;flex-direction:column-reverse;gap:20px}.statistics .chart{align-self:center;width:250px;height:250px}}@media screen and (max-width:550px){.card .content h3{color:#e4c466;font-size:18px;margin-bottom:8px}#message-btn{width:100%;justify-content:center}.card{padding:0}.preview{aspect-ratio:1/.5;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px solid #383838;margin:1px;height:auto}#skills .btn-wrapper{margin-top:10px;gap:8px;display:grid;grid-template-columns:repeat(3,1fr)}#skills .btn-wrapper .btn{padding:2.5px 9px;text-align:center}}@media (pointer:coarse){html{touch-action:pan-x pan-y}} -------------------------------------------------------------------------------- /assets/icons/postman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | list-style: none; 7 | text-decoration: none; 8 | background: none; 9 | } 10 | html { 11 | scroll-behavior: smooth; 12 | } 13 | :root { 14 | --bg-dark: #121212; 15 | --white: #fafafa; 16 | --old-white: #d6d6d6; 17 | 18 | --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125); 19 | --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125); 20 | --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125); 21 | } 22 | 23 | .badge { 24 | padding: 4px 8px; 25 | border-radius: 8px; 26 | font-size: 12px; 27 | color: white; 28 | background-color: #383838; 29 | font-weight: 600; 30 | display: flex; 31 | align-items: center; 32 | gap: 2px; 33 | } 34 | 35 | .badge img { 36 | width: 16px; 37 | height: 16px; 38 | } 39 | 40 | body { 41 | margin-top: 100px; 42 | background-color: var(--bg-dark); 43 | color: var(--white); 44 | } 45 | 46 | nav { 47 | white-space: nowrap; 48 | background-color: var(--bg-dark); 49 | z-index: 100; 50 | position: fixed; 51 | top: 0; 52 | width: 100%; 53 | border-bottom: 1px solid #383838; 54 | display: flex; 55 | justify-content: center; 56 | } 57 | 58 | nav > div { 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | width: 100%; 63 | max-width: 860px; 64 | padding: 20px; 65 | } 66 | 67 | nav ul { 68 | display: flex; 69 | gap: 16px; 70 | } 71 | 72 | nav .nav-item a { 73 | color: var(--old-white); 74 | padding: 8px 12px; 75 | border-radius: 12px; 76 | } 77 | 78 | .nav-item a.active, 79 | .nav-item a:hover { 80 | color: #ffdb70; 81 | background-color: #252525; 82 | } 83 | 84 | .body { 85 | width: 100%; 86 | max-width: 860px; 87 | margin: auto; 88 | overflow: hidden; 89 | } 90 | 91 | .container { 92 | padding: 30px; 93 | margin: 0 16px; 94 | margin-bottom: 30px; 95 | border: 1px solid hsl(0, 0%, 22%); 96 | background-color: #1e1e1f; 97 | border-radius: 20px; 98 | box-shadow: var(--shadow-1); 99 | } 100 | 101 | section#hero { 102 | display: flex; 103 | gap: 20px; 104 | } 105 | 106 | #hero .content { 107 | flex: 1; 108 | /* padding: 30px; */ 109 | /* border: 1px solid white; */ 110 | display: flex; 111 | flex-direction: column; 112 | justify-content: center; 113 | } 114 | 115 | #hero .content #name { 116 | font-size: 48px; 117 | font-weight: 700; 118 | color: var(--white); 119 | white-space: nowrap; 120 | } 121 | 122 | #hero .content .sub-title{ 123 | margin-top: 10px; 124 | display: flex; 125 | align-items: center; 126 | gap: 16px; 127 | } 128 | 129 | .ping { 130 | width: 10px; 131 | aspect-ratio: 1; 132 | background-color: #43ff62; 133 | border-radius: 50%; 134 | position: relative; 135 | flex-shrink: 0; 136 | } 137 | .ping::before{ 138 | content: ''; 139 | flex-shrink: 0; 140 | position: absolute; 141 | width: 100%; 142 | height: 100%; 143 | background-color: #43ff62; 144 | border-radius: 50%; 145 | animation: ping 1.2s ease-out infinite; 146 | } 147 | 148 | @keyframes ping { 149 | 0%{ 150 | transform: scale(1); 151 | opacity: 100%; 152 | } 153 | 100%{ 154 | transform: scale(3); 155 | opacity: 0; 156 | } 157 | } 158 | 159 | 160 | #hero .content h2 { 161 | font-family: "Orbitron", sans-serif; 162 | color: #ffdb70; 163 | font-size: 20px; 164 | font-weight: 600; 165 | letter-spacing: 2px; 166 | margin-top: 10px; 167 | } 168 | 169 | #hero .content .description { 170 | margin-top: 20px; 171 | display: flex; 172 | gap: 4px; 173 | flex-wrap: wrap; 174 | align-items: center; 175 | } 176 | 177 | #hero .content p { 178 | font-size: 16px; 179 | } 180 | 181 | #hero .content .cta-wrapper { 182 | gap: 16px; 183 | margin-top: 42px; 184 | margin-bottom: 20px; 185 | } 186 | #hero .content .cta-wrapper .cta, 187 | #hero .content .cta-wrapper button { 188 | margin-right: 8px; 189 | color: white; 190 | padding: 12px 20px; 191 | font-weight: 600; 192 | background: linear-gradient(135deg, hsl(30, 93%, 65%), hsl(16, 96%, 45%)); 193 | border-radius: 16px; 194 | text-transform: capitalize; 195 | position: relative; 196 | overflow: hidden; 197 | transition: transform 0.3s ease, box-shadow 0.3s ease; 198 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 199 | z-index: 1; 200 | } 201 | 202 | #hero .content .cta-wrapper a::before, 203 | #hero .content .cta-wrapper button::before { 204 | content: ""; 205 | position: absolute; 206 | inset: 1px; 207 | border-radius: inherit; 208 | background: linear-gradient( 209 | to bottom right, 210 | hsla(240, 1%, 18%, 0.25) 0%, 211 | hsla(240, 2%, 11%, 0) 100% 212 | ), 213 | hsl(240, 2%, 13%); 214 | transition: 0.25s ease; 215 | z-index: -1; 216 | } 217 | 218 | #hero .content .cta-wrapper a:hover, 219 | #hero .content .cta-wrapper button:hover { 220 | transform: translateY(-3px); 221 | box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); 222 | background: linear-gradient(135deg, hsl(30, 93%, 70%), hsl(16, 96%, 50%)); 223 | } 224 | 225 | #hero .content .cta-wrapper a:hover::before, 226 | #hero .content .cta-wrapper button:hover::before { 227 | background: linear-gradient( 228 | 135deg, 229 | hsla(45, 100%, 71%, 0.25) 0%, 230 | hsla(35, 100%, 68%, 0) 60% 231 | ), 232 | hsl(240, 2%, 13%); 233 | } 234 | 235 | #hero .content .social-links { 236 | display: flex; 237 | margin-top: 32px; 238 | margin-left: 4px; 239 | gap: 20px; 240 | width: max-content; 241 | } 242 | 243 | #hero .profile-photo { 244 | flex: 1; 245 | position: relative; 246 | border-radius: 50%; 247 | height: 300px; 248 | overflow: hidden; 249 | } 250 | 251 | #hero .profile-photo img { 252 | width: 100%; 253 | height: 100%; 254 | object-fit: cover; 255 | } 256 | 257 | #hero .profile-photo .status{ 258 | width: 100%; 259 | height: 100%; 260 | object-fit: contain; 261 | position: absolute; 262 | left: 0; 263 | transform: rotate(-0deg); 264 | z-index: 100; 265 | } 266 | 267 | /* ==================================== */ 268 | /* ================== about section */ 269 | /* ================================== */ 270 | section > h2 { 271 | padding: 20px 24px; 272 | margin: 0px -24px 16px; 273 | padding-top: 0; 274 | } 275 | 276 | #about h3 { 277 | font-size: 16px; 278 | margin-top: 30px; 279 | margin-bottom: 12px; 280 | } 281 | 282 | #about .content { 283 | display: flex; 284 | gap: 20px; 285 | align-items: start; 286 | justify-content: space-between; 287 | } 288 | 289 | #about .content .avatar { 290 | flex-shrink: 0; 291 | width: 174px; 292 | aspect-ratio: 1; 293 | overflow: hidden; 294 | border-radius: 18px; 295 | position: relative; 296 | } 297 | #about .content .avatar img { 298 | width: 100%; 299 | height: 100%; 300 | object-fit: cover; 301 | } 302 | 303 | #about p:not(:last-child) { 304 | margin-bottom: 16px; 305 | } 306 | 307 | #about .technologies .badge { 308 | gap: 4px; 309 | font-size: 13px; 310 | } 311 | #about .technologies .badges img { 312 | width: 18px; 313 | height: 18px; 314 | } 315 | #about .technologies .badges { 316 | display: flex; 317 | flex-wrap: wrap; 318 | gap: 8px; 319 | } 320 | 321 | #education li strong { 322 | font-weight: bold; 323 | } 324 | 325 | /* ==================================== */ 326 | /* ================== project section */ 327 | /* ================================== */ 328 | section#projects { 329 | background-color: transparent; 330 | box-shadow: none; 331 | border: none; 332 | padding: 0; 333 | } 334 | section#projects .card-wrapper .btn-wrapper { 335 | margin-top: 32px; 336 | } 337 | section#projects .card-wrapper { 338 | display: grid; 339 | grid-template-columns: 1fr 1fr; 340 | gap: 20px; 341 | } 342 | 343 | section#projects .card h3 { 344 | margin-bottom: 8px; 345 | } 346 | 347 | section#projects .card p { 348 | font-size: 16px; 349 | display: -webkit-box; 350 | -webkit-line-clamp: 3; /* number of lines to show */ 351 | -webkit-box-orient: vertical; 352 | overflow: hidden; 353 | text-overflow: ellipsis; 354 | } 355 | 356 | section#projects .technologies { 357 | margin-top: 10px; 358 | } 359 | section#projects .technologies .icons { 360 | margin-top: 4px; 361 | display: flex; 362 | gap: 10px; 363 | } 364 | section#projects .technologies img { 365 | width: 24px; 366 | aspect-ratio: 1; 367 | } 368 | 369 | .card { 370 | /* width: max-content; */ 371 | height: max-content; 372 | border-radius: 14px; 373 | font-size: 15px; 374 | box-shadow: 0 16px 30px hsla(0, 0%, 0%, 0.25); 375 | background: linear-gradient( 376 | to bottom right, 377 | hsl(0, 0%, 25%) 0%, 378 | hsla(0, 0%, 25%, 0) 50% 379 | ); 380 | position: relative; 381 | z-index: 1; 382 | color: #fafafa; 383 | overflow: hidden; 384 | } 385 | 386 | .card::before { 387 | content: ""; 388 | position: absolute; 389 | inset: 1px; 390 | overflow: hidden; 391 | background: linear-gradient( 392 | to bottom right, 393 | hsla(240, 1%, 18%, 0.251) 0%, 394 | hsla(240, 2%, 11%, 0) 100% 395 | ), 396 | hsl(240, 2%, 13%); 397 | border-radius: inherit; 398 | z-index: -1; 399 | } 400 | 401 | .preview { 402 | flex-shrink: 0; 403 | overflow: hidden; 404 | height: 200px; 405 | } 406 | 407 | .preview img { 408 | width: 100%; 409 | height: 100%; 410 | object-fit: cover; 411 | transition: 0.3s ease; 412 | } 413 | 414 | .card .content { 415 | margin: 16px; 416 | } 417 | .card:hover .preview img { 418 | transform: scale(1.1); 419 | } 420 | 421 | .lists li { 422 | margin-bottom: 30px; 423 | 424 | position: relative; 425 | padding-left: 30px; 426 | } 427 | 428 | .lists li::before { 429 | content: ""; 430 | position: absolute; 431 | top: 7px; 432 | left: 4px; 433 | border-radius: 50%; 434 | aspect-ratio: 1; 435 | width: 8px; 436 | box-shadow: 0px 0px 0 4px #363636; 437 | background-color: #feca66; 438 | z-index: 1; 439 | } 440 | 441 | .lists li::after { 442 | content: ""; 443 | background-color: #363636; 444 | height: calc(100% + 30px); 445 | top: 7px; 446 | left: 8px; 447 | width: 1px; 448 | position: absolute; 449 | z-index: 0; 450 | } 451 | 452 | .lists li:last-child::after { 453 | display: none; 454 | } 455 | 456 | section#expertise .lists li { 457 | margin-bottom: 16px; 458 | font-size: 14px; 459 | } 460 | section#expertise .lists li::after { 461 | height: calc(100% + 16px); 462 | } 463 | 464 | .card .content h3 { 465 | text-transform: capitalize; 466 | transition: 0.3s ease; 467 | } 468 | 469 | .card:hover h3 { 470 | color: #e4c466; 471 | } 472 | 473 | #toggle-all-projects { 474 | margin-top: 30px; 475 | height: 44px; 476 | align-items: center; 477 | width: max-content; 478 | margin-left: auto; 479 | margin-right: auto; 480 | } 481 | 482 | /* ==================================== */ 483 | /* ================== skills section */ 484 | /* ================================== */ 485 | h5 { 486 | font-size: 14px; 487 | letter-spacing: 0.5px; 488 | } 489 | .skill { 490 | display: block; 491 | } 492 | 493 | .skill li .skill-label { 494 | display: flex; 495 | gap: 8px; 496 | } 497 | .skill li { 498 | padding: 0; 499 | margin-bottom: 25px; 500 | } 501 | 502 | .skill strong { 503 | white-space: nowrap; 504 | font-size: 15px; 505 | color: #fafafa; 506 | display: inline; 507 | margin-right: 8px; 508 | } 509 | 510 | .skill data { 511 | color: var(--old-white); 512 | font-size: 15px; 513 | } 514 | 515 | .skill-progress { 516 | width: 100%; 517 | height: 8px; 518 | border-radius: 10px; 519 | background-color: #383838; 520 | } 521 | 522 | .skill-progress .bar { 523 | margin-top: 8px; 524 | background: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%)); 525 | height: 100%; 526 | border-radius: inherit; 527 | transition: 0.3s ease-in-out; 528 | } 529 | 530 | #skills h2 { 531 | margin: 16px; 532 | margin-top: 46px; 533 | padding: 0; 534 | } 535 | 536 | #skills .statistics { 537 | display: grid; 538 | grid-template-columns: 1fr 1fr; 539 | grid-gap: 6px; 540 | max-width: 100%; 541 | } 542 | 543 | .statistics .chart { 544 | display: flex; 545 | align-items: center; 546 | justify-content: center; 547 | overflow: hidden; 548 | } 549 | 550 | /* ==================================== */ 551 | /* ================== contact section */ 552 | /* ================================== */ 553 | #contact-form { 554 | display: grid; 555 | grid-template-columns: 1fr 1fr; 556 | grid-gap: 16px; 557 | margin-bottom: 20px; 558 | } 559 | .valid:focus { 560 | outline: 3px solid #bca358; 561 | } 562 | .invalid:focus { 563 | outline: 3px solid #b84c4c; 564 | } 565 | input, 566 | textarea { 567 | padding: 15px 20px; 568 | color: #fafafa; 569 | font-weight: 400; 570 | font-size: 15px; 571 | border: 1px solid #383838; 572 | border-radius: 14px; 573 | outline: none; 574 | width: 100%; 575 | } 576 | textarea { 577 | resize: none; 578 | height: 120px; 579 | grid-column: 1/-1; 580 | } 581 | .circle-gradient { 582 | position: relative; 583 | } 584 | .circle-gradient::before { 585 | position: absolute; 586 | content: ""; 587 | top: 50%; 588 | left: 50%; 589 | transform: translate(-50%, -50%); 590 | background: linear-gradient(135deg, #d1a854, #d13c0a); 591 | height: 100%; 592 | aspect-ratio: 1; 593 | border-radius: 50%; 594 | } 595 | #message-btn { 596 | display: flex; 597 | align-items: center; 598 | gap: 8px; 599 | font-size: 15px; 600 | outline: none; 601 | border: none; 602 | cursor: pointer; 603 | margin-left: auto; 604 | padding: 16px 20px; 605 | } 606 | button:disabled { 607 | filter: grayscale(100%); 608 | cursor: not-allowed !important; 609 | } 610 | input::placeholder { 611 | color: #757575; 612 | } 613 | 614 | @media screen and (max-width: 770px) { 615 | #about .content { 616 | flex-direction: column; 617 | } 618 | 619 | #hero .content #name { 620 | font-size: 40px; 621 | } 622 | 623 | .card { 624 | padding: 0; 625 | } 626 | 627 | .preview { 628 | aspect-ratio: 1/0.5; 629 | border-bottom-left-radius: 0; 630 | border-bottom-right-radius: 0; 631 | border-bottom: 1px solid #383838; 632 | margin: 1px; 633 | height: auto; 634 | } 635 | } 636 | @media screen and (max-width: 680px) { 637 | body { 638 | margin-top: 60px; 639 | } 640 | 641 | section#projects .card-wrapper { 642 | display: grid; 643 | grid-template-columns: 1fr; 644 | gap: 20px; 645 | } 646 | 647 | #contact-form { 648 | grid-template-columns: 1fr; 649 | } 650 | .container { 651 | padding: 24px 15px; 652 | margin: 12px; 653 | margin-bottom: 20px; 654 | } 655 | 656 | nav > div { 657 | padding: 0 16px; 658 | height: 60px; 659 | font-size: 15px; 660 | } 661 | 662 | nav .nav-item a { 663 | padding: 0; 664 | } 665 | 666 | nav .nav-item a.active, 667 | nav .nav-item a:hover { 668 | background-color: transparent; 669 | } 670 | 671 | nav ul { 672 | gap: 20px; 673 | } 674 | 675 | section#hero { 676 | display: flex; 677 | flex-direction: column-reverse; 678 | } 679 | 680 | #hero .content #name { 681 | font-size: 36px; 682 | } 683 | 684 | #hero .content h2 { 685 | font-size: 18px; 686 | } 687 | 688 | #hero .content { 689 | padding: 0; 690 | } 691 | 692 | #hero .profile-photo { 693 | flex: 1; 694 | width: 200px; 695 | height: 200px; 696 | } 697 | 698 | .skill li { 699 | margin-bottom: 15px; 700 | } 701 | 702 | .skill strong { 703 | font-weight: 500; 704 | font-size: 13px; 705 | } 706 | 707 | .skill data { 708 | font-size: 13px; 709 | } 710 | 711 | #skills .statistics { 712 | display: flex; 713 | flex-direction: column-reverse; 714 | gap: 20px; 715 | } 716 | 717 | .statistics .chart { 718 | align-self: center; 719 | width: 250px; 720 | height: 250px; 721 | } 722 | } 723 | 724 | @media screen and (max-width: 550px) { 725 | .card .content h3 { 726 | color: #e4c466; 727 | font-size: 18px; 728 | margin-bottom: 8px; 729 | } 730 | 731 | #message-btn { 732 | width: 100%; 733 | justify-content: center; 734 | } 735 | 736 | .card { 737 | padding: 0; 738 | } 739 | 740 | .preview { 741 | aspect-ratio: 1/0.5; 742 | border-bottom-left-radius: 0; 743 | border-bottom-right-radius: 0; 744 | border-bottom: 1px solid #383838; 745 | margin: 1px; 746 | height: auto; 747 | } 748 | 749 | #skills .btn-wrapper { 750 | margin-top: 10px; 751 | gap: 8px; 752 | display: grid; 753 | grid-template-columns: repeat(3, 1fr); 754 | } 755 | 756 | #skills .btn-wrapper .btn { 757 | padding: 2.5px 9px; 758 | text-align: center; 759 | } 760 | } 761 | 762 | /* Apply styles only to touch screens */ 763 | @media (pointer: coarse) { 764 | html { 765 | touch-action: pan-x pan-y; /* Prevent zooming, but allow panning */ 766 | } 767 | } 768 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 29 | 33 | 34 | 35 | 36 | 37 | 41 | 45 | 49 | 50 | Abhijeet Singh Rajput | MERN Stack Developer 51 | 52 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 68 | 69 | 70 | 71 | 91 |
    92 | 93 | 94 | 95 | 96 |
    97 |
    98 |

    99 | Abhijeet Singh 100 |

    101 |

    MERN Stack Developer

    102 |
    103 |

    I build interactive web apps using

    104 | 105 | mongo db 106 | React, 108 | 109 | mongo db 110 | MongoDB, 112 | 113 | Express.js 114 | Express, 116 | 117 | Node.js 118 | Node.js 120 | and 121 | 122 | Next.js 123 | Next.js 125 |
    126 | 127 |
    128 | 129 | Resume / CV 130 | 131 |
    132 | 133 | 216 |
    217 |
    218 |
    219 | Abhijeet Singh Rajput 226 | Availbe for work status 232 |
    233 |
    234 |
    235 | 236 |
    237 |

    238 | 0 contributions in the last year 239 |

    240 |
    241 |
      242 |
        243 |
      • mon
        • 244 |
      • wed
        • 245 |
      • fri
        • 246 |
      247 |
      248 |
      249 |
      250 | less 251 | 252 | 253 | 254 | 255 | 256 | More 257 |
      258 |
      259 | 260 | 261 | 262 | 274 | 275 | 276 | 277 | 278 | 279 |
      280 |

      About

      281 |
      282 |
      283 | Abhijeet Singh Rajput 284 |
      285 | 286 |
      287 |

      288 | Hey! I’m Abhijeet Singh Rajput, a 289 | MERN stack developer who loves building smooth, fast, 290 | and enjoyable full-stack apps. I’ve worked on 291 | 15+ projects — from UI ideas to end-to-end products — 292 | always experimenting and adding my own touch. 293 |

      294 |

      295 | A bit of a DSA nerd 😅 — solved 750+ problems on 296 | LeetCode 299 | & 300 | GFG 304 | and ranked in the 305 | top 4.2% on 307 | LeetCode 311 | (2023). This helps me write clean, scalable code where great UX 312 | meets strong logic. 313 |

      314 |
      315 |
      316 | 317 |
      318 |

      Technologies & Tools

      319 |
      320 | 321 | react 322 | React.js 323 | 324 | 325 | 326 | tailwind css 327 | Tailwind 328 | 329 | 330 | 331 | shadcn 332 | Shadcn UI 333 | 334 | 335 | 336 | node 337 | Node.js 338 | 339 | 340 | next js 341 | Next.js 342 | 343 | 344 | express 345 | Express.js 346 | 347 | 348 | mongo db 349 | MongoDB 350 | 351 | 352 | git 353 | Git 354 | 355 | 356 | socket.io 357 | Socket IO 358 | 359 | 360 | postman 361 | Postman 362 | 363 | 364 | firebase 365 | Firebase 366 | 367 | 368 | figma 369 | Figma 370 | 371 |
      372 |
      373 |
      374 | 375 | 376 | 377 | 378 | 379 |
      380 |

      Education

      381 |
        382 |
      • 383 | Master of Computer Applications (MCA) 384 |

        385 | Graphic Era University, Dehradun
        386 | CGPA: 8.8/10
        387 | 2024 - 2026 (Currently pursuing) 388 |

        389 |
        • 390 |
      • 391 | Bachelor of Computer Applications (BCA) 392 |

        393 | Babasaheb Bhimrao Ambedkar Bihar University (BRABU), Bihar
        394 | Graduated with 76.03%
        395 | 2021-2024
        396 |

        397 |
        • 398 |
      • 399 | 12th Grade (Science Stream) 400 |

        401 | Bhagwan Singh College, Bihar
        402 | Scored 57.80%
        403 | 2020-2021
        404 |

        405 |
        • 406 |
      407 |
      408 | 409 | 410 | 411 | 412 | 413 |
      414 |

      Projects

      415 |
      416 |
      417 |
      418 |
      419 | Project Thumbnail 424 |
      425 |
      426 |

      GEU ERP Redesign

      427 |

      428 | A modern, fast, and student-friendly redesign of the GEU 429 | Legacy Portal with optimized UI, faster navigation, and easy 430 | access to academics, attendance, results, and more — now 40% 431 | faster. 432 |

      433 | 434 |
      435 |
      436 | Next JS 441 | Node JS 446 | Typescript 451 | Tailwind CSS 456 | Shadcn UI 461 |
      462 |
      463 | 464 |
      465 | 471 | Github Icon 475 | Github 482 | Live Link 486 | demo 488 |
      489 |
      490 |
      491 |
      492 | 493 |
      494 |
      495 |
      496 | Project Thumbnail 501 |
      502 |
      503 |

      Notehub

      504 |

      505 | A clean and collaborative note-management platform to write, 506 | organize, and share notes. Supports smart formatting, LaTeX, 507 | real-time collaboration, and a distraction-free UI. 508 |

      509 | 510 |
      511 |
      512 | React JS 517 | Express JS 522 | Node JS 527 | JavaScript 532 | Tailwind CSS 537 | Socket IO 542 | Shadcn UI 547 | Mongo DB 552 |
      553 |
      554 | 555 |
      556 | 562 | Github Icon 566 | Github 573 | Live Link 577 | demo 579 |
      580 |
      581 |
      582 |
      583 | 584 |
      585 |
      586 |
      587 | Project Thumbnail 592 |
      593 |
      594 |

      Chess Engine

      595 |

      596 | A strong chess engine built with advanced algorithms capable 597 | of defeating experienced players. Features strategic move 598 | evaluation, pruning, and smart decision-making. 599 |

      600 | 601 |
      602 |
      603 | HTML 5 608 | CSS 609 | JavaScript 614 |
      615 |
      616 | 617 |
      618 | 624 | Github Icon 628 | Github 635 | Live Link 639 | demo 641 |
      642 |
      643 |
      644 |
      645 | 646 |
      647 |
      648 |
      649 | Project Thumbnail 654 |
      655 |
      656 |

      Chess Engine Version2.1 (C++)

      657 |

      658 | An enhanced C++ chess engine powered by bitboards, alpha-beta 659 | pruning, and custom heuristics — delivering competitive 660 | ELO-level performance. 661 |

      662 | 663 |
      664 |
      665 | JavaScript 670 |
      671 |
      672 | 673 |
      674 | 680 | Github Icon 684 | Github 686 |
      687 |
      688 |
      689 |
      690 | 691 |
      692 |
      693 |
      694 | Project Thumbnail 699 |
      700 |
      701 |

      Path Finder Visualizer

      702 |

      703 | An interactive visualizer that demonstrates popular 704 | pathfinding algorithms like A*, BFS, DFS, and Dijkstra in 705 | real-time for a clearer understanding of how they work. 706 |

      707 | 708 |
      709 |
      710 | HTML 5 715 | CSS 716 | JavaScript 721 |
      722 |
      723 | 724 |
      725 | 731 | Github Icon 735 | Github 742 | Live Link 746 | tutorial 753 | Live Link 757 | demo 759 |
      760 |
      761 |
      762 |
      763 | 764 |
      765 |
      766 |
      767 | Project Thumbnail 772 |
      773 |
      774 |

      Sorting Simulator

      775 |

      776 | A real-time visualization tool to learn how sorting algorithms 777 | work, including Bubble, Selection, Insertion, Merge, and Quick 778 | Sort — with step-by-step animations. 779 |

      780 | 781 |
      782 |
      783 | HTML 5 788 | CSS 789 | JavaScript 794 |
      795 |
      796 | 797 |
      798 | 804 | Github Icon 808 | Github 815 | Live Link 819 | demo 821 |
      822 |
      823 |
      824 |
      825 | 826 |
      827 |
      828 |
      829 | Project Thumbnail 834 |
      835 |
      836 |

      Whisper

      837 |

      838 | A fast and secure real-time chat application with typing 839 | indicators, live messaging, authentication, and a smooth UI — 840 | built using the MERN stack. 841 |

      842 | 843 |
      844 |
      845 | React JS 850 | Express JS 855 | Node JS 860 | JavaScript 865 | Tailwind CSS 870 | Socket IO 875 | Mongo DB 880 |
      881 |
      882 | 883 |
      884 | 890 | Github Icon 894 | Github 901 | Live Link 905 | demo 907 |
      908 |
      909 |
      910 |
      911 | 912 |
      913 |
      914 |
      915 | Project Thumbnail 920 |
      921 |
      922 |

      My Portfolio

      923 |

      924 | A personal developer portfolio showcasing my skills, 925 | experience, and featured projects — built with a clean and 926 | modern UI for seamless navigation. 927 |

      928 | 929 |
      930 |
      931 | HTML 5 936 | CSS 937 | JavaScript 942 |
      943 |
      944 | 945 |
      946 | 952 | Github Icon 956 | Github 963 | Live Link 967 | demo 969 |
      970 |
      971 |
      972 |
      973 | 974 |
      975 |
      976 |
      977 | Project Thumbnail 982 |
      983 |
      984 |

      Num Pie

      985 |

      986 | A smart scientific equation solver that evaluates complex 987 | expressions instantly with an intuitive UI and efficient 988 | calculation engine. 989 |

      990 | 991 |
      992 |
      993 | HTML 5 998 | CSS 999 | JavaScript 1004 |
      1005 |
      1006 | 1007 |
      1008 | 1014 | Github Icon 1018 | Github 1025 | Live Link 1029 | demo 1031 |
      1032 |
      1033 |
      1034 |
      1035 | 1036 |
      1037 |
      1038 |
      1039 | Project Thumbnail 1044 |
      1045 |
      1046 |

      TypingGuru

      1047 |

      1048 | A typing speed trainer designed to improve accuracy and WPM 1049 | with engaging practice sessions, performance analytics, and 1050 | responsive design. 1051 |

      1052 | 1053 |
      1054 |
      1055 | HTML 5 1060 | CSS 1061 | JavaScript 1066 |
      1067 |
      1068 | 1069 |
      1070 | 1076 | Github Icon 1080 | Github 1087 | Live Link 1091 | demo 1093 |
      1094 |
      1095 |
      1096 |
      1097 | 1098 |
      1099 |
      1100 |
      1101 | Project Thumbnail 1106 |
      1107 |
      1108 |

      Snake Game

      1109 |

      1110 | A fun, nostalgic version of the classic Snake Game with smooth 1111 | controls, colorful UI, and score tracking for an enjoyable 1112 | gaming experience. 1113 |

      1114 | 1115 |
      1116 |
      1117 | HTML 5 1122 | CSS 1123 | JavaScript 1128 |
      1129 |
      1130 | 1131 |
      1132 | 1138 | Github Icon 1142 | Github 1149 | Live Link 1153 | demo 1155 |
      1156 |
      1157 |
      1158 |
      1159 |
      1160 | 1161 |
      Show All Projects
      1162 |
      1163 | 1164 | 1165 | 1166 | 1167 |
      1168 |

      My DSA Skills

      1169 |
      1170 |
      1171 |
      1172 |
        1173 |
        1174 | 1175 |
        1176 |
        1177 | 1178 |
        1179 |
        1183 | Fundamental 1184 |
        1185 |
        1186 | Intermediate 1187 |
        1188 |
        1189 | Advanced 1190 |
        1191 |
        1192 |
        1193 |
        1194 |
        1195 | 1196 | 1197 | 1198 | 1199 |
        1200 |

        Contact

        1201 |
        1202 | 1209 | 1216 | 1221 |
        1222 | 1232 |
        1233 | 1234 | 1235 |
        1236 |
        1237 |
        1238 |
        1239 |
        1240 |
        1241 |
        1242 | 1243 | 1244 | 1245 | 1262 | 1263 | 1264 | 1265 | 1266 | 1267 | 1268 | 1269 | --------------------------------------------------------------------------------