Devlog #4

So I tried to ship my project, but I kept getting rejected on the basis that it is AI generated, when I have used 0 AI. I have no idea where they are finding AI use, but I decided to disconnect it from the mission because I was not going to waste my time just for 60 stardust. So a lot of time was just spent tinkering around with code seeing if they would accept it, but no luck, so I’m just going to continue on, add some new features, and hope that that gets accepted.

Current Progress

There was not much progress during this block, it was mainly just adjusting code or typing small lines. I got feedback saying that the CSS looked AI generated, so I should change that. But as I started to, I just felt so sad to see the progress I made go away, so I decided to just keep working on this and continue from there. I added one more link as a shortcut and that is for gmail.

Next Steps

Now its time to really take this project to the max. One thing that I really want to tinker around with is Three.js, and adding interactive 3D models into my webpage. It doesn’t even have to be interactive, it just has to have a 3D effect. I am thinking a space scene. So that is the next goal. I am still thinking of some ideas. But I am done with the mission, and I didn’t use any AI, so I am just going to continue with this.

Devlog #3

I am ready to ship my first version of this project. I have added an animated gradient background to the webpage. I have also added the dynamic features. So the gradient color and the text color will change color based on the time of day. I had to use just a bit of JS for this, but it was easy to figure out as JS has the ability to pull the time by itself.

Current Progress

I first worked on making the looping gradient. I wanted it to be at -31 degrees, but the looping was not working. I tried a lot of things, like increasing the size of the background, the keyframes of the animation, the width of the keyframes, and reversing the gradient colors. But nothing worked, so I decided to keep it just going horizontally as I had done that before and was able to quickly make.

I then moved to JS, in which I made a const for the hour. I discovered that JS can automatically pull the time of day from your device, so that was super convenient. I am actually learning JS in school, so I was able to add classes to the body depending on the time of day using if and else if statements. So it wasn’t too hard, and I got a really nice result out of it.

Next Steps

I am planning to ship next just so I can complete this mission. I already took way too many hours (only for 60 stardust). But I will for sure keep adding to this project. I want to connect it to my school schedule so that I can track my classes. I also want to include some productivity widgets, so I can remember things and get some stuff done in my life. But I will ship for now and continue working on it later.

Below you can see pictures of all the gradient backgrounds.

Challenge: try to guess what time of day they are each for.

Devlog #2

During this block, I spent some time styling the website in CSS. I wanted it to start looking a bit more like a new tab page before I started in JS. I positioned my text in the middle, and made my shortcuts look nicer. Basically, it was a major styling block.

Current Progress

For now, I decided to keep only a title and some shortcuts just to keep the design simple. I want to then move onto JS to implement a dynamic feature into my website which will change with the time. So the goal is a minimalist style for now.

The styling overall was not too hard. I had already arranged by classes nicely in HTML, so I had to move them around. I finally learned the secrets of the display: flex; rule, and how to use it to center things properly in CSS. So I got that working and then styled my icons. I applied some neat hover effects to them. At first I was planning to have a label text to label the shortcuts, but I already knew what they all were, so I decided to keep the text out, and if I wanted to I could add it again later.

Next Steps

The next thing that I want to do is make the background a moving gradient, but not too fast or bright, because that will be distracting. The main thing I want to add is a dynamic aspect. So I want to make it so that the background color will change with the time of day. Pretty basic, but that’s all I want to do before the inital ship.

Below you can see a image of the page after styling.

Devlog #1

I am officially starting my next project! In this project, I am planning to make a dynamic page that will show up when I open a new tab, replacing the regular GOOGLE one. For the first iteration, I am planning on making a simple page that has a large greeting text on it, but it’s background color will change depending on the time of day. I will probably change some stuff after that, but that’s the plan right now for my first ship so I can complete the mission.

Current Progress

So I started with the bare minimum. Because the site for now will not have much content on it, the HTML was pretty simple. I added a h1 tag with my title in it, and I decided that I will add buttons as shortcuts for some links that I use everyday. So I just added some icons that are linked to the sites. I also started with some super basic CSS, like just reseting margins, and starting to change the background color. It looks kinda bad right now, but I will make it look better.

