You are browsing as a guest. Sign up (or log in) to start making projects!

My own site!

By @manayp

  • 3 Devlogs
  • 3 Total hours

I developed a personalized website that highlights my talents as a musician and a lover of science. The website will have four interactive games such as a playable Bansuri flute that produces sound through the use of the Web Audio API, science quiz, memory matching, and a clicker game. In addition to the games, your website has pages on "About Me," "Hobbies," "Projects," "Skills," and "Experience" that have a professional timeline. my website also comes with dark mode that animates smoothly, particle effects that float, fun fact cards that appear when you click them, and an Easter egg that is found in the code. It is responsive, and compatible with all types of devices, and has a light blue gradient theme that suits my personality. All my website's elements have been created in one HTML file that has both CSS and JavaScript.

Source
Open comments for this post

@manayp on My own site!

43m 31s logged

I reworked the CSS because the last time looked like every other AI website so I put a touch of me in it. And then using netlify I hosted it so other people could try it.

0
0
6
Ship #1

@manayp on My own site!

I made my own creative personal website with four games (flute, science quiz, memory match and atom clicker), dark mode switch, animated fun facts cards, and portfolio. The hardest part for me was solving the CSS nesting problem of .particle, @keyframes floatUp, and responsive media queries in the wrong place inside the footer for dark mode. I am satisfied with Web Audio API use which allows me to create real sound for flute and for 3D flip animation in the fun facts cards which makes it really interactive for the user. To test the project one just needs to download and open it as HTML file or to start local HTTP server by command python3 -m http.server 8000 from terminal. Four games work offline and do not have any dependencies, dark mode works with localStorage and there is also an Easter egg (Konami code: up up down down left right left right b a) which rotates the whole page. Website is fully responsive and works perfect in mobile, tablet and desktop resolution with smooth animations and nice light blue gradient theme. CSS IS ADDED though it is integrated in the HTML and I tried to be as creative as I could and spent good time thinking. Overall I had a great time!

Try project → See source code →
Open comments for this post

@manayp on My own site!

55m 32s logged

I completed the project with a few design ideas from Claude and Chatgpt helped me write polished sentences for my project. After a total of around 4 hours of trial and error and around 2 hours of coding I final completed this project and I really had fun especially with Claude telling me about the sound system where I could play notes in the website so that was good. I came across a few challenges in coding but youtube helped, which is kinda crazy because I didnt think it would. And I even completed my read me and even though its not much it still includes everything. All I gotta do now is host it on netlify or something. Overall it was a great experience and VS CODE DID HELP A LOT.

0
0
4
Open comments for this post

@manayp on My own site!

59m 24s logged

I am combining my hobbies and interest into one interactive platform that conveys and represents my hobbies/interest in a fun engaging why and currently I am trying to write the HTML code and VS codes inbuilt helper is making sure my errors are not a problem, so currently I am like 60-70 percent and I am dedicated to finish it as soon as possible.

0
0
3

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…