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.

Devlog #4

I have filled in some more sections of my webpage. I am still at the HTML portion. Right now the webpage looks like really bad when I view, and it’s tempting for me to move right to CSS to begin styling, but I think it will be easier for me in the long run if I finish all of the HTML now, at least all of the sections. Of course, if I move onto CSS, it won’t mean that I’m completely done with HTML, I will always be adding more stuff and I find ways to improve my website.

Current Progress

So before I had filled out the Projects section. I was working with GitHub a lot, uploading my projects so I could link them. I also had to use the Github desktop app to upload some files. Because I had opened the website repository in my VSCode desktop app, I think that something got mixed up, and the file didn’t save properly, so then my whole projects section got deleted. I had to spend some time filling that in again, though it wasn’t too hard the second time because the live preview in the browser still had the text in it, and I had already created all of the links again. Then I made sure that my files would autosave, and that the repository was properly linked. After I pushed the commits to Github to save it there, and I will do the same after posting this devlog.

After that I began to fill in the Experience section, and that was mainly the majority of this time block. Again, I had to like go back and kinda figure out the dates of everything. I am thinking like a timeline style for this one, and that I will have like a little card for each thing. The plan is to make a scrolling website, so that each card will like appear as you scroll down. I have got a good solid like 6 cards of stuff, so for now I am done with that section. I learned more about like div and section tags during this. I also learned the effect of applying classes to text, as it seperates it from other text when styling it in CSS. I applied it to the date text in the experience sections, so that the time frame will be like a little substitle, different from the actual text in the card.

Next Steps

I am probably done for today. Next, I will start to work on the awards sections. A challenge will be to organize those sections because like I have many awards from a specific section but then some are just standalone, so I still a have to figure out how to organize the sections in HTML and how to apply the section and div tags. However, I don’t think I will use the section tag, as that may only be for sections that will be in the navbar. But organizing the awards using div and applying different classes will be tricky and hard to keep organizing. i want to make sure that I continue and keep my code nice and clean so that CSS styling is easy.

Devlog #3

I have started to fill in some more information about myself in the webpage. The plan is that I will first constuct the HTML layout and fill in all of the sections. Because I am still a high student, my portfolio will look a bit different because I am not actually advertising a service or anything like that. The order that I am planning to go in is the following:

1. Hero
2. About Me (along with skills)
3. Projects
4. Experience
5. Achievements/Awards
6. Contact

Current Progress

Right now I have constructed each of the sections in HTML. I am using the section tag to separate each of the parts that I just described above so that I can link them using a navbar, though I have not created anything for a navbar yet. One thing that confused me for a while was the difference between section and div tags. After some research, I realized that section actually separates the parts in the HTML file, while the div just like adds an invisible containor around the parts and doesn’t actually effect the HTMl at all. It just like groups them together. The section tag is great for the navbar. I am using the div tag for like sub sections, like for an individual project within the Projects section. This will help later with design as I am planning to make like each project a card on the screen. That brings me to my next thing. Right now I have filled in around 3 projects that I have made. The biggest hurdle was that not all of them were on Github, so I had to go back into my files and like refresh by brain on those past projects. I wanted to have links to projects in the website, so some of my past projects, I had to spend like an hour or two just trying to upload those and get the repositories set. I have attched 3 projects so far. I will probably add more, but for now I think I will move on

Next Steps

Next, I am going to start filling in some of the other sections, like the About Me section. I am still thinking on how to display the Experience section, but I will start filling in that section too. I will also begin to organize like the subsections for each section and begin to build a navbar. By the end of the week, I hope to have like a basic HTML structure with all of the sections roughly filled in, and then I will move onto CSS. I think the biggest challenge will be to organize everything neatly for experiences and achievements. But otherwise I am looking forward to start filling those in.

I have kinda gotten a sense of how I want my site to be like. For the portfolio, I will kinda have around 5 sections: Hero, About Me, Projects, Achievements. and Contact. I am think of a kinda dark aesthethic theme with neon accents in there. I am also thinking that I will make like each section themed to what I have achievemed or what is added in that section. Right now I have added a gradient to my background and written some stuff in the about me section. I have also added a link to my astrobounce project which is also here on stardance.

My personal site.

Right now I am just getting started on this website. Mainly this project will be for me to learn basic HTML and some more CSS code. I want the end goal to be a nice smooth and polished site. I have still yet to pick a theme.

Right now the only hurdle I have encountered is that the image isn’t uploading properly into the website, so I will be looking into that and trying to fix that. Otherwise I am only planning to spend a couple more hours. I might plan to make this a personal portfolio site for myself as I enter high school to help showcase some of my experiences and achievements. But I am still deciding on the theme. And that will be in a later devlog.