Next Steps

My next steps are just to style it so it actually looks like a new tab page. I am not planning to add a search bar in there, because I don’t use the middle search bar, I only use the one on top, so I don’t want to take up unneccessary space. I want to finish styling in CSS before moving onto JS to set the dynamic changes.

Below is a image of the very rough draft with the icons, labels, and title. (It looks bad right now, but it will look better in the next devlog.)

Devlog # 17

This is my final devlog before I ship! I wanted to add a picture of myself in the website so I tried to find a way to do that. I decided that I will make it so that the about me card will flip when hovered over and on the other side will be my image. I thought it would be pretty simple, so I began working on it at 12 last night thinking I could finished it in about 30 minutes. Turns out I was wrong. It took me more than two hours just to get a card to flip and show my image. It was a pain, but the end result looks really neat.

Current Progress

To make the flip card, I had to restyle the entire about me section. I used a W3Schools tutorial, but i couldn’t end up working well with it, so then I turned to AI for debugging, because I had so many div layers for that card, and then I finally styled it to look good. The effect looks really good though. As well, I decided to publish everything to Github as well now because I hadn’t published anything for the past couple of days so yeah. Then I found a problem with the images not getting pulled correctly, so then I had to transfer all of those to a public/ folder and then adjust the file paths for all of them in my code, and then reload and redeploy like a bajillion times. So it was a lengthy process, but I finally got it working publically,

Next Steps

My next step is to ship. I really hope I get rated good because I want a pebble time 2. After this I will begin to work on my next project for the remainder of the event, which is a new tab page. After that, I am done with Stardance, as I also have a lot of school work now. So I will ship soon!!

Devlog #16

So I decided to implement some feedback that I got from the last ship. One piece of this was adding my actual certificates into the website, so people could actually view them in the webpage. So I took some time to scan all my certificates. Creating the links wasn’t quite hard, and at first I thought about just letting it open in a new tab, but then I decided to create a modal just to enhance the UX.

Current Progress

I decided to add all my certificates into the webpage, just to add a layer of validity to my work. The first part was finding all of the certificates. Whatever I had, I added them to my GitHub repo, and just linked the relative paths in the webpage. The ones which I had online, I just drag and dropped into the repo, while the physical ones I had to scan and then add in. So that took a while, but wasn’t too tedious of a process. After that, I just made a “View ->” sign that appears when you hover over the card, and that is actually a link to the image. Then I decided to make a modal. I realized it actually isn’t too hard, but the JS logic is a but complicated. I styled the modal in CSS, and then just added a .open class to it which was activated when you click the link. So I’m starting to understand JS logic, the only thing that I have trouble with now is writing like proper syntax, as I still have trouble with writing the correct syntax, and that can cause some problems. So then I styled how the image looks in the modal. At first I though about add ing a X to close the modal, but then I made it so then if you press outside the image, then the modal disappears. Some of my UCMAS achievements do not have images attached to them because I couldn’t find actualy certificates for them, so I might take pictures of my trophies to put there, but I haven’t got to that yet, and I don’t want to put low-quality images. So those are still empty, but almost everything else is filled, so now you can go and view those.

Next Steps

I literally don’t have anything left to do on this, so I think the next step is to just ship. I will take a break from this project and begin to work on my next one, which will be making a cool new tab page from my browser. So expect a ship soon. If anyone has any suggestions on something to add, you can let me know!

Below is an image of my stardance certificate shown in the modal on the page.

Devlog #15

This will be a fairly short devlog. I spent this block adding media queries to my CSS code because I opened the website on my phone, and it just looked so wrong to me, so I spent some time doing that. I figured out a great way to simulate a phone screen in my browser using DevTools so I was able to adjust everything through that.

Current Progress

