From d319bc0adf2caf1b764d86f44d8ae3db27ad1df8 Mon Sep 17 00:00:00 2001 From: mahmoudalnkeeb Date: Wed, 8 May 2024 03:57:25 +0300 Subject: [PATCH] chore:add files --- README.md | 12 ++++++ index.html | 67 ++++++++++++++++++++++++++++++++ script.js | 72 +++++++++++++++++++++++++++++++++++ style.css | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 261 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..67c21c6 --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +# The-Repository + +Simple portfolio contains information about me and my socials + +## built with + +Nothing fancy just html, css and javascript. + +## todos + +- [ ] make the code better for future improvements !important. +- [ ] show a selected list of repositories from my github using github api. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b230ab9 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + Mahmoud Alnakeeb - Backend Developer + + + + + + + + +
+

Mahmoud Alnakeeb

+ Backend Developer +

+ Starting my backend developer journey in 2020, I immersed myself in + JavaScript and Node.js, cultivating a strong foundation. Since then, + I've embraced continuous learning, completing web development courses + and engaging in diverse projects. Venturing into Rust in 2024 was a + pivotal decision, broadening my skill set and igniting new passions. + Now, I'm on the lookout for exciting opportunities in backend + development where I can apply my expertise and contribute to + cutting-edge projects. Eager to embark on the next chapter of my + professional journey, I'm ready to tackle challenges and make meaningful + contributions. +

+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..84d8e8b --- /dev/null +++ b/script.js @@ -0,0 +1,72 @@ +/** + * @type {HTMLCanvasElement} + */ +const canvas = document.getElementById("background"); +const ctx = canvas.getContext("2d"); + +canvas.width = innerWidth; +canvas.height = innerHeight; + +document.addEventListener("resize", (e) => { + canvas.width = innerWidth; + canvas.height = innerHeight; +}); + +const mouse = { + x: null, + y: null, +}; + +addEventListener("mouseover", (e) => { + mouse.x = e.clientX; + mouse.y = e.clientY; +}); + +document.addEventListener("mousemove", (e) => { + mouse.x = e.clientX; + mouse.y = e.clientY; +}); + +class Cursor { + constructor(x, y) { + this.r = 30; + this.x = x; + this.y = y; + this.targetX = x; + this.targetY = y; + this.delay = 0.09; + } + + draw() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); + ctx.fillStyle = "#a29bfe"; + ctx.fill(); + ctx.closePath(); + } + + update() { + const dx = this.targetX - this.x; + const dy = this.targetY - this.y; + this.x += dx * this.delay; + this.y += dy * this.delay; + } + + setTargetPosition(x, y) { + this.targetX = x; + this.targetY = y; + } +} + +const cursor = new Cursor(mouse.x, mouse.y); + +function animate() { + requestAnimationFrame(animate); + ctx.clearRect(0, 0, canvas.width, canvas.height); + + cursor.setTargetPosition(mouse.x, mouse.y); + cursor.update(); + cursor.draw(); +} + +animate(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..dcc8750 --- /dev/null +++ b/style.css @@ -0,0 +1,110 @@ +*, +*::after, +*::before { + margin: 0; + border: 0; + outline: 0; + box-sizing: border-box; +} + +body { + font-family: "Ubuntu Mono", monospace; + font-weight: 400; + font-style: normal; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + background-color: #ecf0f1; + color: #202c38; +} + +main { + padding: 10px; + display: flex; + flex-direction: column; + gap: 20px; +} + +p { + max-width: 120ch; + line-height: 160%; + letter-spacing: 1px; +} + +ul { + display: flex; + list-style: none; + gap: 20px; + padding: 0; + flex-wrap: wrap; +} + +.role { + color: #6c5ce7; + font-size: 1.3em; + width: fit-content; + position: relative; +} +.role::before { + content: "@"; + position: absolute; + right: -25px; + top: 50%; + transform: translate(-50%, -50%); + color: #6c5ce7; + vertical-align: baseline; +} +.role::after { + content: ""; + position: absolute; + right: -27px; + top: 51%; + transform: translate(-50%, -50%); + background-color: #6c5ce7; + width: 0.25rem; + height: 2rem; + animation: blink 1s infinite; +} + +li a { + text-decoration: none; +} +li i { + font-size: 1.5em; +} + +.socials .fa-brands.fa-linkedin { + color: #0077b5; +} + +.socials .fa-brands.fa-square-github { + color: #181717; +} + +.socials .fa-solid.fa-envelope-open-text { + color: #e17055; +} +.socials .fa-solid.fa-file-alt { + color: #00b894; +} + +.socials li:hover i { + opacity: 0.7; +} + +#background { + z-index: -1; + position: absolute; +} + +@keyframes blink { + 0%, + 100% { + background-color: transparent; + } + 50% { + background-color: #6c5ce7; + } +}