@Shambhavi

DEVLOG #10!!!!!!
I’m ready to ship!!!!!
I created a music player that stays on the website everywhere. It contains a Javascript button that will start the music, and pause it. I also updated my README with all of the features that I have worked hard to add on my website. So excited to ship! Here is my music player!

DEVLOG #10!!!

Yayyyyy!!!!!! I feel like I actually accomplished a lot in these 2-ish hours!

I struggled with some features, but I was able to do it faster because I now am a little bit familiar with the basics of CSS and HTML. Not JS though. I used very little AI to guide me through the process, and I am confused why my Hackatime Dashboard says I used AI, which I really didn’t. I didn’t use it to code - I used it to explain to me how some things worked.

NEW FEATURES:

• An accomplishments section with a marquee that pauses when the user hovers over it, which looks really neat
• A contact section with my email and github accounts
• I spaced out the sections so the anchor navbar scrolls to each section without other sections peeking in and distracting
• Figured out why the blur effect on the marquee was not working
• Started working on some of the color schemes for dark mode

NEXT STEPS:

• Complete dark mode scheme
• Add some cute arrows here and there helping the viewer along the website
• SHIPPING!!!

Please take a look at some pictures as usual! :)

DEVLOG #9

HIIII!!!!!!!!! I am actually so mad…upset, really. The thing is, I coded a simple slider for my achievements section, and now it disappeared! Well, at least I will show you some of the changes that I made. I think I am close to shipping it, but I need to finish the achievements section and the contacts section.

FEATURES:

1. Decided to center the cards on the website to make it look neater
2. Completed the art modal with overlays over each picture explaining how I made it
3. Added some Projects cards - when you hover over it, some links pop up, like to my websites

Basically, I feel like I didn’t get much done. One day, I spent an hour working on the slider, but then it didn’t save. Then, I watched a YouTube video on how to simply create a slider which was looking really nice, but when I opened my website, it didn’t save again. Huh. It’s annoying, but hopefully I will figure it out.

Below are some fun pictures about my website:

DEVLOG #8

Hi again! I haven’t worked on this project for a couple days since school started, so I decided to post a devlog at least for the hours I had done last week. In like 3 or 4 hours, I think I will be done with this personal website and then start my next project!!!

Before on my first website, I had an about section with buttons below it for each interest, leading to a separate page on the same website. I wanted to make it more professional, so I removed the buttons and decided to style some cards with information on it.

THINGS I ADDED:

1. An ‘About Me’ glass card which expands when hovered over it

2. In the ‘Interests’ section, four glass cards, which when hovered, open up a modal with more detailed information and playlists, reviews, recommendations, pictures, etc.

3. A close button on the modal to close it, but the user can also click on the darkened window to close out of the modal

4. Added some more travel recommendations

5. A more subtle topographic background for the dark mode

6. Changed the overall font of the text on the navbar and the text on the glass cards

Extra info: I had some trouble positioning the glass cards, but for now I think it looks all right.

NEXT STEPS:

1. Add something next to the About Me glass card - maybe a picture or something? (I would love recommendations plz)

2. Add a button that appears right after scrolling down on the modals that brings the user back to the top of the modal to close out of it if a user does not want or know how to exit by clicking the window

3. Add the other sections

4. Position each section in each viewport because I am having a lot of trouble separating them. I honestly don’t know how to do that, so I think that will take a lot of time.

Below, I have attached some pics - and I’m sorry, I forgot to add a picture of the website in dark mode!

DEVLOG #7

HI everyone!!! So many updates for you!!!!!

Since my first ship, I decided to make this personal website into a more professional one with cooler features. Don’t worry though, I have my first website saved in a different codespace!