The plan was that I was going to do media queries at first, but I thought it would be too complicated so I held it off. Now I was kinda forced to after seeing how bad the webpage looked on a phone screen. I realized you just have to make on CSS rule for media queries using media (max-width: 768px) {}. I decided to use 768px because that is like a standard width, but I mainly tested it on 400px width. After that, I opened two windows with my code and as I went through it, I would add a media query rule in the other window. So I conquered my fear of media queries, and addressed that issue.

Next Steps

I am looking for things to do. One piece of feedback that I got was that my cards had hover effects that made them look like buttons, but had no button effects, so it was kinda misleading. So to fix this, I’m thinking of like scanning my certificates and uploading them as pictures that people can view in the browser. So that’s my next step. To accompany this, I might also do like a redesign of the website, like just adjusting some of the features. Also, I’m thinking of adding a dark mode/light mode feature on it.

Below is a quick video of the site on a device with a width of 400px.

Devlog #14

So I started working on it further before my project even got fully rated, so this is my first devlog after shipping my portfolio! During this block, I just added some small features that just overall polished my site a bit more. A lot of these features were added in JS, and I think I actually am starting to get the hang of JS in the way that I actually am starting to understand how to identify objects using const and like how to select them using document.querySelector. So I think I am starting to learn, and just working with these little features just got me a little more familar with JS. I also got the hang of CSS animations, as before I had a little trouble understanding keyframes, but now it makes sense, so it was a good block.

Current Progress

I added three main things to my website, each of which use JS in them, and I will explain how.

The first thing that I added was a scroll progress bar at the top. I really wanted to add this onto website, as I really liked seeing them on other websites, and I styled it to match my theme, and it just looks super good. I make a horizontal bar in my navbar for this, and it has a rainbow gradient. Basically, JS detects where the person is at the website, and just adjusts the scale based on that to show the bar. At first, I made it so it would expand as I scrolled, but then the rainbow was like squished at the beginning, and then I adjusted it so that it actually revealed the bar as I scrolled down, so like same idea but just applied to a different thing. I looks super cool now.

The next thing that I added was a loading page. I tried to look into some videos for this, but I ended up making a super simple gradient ring that was animated (again to spin a rainbow). For this, I like made a loader page, which covered the whole view. In it, I made a circle which had a rainbow conic gradient, and then just animated it in CSS to rotate to 360 degrees over the course of like 1.2 seconds. I then used JS to add a class which made the loader disappear and like unresponsive to any pointer controls when the site finished loading. It also looks super good and totally matches the vibe of the site. So yeah, super happy with that.

The last thing that I added was like a scroll fade up reveal effect to almost everything in my site, like the cards and the headings and everything. Again, this was a pretty simple trick that I used. Basically you set the object a set number of pixels (like I used 30px) down on the Y axis and turn the opacity down, and then when JS detects the object as the person scrolls, it just moves it up to 0px on the Y axis and goes to full opacity, and it ends up looking super sleek. That little touch just upped the whole website. I was actually looking to add this feature in the beginning of my site, but I never got to it mainly because it used JS, so now I took the chance to add it in.

A lot of these features were ones that I saw in like cool websites. So like I’m always on the lookout for cool features, and these were some that I thought really made a website look more polished, and I realized that they are not actually that hard to build once you understand the core concept. Through these I really got better in JS, and upped my skills in CSS, so it was a good block.

Next Steps

I really do not have anything left to add in this project. Like I even added extra stuff. Please, if you guys have any suggestions, comment them so I can implement them. I will attach a video of my site so you guys can see what its like. One thing I might consider adding is like a easter egg thing or some like sequence or action that will generate a cool surprise. I have to still think about that. But right now I have almost nothing left to do. I actually might ship this again just to get the hours counted in.

Below you can see the loading and the scroll fade up reveal and the scroll progress bar at the top.

Devlog #13 (Last Devlog Before Ship)

I am finally done with my website.Please read the NEXT STEPS section of this devlog as I have favour to ask you guys. I spent 7 hours of my life building a shader background for my website, but it totally paid off in the end because now I have a really cool, interactive, animated gradient background. I used GLSL to write a shader, and WebGL and Three.js to implement it into my website. I used a video tutorial and some AI debugging to achieve the effect, but it really was a learning process, as I had to install all the tools for it and then work with those, so I learned how to use those. Because of this, I also spent some time updating my README.

