@Lauren_hackalicious

Read.Me discretion. Zoom out your screen by 25% for a proper website viewing experience. If you don’t, unfortunately, elements will appear squished together. If I had more time this summer, I would create a more responsive layout. The picture linked to this devlog is the result of the website if it isn’t zoomed out enough for the proper viewing experience. I also had to replace all the videos on the project page with screenshots because the files were too large, over 100 MB, to push into a GitHub repository. This saddens me because it did make that page less static. PLEASE take the time to read the README.

Website complete…for now  I added music that plays automatically on the landing and projects page | I started and finished the About Me tab. It features a Linktree to all my socials. Beneath is a music player featuring my favorite songs from Olivia Rodrigo, Beabadoobee, KATSEYE, and Laufey. On the right, I briefly discuss my involvement at my school. I finished adding the captions to all my projects on the projects page. I decided to pause my progress on this website as school starts up for me, and I need to begin reviewing core subjects for my classes. I had fun creating this website and hope to continue working on it outside of Stardance.

About Me update: I only began structuring the layout of how I want my Linktree to appear in this section of the website. The styling is NOWHERE near complete, especially since there will be a lot more I place under the Linktree to talk about what I do in school that relates to STEM/Computer science. The koi fish image is actually a gif

Project page complete for now!! I worked tirelessly to complete this page today because school starts soon, and I won’t have much time to work on any more huge web projects until my next seasonal break. I added 5 of my completed summer projects and included the portfolio website because it’ll be my biggest project yet! I recorded a live demo of each project that automatically plays upon opening the page, so users can see what each website is about without reading the bio. I also attached the live link just in case users want to try out the website for themselves. (I really wish I could attach a video to this devlog, but Stardance isn’t working with me when it comes to the videos

Landing page complete!: | aligned an ocean gif with the update logs to keep the layout consistent (balanced). I added a spinning dolphin because it was so funny to me and fit the Frutiger Aero theme anyway, so I was like… why not? I FINALLY updated the navigation buttons on the side because they were looking pretty plain compared to the rest of the page. In the next devlog, I will have worked on the project. The dolphin IS spinning

I’ve been having issues posting a devlog today due to this error. I’m going to edit this devlog once this stops appearing on my screen. I can’t find the screenshot of the original update to my website, but I did fix the unevenness of the pixel background widget and updated the weather widget! Check out my most recent devlog to see the changes; I’m having issues uploading videos to Stardance devlogs.

Center section complete…for now 1. I added a GIF with a scenic pixel background to lessen the static feel of the area! I matched the banner with the update log for consistency. 2. I moved on to the right side of the container. It took about 30 minutes to figure out how to place items on the right side because the way I programmed the container didn’t account for the layout. I went back and forth between moving divs around and asking GitHub Copilot how to fix the issue. I concluded that creating a separate div within the container div, outside the “main” div, resolved the issue. 3. After debugging, I added a live clock (in military time) and inserted a weather widget.

Big big things todayyyy I finished customizing the welcome textbox by aligning the h1 tag to the left (horayy). I added an infinite carousel with things that I like/am interested in. The update log is primarily for future updates after I ship this portfolio and to keep up with the progress I make, even if it seems minimal. The Update log uses the CSS element “overflow: scroll”.

Changed the theme again lol 😭 I made my portfolio website Frutiger Aero because it’s bright and easier for me to style!! I had to delete my original code since it made customizing the content inside the main container difficult! My fav thing about this version is the banner at the top of the main container.

HUGE REVAMP I was inspired by early 2000s-themed websites and redesigned my portfolio to show more of my personality. The old version was too corporate for me. In the new design, I am incorporating themes of My Little Pony, one of my childhood shows! It is pretty bare-bones right now. To get the layout, I used Figma! I recommend this website as it really helps get the ball rolling.

The colors are all over the place because I’m still trying to figure out how exactly I want everything placed. AKA, these are not the final colors/fonts/style.

Wordle Complete I added the keyboard to the bottom of the screen, similar to the original Wordle game! I kept the styling of the keyboard similar to the Wordle grid! I feel this Wordle game came out really well.

• I learned how to make a web page more interesting with borders complemented by cool glowing effects.
• The keyboard at the bottom was tricky to figure out because there would be 4/5 rows instead of two! Turns out, all I had to do was disable flexwrap on the keyboard. 😅
• I added a README that describes everything about the game and how to play! It’s a replica of Wordle, but infinite.
• To play over and over, refresh the page
• I learned a lot more about JavaScript logic and functions when building this project!
• I want you all to fork this code and build your own version of Wordle! That would be cool to see

** Consider all bugs FIXED. ** I will address the elephant in the room: tile colors. The base tiles are an off-black; incorrect letters are gray; correct letters in the incorrect spot have a slight green undertone, and correct letters are red! I will change the slightly green tiles if it becomes too confusing to distinguish the two. Bugs that were fixed 1. Code checks for invalid words. 2. Users cannot fill out the Wordle with one word, as it is considered an invalid input. 3. Implemented an error text when a user enters an invalid answer. Visual update 1. I changed the burgundy background to black. 2. Revamped the tile colors and added a subtle glow around each one. 3. I added a gothic font to the title, error message, and letter in the Wordle grid.

I’m back, peopleee (No more hiatuses). I had an internship this summer, so I couldn’t code every day as I’d liked to, but I’m back for real this time. I started creating a rough draft of a Wordle game inspired by AMC’s hit series, Interview With The Vampire. If you haven’t watched it yet, I profoundly recommend that you do so!! Anyways, I said rough draft because the game itself works, but there are some bugs I need to work out, as displayed in the attached images; in the actual Wordle game, when a player guesses the letter(s) in the correct spot, the rest of the duplicate letters should be greyed out, not yellow; my code doesn’t check for valid word inputs. Once I fix these bugs, I really want to hone in on the CSS styling to give off vampirey vibes, yk? If you watched the show, you’d know what I mean. (If this is creating FOMO, good, that means you should watch the show)

I’M BACKKK All I’ve been seeing on Instagram is “pomodoro this” and”pomodoro that”, so I’ve decided to make my very OWNNN pomodoro timer. It is plain right now as I’m figuring out the layout and structure of the clock. I’ll add this to my portfolio project for sureee. The actual update: I created the timer, added the basic start, pause, and reset buttons, and a banner that will display when the timer ends. I’ve been playing around with the @Keyframes element inside CSS, so the glowing ring around the timer is actually slowly pulsing. How cool is that?? When I implement the JavaScript function, I’m thinking about making the color change based on whether the timer is paused or resumed. When it’s paused, the ring will turn red, and when it’s ticking, it’ll be green. Additional info I would like for people to fork my GitHub repo code and customize it to their liking when I’m finished. I’d love to see what the community comes up with!!

1st Devlog I decided it was finally time to create a webpage dedicated to storing all my projects! As an aspiring computer science major, I feel this is crucial to have on deck. I played around with how I wanted things to be laid out and ended up with this design. Is it plain? Yes. Is it also straight to the point? Also yes. This will be amongst my shorter projects since all I need to do is fill out the template I created in HTML.

Ship 1!! I added all the tracks to the album, CINEMA, yay. I wanted the playlist to fit the theme of the album itself, so I made a few Google searches for what CSS hex codes would match up well. After my brief research, this is the result. I also added backgrounds to both of the music players because the black background felt too empty. The styling definitely leveled it up. I updated the music player coloring for the Submarine music player because it felt too basic compared to CINEMA. In my second ship, I plan to add The Marías’ third studio album, so stay tuned! 👀

Update: I added the CINEMA music player ^_^. I absolutely love the linear color gradient I have going on on this music player. I’m thinking about changing the font to a more retro one tbh. All I have to do next is add the music to this file, and I’ll be done! Problem I don’t know how to post a full image of the music player, which is why I have to take two screenshots.

Update Lovely CSS style revamp to the home page of my music player! I customized each album’s background to fit the album’s theme :). I also made the actual music player icon spin. I’m not sure what the deal is with videos on Stardance; I can never see uploaded videos on the website. Hopefully, everyone viewing this devlog can interact with the video to see my update in action!