I have spent these 8 hours doing a lot of stuff! I started off with created a topographic background. I struggled to find the right image in Canva which would repeat correctly and wouldn’t look ‘broken.’ Next, I worked on the auto typing text which sort of describes me by saying “I am a musician, I am a coder, I am learning,” stuff like that. I created this awesome effect by following a YouTube video. I also added a moving gradient effect over my name and yes, I removed the banner with the scrabble tiles to create this new home page. After that, I spent a lot of time creating the sticky navbar. It was so confusing, especially because I wanted it to look perfect. In the end I also added a blur effect. Using another tutorial, I managed to create anchor links, which I had noticed on a couple of really good personal websites. Lastly, I designed a custom scrollbar, which I think really adds a nice touch. Right now, I am working on the dark mode button styling, and actually making it work. I removed all of the buttons and am working on to create it more professionally.

If anyone wants the link to the old website, let me know!

To make these changes, I used AI to help me debug the very confusing codes. Remember, I am still kind of new to HTML and CSS. I also tried learning some JavaScript from W3 Schools, but it does not make sense. If anyone knows a good resource to learn js, please tell me.

Below, as usual, are a couple of pictures of my progress:

LAST DEVLOG (#6)

I’m DONE!!!!!!!!!!!!!!!!!!

I just fixed the buttons on the home page, using a little bit of AI, but I definitely made sure to understand each line of code it fixed. I also added a quote and footer at the bottom of the website because there was a lot of blank space that I didn’t know how to get rid of, so I decided to add content.

Well, I hope you all like my website!

DEVLOG #5
Hi again!

So I got all of the pages about my interests done. After my first ship, I plan on kind of making them into a blog. I will write a lot more reviews on a lot more books on the books page and more reviews on the traveling page for more places that I’ve been to.

My last step is to position the buttons on the home page which IS NOT WORKING!!! I think my margins are way too large and I have other large elements…and it’s still not working. Well, if anyone has any suggestions, that’d be great!

Here are the pages:

DEVLOG #4!!!
I got a lot done! I added the buttons about my interests at the bottom of the home page. The buttons lead to other pages on the same website with information of their own. Right now, I am done with one out of four pages, but now that I know the process, hopefully the other pages will go faster.

I also decided agains adding Javascript because learning that would take a lot of time.

On my traveling page, I have parallax scrolling, some images and text, and a button bringing the user back to the home page.

Challenges included the margins for my traveling page, mainly because I wanted to wrap the text around the images. Also, I sort of accidentally deleted an html file, so it took some time trying to get that back.

Next time, I should have all my pages done and move the buttons up…and be ready to ship!

Take a look at some pictures of my website:

DEVLOG #3
Hello, again!
I spent a lot of time learning CSS and arranging elements. I used AI a little bit to understand how to add graphics from Canva onto my website…and I also realized how to actually add commits into my codespace. I know I already started the website, but moving forward I will definitely remember to commit frequently!🤣 So, I added an AI generated image of myself with cool effects (if you hover the animation pauses) and a banner. I spent a lot of time on this because the animation stuff got really confusing.

The challenges started happening with the margins. I think I set the numbers too big and it caused the images to be shifted down, so I don’t think I will mess with it more and just leave it. Since it’s my first time coding, this will be a project where I learn things. A lot of time was spent playing around with the banner.

Soon, I hope to add little buttons at the bottom bringing the user to pages that talk about my hobbies. I plan to add cool scrolling, picture carousels, etc.

Below are a couple of screenshots - sorry I couldn’t add a video!

DEVLOG #2
Hi!
Today I mainly focused on learning CSS basics. I spaced the text on the website page, changed fonts, chose colors that I thought looked nice, and added some cool effects.

The challenge was adding a new font from Google Fonts into my codespace. For a while, I had put it in my CSS file, and when I pasted it into my HTML file, it worked!

The next time I work I hope to start adding graphics onto my page.

DEVLOG #1
Hello!!!!
I finally started working on my personal website! I am completely new to coding, and it was definitely challenging trying to learn HTML! Today I mainly used W3 schools to understand the basics, and I started putting some content on the page. I created an HTML and CSS file. In fact, I planned my website out on paper because I wanted to sort of visualize how I wanted it to turn out.

I actually changed the color of the text in HTML when I realized I should probably put it in my CSS file. I removed those lines of code and I will most likely do that next time.

Next time I work on the website, I want to change the text color, font, and align the text. I may also research how to add some graphics onto the website as images.