Current Progress

First of all, it took me a really long time to find a good tutorial to make a background, because I really wanted an animated one to show my blur effect and really add a pop to my website. To acheive a shader background I watched a video tutorial from Codegrid, which explained everything really nicely and was quite quick, so I was able to write the code. After though, the background didn’t quite show, so then I used the help of AI to help debug the code and get it working. After I finally got it to work, I spent some time adjusting colors, and brush strength and size, and then distortion amount and fluid decay and all of that stuff until I found the perfect values for a super good looking background. Overall, it was definately worth the time and added a really nice touch to my webpage.

I also updated by README, because now the user will need to install some dependencies for this webpage because of the addition of Three.js and everything. So I updated the README to include proper instructions for that and so it explained some more features of my website. I really polished it up, because it was kinda messy before, so I got it ready for a ship.

I also changed my cursor one last time. What I had before was a <div> element in HTML following my actual cursor using mousemove in JS, and my actual cursor was hidden in CSS. However, it was like lagging behind and that was starting to show on my new background. So instead, I just made my cursor a little white dot in CSS by liking making a svg file and linking it to the cursor. It just improved user interaction a lot be removing any lag between an following element and the actual cursor. There is still the feature where it will turn bigger and light purple when hovering over a link.

Next Steps

My next step is to ship!!! However, I have to ask you guys for something. I need some color suggestions for my background. I got a nice one right now that is like dark purplish, but I want your guys’ suggestions on what type of gradient I should make. I can put 4 colors into the gradient. You can use the attached video below to view how the shader looks on the hero page. I do have glass cards, so I don’t want something too light, but it could make a nice addition in a dark gradient. So please put some suggestions in the comments!!! Thank you!!!

I will ship right after this, but I will for sure try to look over some color suggestions and experiment around with them. I might try to use one before I ship the final version of the website, so please put some suggestions. Expect a ship really soon.

Devlog #12

This block was mainly dedicated towards making my site look a lot more aesthetic. I spent over 4 hours just tinkering with JS and fonts and color combos and everything, trying to find the perfect combos and fonts that looked super good. I am overall very happy with the progress that I made in this amount of time. At first I thought that the site looked good even without any styling because of my color gradients and all of that, but I just realized how much better it is with like better fonts, and like the small things, like moving gradients instead of static ones. So this whole block was just dedicated to making my site look better.

Current Progress

The first thing that I did was change my cursor. For this I had to use JS. I changed the cursor to just be like a little white dot with a nice glow around it, and then when it hovers over like a link, then it gets a bit bigger and turns into a light purple color. In JS, I figured out how to like grab an element from CSS, and then use like states, like mousemove to have like a specific action, and then like have the dot follow my actual cursor, but super close so it seems like that is the cursor. And then I hid my actual mouse to really sell the illusion. For the hover thing, I created a hover class in CSS, and then added that class when the mouse “entered” a link, and removed it when it “left” the link.

The next thing I did was make the gradients on my text like circle around, so the gradient was always moving around and it looked like dynamic. I actually got this idea from the Hack Club website because in there they have a moving gradient on the text. For this, I actually did not need any JS, and instead just make a looping animation in CSS for the background of the text. I first did it only for the Hero title, but then I liked it so much that I added it to all of the section headings so yeah I thought was a really nice addition

The next thing that I did was to edit my skill icons. I mentioned in a previous devlog when I was styling the About Me section, that the little subtitle for each skill was showing on the top of it, so then for skills in the bottom row, it was covering the skill on top. I also used JS for this fix. I first made a class for the subtitle on the bottom, and then again in JS made it so if it was detected to be lower, that class would apply

The last thing I did was change the fonts. I am really happy I did this, because the site just looks so much better with different fonts. I imported all of my fonts from Google Fonts. I inserted the link in the <head> section and then used that font family in CSS. I did a lot of like comparing and swithcing around and researching and all of that just to find good fonts, and I have a really bad habit of like taking a lot of time on these kind of things, and it wasn’t even getting tracked on Hackatime, so I tried to do it quickly. I found some really nice fonts for the headings and titles so I am super happy with that.

Next Steps

Now the only thing left to do that I still havent gotten around to yet is making a really nice background in JS. I really want to make an animation background, because I think that will be like a unique aspect of my website. The main thing I really want that for is the glassmorphism effect that I have on the cards. On a plain dark background, you can’t tell at all that there is a glass effect. But with a sick background that moves, you can see that shapes blur under the cards. So I think that is the last thing to do, because I finished up all the small little details. However, I also think this will be the longest and hardest part because of its complexity in JS so yeah. I am really hoping to ship soon after 1 or 2 more devlogs.

Below is a video of the new hero section with cool fonts and a moving gradient background.

Devlog #11

I have finally finished styling my whole website in CSS. It was such a long process, but I really think that I learned how to code in CSS. Position and display no longer confuse me and I have gotten the hang of adding cool effects to me elements. I am really liking the theme of my website, but I still have more to do. Right now, I have a lot of empty space in my website. Because all of my cards are glassmorphism, I am planning to use JS to make really neat background just to add like a nice touch and really sell the website, but that might be after the first ship. I am also planning to change some fonts and all that, so still a lot to do.

Current Progress

I finished the Achievements and Contact section and also styled my footer. I made a masonry style layout for the achievements, and I think the design turned out really neat. At first, I thought I would use a flexbox or a grid, but then I saw that I could just make a fized number of columns and the text would just automatically arrange itself. So I used that instead of getting all tangled up in like flex and grid properties and all of that. But then it actually made it like vertically ordered, but I wanted it horizontally, so I took the time to like arrange them so that the layout would appear even and it would look like it was horizontally arranged, when in reality it is actually vertically arranged but in a weird way. It makes more sense when you look at it. I also finished the Contact section. This was quite easy. I just styled it like the Hero and added two little icons: one to my email, and the other to my github, so yeah that was pretty simple. I first thought of adding a contact form, but then I realized that that needed a backend, so I decided against that. Again, if I want, I might add it later in the future, but for now I will leave it at just to two icons. So mainly I finished those two sections in this block. One more cool thing that I discovered was how to make links open to a new page, because while I was trying out links it was bugging me that it was always opening in that page, so this really put my mind to ease a bit, and makes navigation a bit easier.

Next Steps

I am planning to ship very soon. I am thinking of just adding some finishing touches before shipping the first version, like some font changes. I might also just try to play around in JS, and like get a feel of it, Because I think that a cool background will really take it to the top, so I will play around a bit with that. i’m also thinking about adding like scroll up effects, especially for like my experience timeline. But yeah next steps might just to be to polish it up just a bit before shipping. I am super excited to try out JS, and hope that the final product will be awesome.

Below is a picture of the masonry effect of the achievements section.

Devlog #10

I have finished the Experiences section of the website. This section was for sure a lot trickier than I thought it would be. The hardest part was trying to figure out how to arrange the boxes in a vertical but staggered order, so I could build the timeline. However, on the upside, I was able to quickly do styling, because a lot of the colors and like hover effects and everything was already set up in my code from styling the previous section, so that did not take too much time. Overall, I really like how this section turned out, and I think it is a bit different from the rest of the sections.

Current Progress

I completed the Experience section. This one is styled a bit differently from the other two. In this one, the timeline in centered and it goes longer than the length of the screen. The about me section and the projects section were all set to be as tall as the screen itself using height: 100dvh, but this one is actually dictated by the length of the cards, and then I added some padding at the bottom to separate it from the next section. The tricky part was to actually make the timeline affect. At first I did some research and thought or using pseudo elements in CSS to create a line through the middle of the page and arrange the boxes beside it. But that was way too complicated and didn’t seem to work for me, so I decided to arrange the boxes first and then add the line later. To arrange the boxes, I first centered them vertically in the middle of the screen, and then gave half of them one class and the other half another class. Then I pushed one class completely to the right, and the other to the left and that created a staggered timeline look. Then I needed to add a line through it. To do this, I created an empty <div> tag at the beginning of my experience section and then styled it as a line as long as my experience cards and then filled it with a rainbow gradient to kinda match my theme. I also added tiny circles using the same method to the timeline wherever their was a card to kinda just make it look cooler. I will acknowledge that I did use a bit of AI for this section to research the different ways to position the boxes, but otherwise I implemented all code by myself and I did not copy paste anything in. I really think this section introduced me to the flexibility in CSS, and how to manipulate different rules and elements to get the desired effect.

Next Steps

I am now going to work on the Achievements section. I am planning on making this section like a staggering kinda page of acheivements, like not quite even, just like a mosaic, because there is a lot of content in this section. For a kind of visualizer, I am planning to kinda style it like a pinterest page so like staggered and just fitting together. I just hope that it doesn’t turn out to jaggedy or uneven at the end of that part, and that it doesn’t take too long to organize them to look like at least like reasonably even at that. Hopefully I finish this section pretty quick, like just an hour or 2, and then I will quickly finish up the contact section as well, so then I will post a devlog of those two, but yeah I will see. I think I am getting close to a ship so keep an eye out for the next few days.

Below you can see like the full experience timeline like zoomed out and I am hovering over the first card.

Devlog #9

I finished the Project section of the website. I also took some time to like style and experiment with some like hovering effects in the website. I also figured out how to color texts with gradients, so I changed all of my main section headings to cool colorful pastel gradients. I also made each glass card look cool when you hover over it. I also made some of the text like get bigger or show cool stuff when you hover over it. So yeah. I really think I am getting the hang of CSS. Most importantly, I think that I am able to use resources from the internet and apply them accordingly to my website. This block was mainly like a styling portion to kinda experiment and apply some aesthetics to my site.

Current Progress

I finished the Projects section. This section was much easier to arrange. Instead of using display: flexbox I used display: grid to help position each of the cards into an organized layout. What I really like about this display is that it automatically does all the math itself and gives each card its own equal amount of space so that they look even on the page. I got 4 nice cards for each project. I also styled the the heading to look like a gradient. I figured out that you make the background image a gradient, and then clip it to the text, and then just make the text clear so that the color shows. So I made all the headings look like that. Another thing that I did was use box-shadow to make the cards look cool when I hover over them. I realized that there are a lot of elements for the box-shadow, though once you figure them out, its not too complicated. So then I applied the box shadow effect to everything in the website that it would look good on. So yeah that was also a learning experience. I also figured out how to make a specific thing appear once you hover over like a bigger topic. So like I made some text a bit bigger or like an element appear when i hover over the whole card. You add the hover rule for the big card, and then add the class for the specific element, and then do your ending look. I used that for some things. So I really got some styling done to make my website like look better.

Next Steps

I will now work on the Experience section. I have around 6 cards for this. For this section, I am planning on making like a scrolling timeline to showcase like all of the past stuff in a chronological order. This might be tricky because up until now I was using the height: 100dvh to determine how big a section would be, but this one is going to have to different from that because of its scrolling nature. So yeah. But I think I am really getting the hang of positioning and display. and how to manipulate objects between different rules. I am starting to realize that code is not as strict as I thought it was. Like I thought everything needs to be like letter precise, but you have a bit space to improvise and experiment. So I can actually code a bit in CSS. I really enjoying styling things, like the gradient texts or like hover effects, so I am going to make sure to include those things in this next section as well. I am excited to get to work and encounter this new challenge.

Below is a picture of the Projects sections and I am hovering over the first card, so you can see the hover effect.

Devlog #8

I am finished the About Me section. I came across a problem though. In the pills, I want it to be like that when I hover over the pill, the name of that skill shows above it in a small text. However, pills in the bottom row, their text will start to hover into the pill of the next row, so that messes up the thing. BUT, if I add a space, it will look like a really weird gap between the rows. I did some research and I read that I might need to use some JS to fix, so like pills on the bottom, their text shows on the bottom, and pills on the top, their text shows on the top. So I am going to leave that for now, and work on it after I am done with the rest of the webpage.

Current Progress

Right now I finished position the stuff for the About Me section. I found this part really complicated, especially with the little icons. I ended up having to add more classes in my HTML to style them accordingly in CSS. Again, I still have a bit of problems with positioning, but I am starting to get the hang of like display, margin, padding, and gap, and how they work with different classes to arrange and organize everything. I also learned how to use transition to just make thing shift smoothly when you hover one them. This section took me a really long time because I had to arrange the about me text and all of my skills. I figured out where like display: relative and display: absolute are used, because I then had to arrange my text so that it was like positioned vertically 110% and horizontally 50% of the icon, so they helped in that. Otherwise, this part really familirized me a bit more with CSS. I especially got the hang of like background and border styling, and how to experiment with corner rounding and different colors and transitions and all of that, so I think this section was really a learning experience.

Next Steps

I will now begin to work on the Projects section. For this section I am just thinking making cards for each project each with a glassy effect behind it. Because I am giving each element like a glass effect, I am planning on making a super cool background later once I finished the site in JS so that the glass effect really shows and provides a unique aspect to my website. I think this section will be a lot simpler, but I will have to add more classes in HTML to do this I think. A tricky part might be to style the links, because I have links to all of my projects and their repositories, so yeah. Once I figure out the positioning of the cards, its practically smooth sailing from there, because like adjust font sizes and colors are like pretty easy for me. I might even make like the glass lighten up when I hover. One thing I want to experiment with is with box-shadow so that a shadow shows underneath the card. So I will play around with that. Otherwise, I am excited to continue working on this. The layout for this section is similar to the rest, so I think from here I will begin to quickly finish up the rest of the sections.

You can view the about me page here. I am hovering over the HTML pill, and you can see the text over it.

Devlog #7

I finished creating the navbar and have finally started on the CSS. Now because I am a complete beginner to CSS, I did use some help of AI just to kinda get the hang of like rules and all the different like properties. I DID NOT copy paste anything from AI. This is a project that I am doing to learn HTML and CSS. I actually want to learn this, and AI is just assisting me. I completed the navbar in CSS, and started on the Hero section. Right now positioning for CSS is confusing me a bit, so I need to work on that a bit more. The Hero was fairly easy as in the text, and I haven’t added much to it, but I figured out how to center it. The next steps will be to work on the about me section.

Current Progress

I finished up the navbar by quickly making a list of links at the very top of my html that went to each section. I also added a logo in the other corner (which is just my initials for now) which will link back to the hero page, like the top of the webpage. I was able to add a nice frosty glass effect the navbar, which was pretty simple. All you got to do is make the background like a little translucent and then add a blur effect. I thought it would be super hard, but it actually wasn’t. I am probably going to use this same formula for the glass cards of each section. My plan is to make them more interactive as I continue, but for right now I will just keep it at that. For the hero, the plan is to just make my name and a short subtitle below, and then add a cool effect around it. For now I just mapped out the area of the hero section. I realized that 100vh is the same as the whole area of the screen, so that is perfect for the hero section. I set the height to that. I also learned that you could access text from within sections that you have id’ed, ex. like I could access the <p> text in the hero section by using the rule #hero p {} so that was pretty neat. Like I mentioned, I used AI to help with some of the centering stuff, because there are a lot of rules for that. I also learned a lot about default positioning, and relative, and fixed positioning. I decided to use position: fixed; for the navbar so it stays on the page the whole time. I still need to get the hang of positioning, but as I begin the next sections, I think I will learn to do that on my own.

Next Steps

I finished the Hero section for now for CSS, so I will start with the About Me sections. Again this section will have like a blurb about me and then little icons of all of the skills that I know. This is for sure going to be a lot more trickier than the Hero section. My plan is to first try and do the basic styling on my own, and then refer to other resources to polish it up. I am probably going to use the glass effect for the about me blurb and then as a little background behind each icons, like a little drop. I am excited to get this part complete because right now I just have like a very long list of large images in the website, (which are the icons for the skills) that are taking up like the whole screen and I am so ready to get rid of those and just clean up the webpage a bit. After those are organized into the skills, then everything will just be a little cleaner. I am planning to organize the skills based on software, hardware, and then others. The icons are already organized in HTML, so I am excited to begin tomorrow on styling the next section.

The navbar is glassy, its just because there is nothing under it to be blurred thats why it doesn’t show.

Devlog #6

I have finally finished the HTML section. I have organized all of my sections and filled in enough information to make a complete portfolio website. I’m not going to worry about any more of the info and just continue on to CSS and styling my website, I think this is going to be a lot more tricky because now I have to arrange and order everything and make it look pleasing and smooth. Right now I am going for a darker vibe. I don’t have like a specific theme, but I might add like hints of color around the website. I am planning on making like cards that each have a glass morphism effect.

Current Progress

Right now I filled in the skills sections. Like I said before, I am planning to just show the icon on a glassy back. I am going to back it so that when the person hovers over it, it will show like a text of what the skill actually is like the name. I learned how to use a <snap> tag, which is kinda like <div> tag but it doesn’t need it’s own line, so you can kinda group things inside groups without like tabbing again. I put it on the labels for each skill so I could style it separately from the icon in CSS. I was able to get icons for every skill in there. I used Devicon for some programming languages and Flaticon for some of the other ones. I finally got the hang of images. They show on the preview so I think they will show in GitHub pages later as well when I publish them. I still have to see but I think that a succes because in my first devlog the images actually didn’t work, so this is good. Right now they are huge, but I will fix them in CSS. I put them all in the same class, so I think it won’t be too hard.

Next Steps

I actually forgot to make a navbar, so I will quickly make a navbar and then begin CSS. I don’t thing a navbar will be too hard because it is just links. I will most likely keep it as a header at the top, and just apply a nice glassmorphism effect to it. But yeah, I actually got to make a navbar in HTML, so not completely done with that, but after that I will for sure be done. I might not post a devlog after building the navbar and might just move onto CSS, but it depends on how much time it will take. If it takes more than an hour, then I’ll post a devlog, other than that, I wil post one after some work with CSS, maybe after making the hero section.

Below are the some of the image from Flaticon

Devlog #5

I am still working on the HTML portion, but I am nearing completion. I think that the next devlog that I post will be the last one of HTML, and after that I will start to move onto CSS. Speaking of CSS, I am still deciding whether I want to experiment with JS for this project. I have no experience in JS, so it might be like a later thing I want to add after I finish the initial draft of the project. I think it will make it look super smooth with cool animations, but I am still deciding, I think the amount of time I will spend in CSS will decide whether I want to use JS or not.

Current Progress

I have now added some cards to the Awards section. This one did not take too long because I was able to figure out the tags quite easily because by now I have experimented a lot with them.

One thing I learned how to do was to create lists in HTML. It was quite simple. Once you figure out the tags then it is pretty easy. I have a lot of awards that are like issued from a single organization and then some standalone ones, so I used the <ul> tag to create an unordered list and the <li> to add each item to my list. Overall I am planning to make like a card mosaic. Because they are all going to be like different sizes, so they will look kind of like a Pinterest post with like broken blocks, but fit nicely together. I think that will be the simplest way to style it in CSS right now, so I am going with that. Overall, this did not take as long as I expected. I actually already had a document ready, so many were just copied from there.

Next Steps

I have already filled out the Contact section. I just linked my email and added a little description. I don’t have a lot of forms of contact , so I am going to stick to just email. Now I am going to work on adding my skills, because that is in the about me section. I am not going to actually write it but instead add like little logos for each like skill so that is the next step. I am planning to separate them by like software, and hardware, and like other maybe, but I am going to work on that next. Again I hope that the next devlog will be the last for HTML before I begin CSS.