an overly-asthetic personal website

I started working on my story page, of my jounrye to becommming an engineer. I started styling the webpage and got the basic layout of it down, ttomorrow I will focus on the animations and foinal touches and texgt of the story page.

So I added this section popup fro my images and I added in some text for the images of my website. So that will pretty much conclude my first age, I am happy with this design and I will move onto the nxt page

MWHAHAAHHAHA GUYS I am back and now after beng finnished my header for my. opening page I am moving onto the iamges where I styled them and gave them a fading in intro, I lowk didn’t work on much today and I know I have to do like homework and sstuff so Imma leave it there.

So, I decided to work on it for a little bit more, this time I got started on teh dropdown feature of. my homepage webstie. this is. ahuge part as this helsp show who i am and what I like and it should be relevant to nayone chekcing my website. this took a while to input, but it still needs a little tweaking to be considered done.

HAHA! after 2 weeks of summer school, a hackathon later and practicing arduino stuff. I am back on this project! I found it really challenging to find a good color pallet to maket this thing interactable, so maybe color pallete is like a later thing, ut I gave it a 3d interactable bacgkround header!! woohoo!! thius is one of my goals when tryuing to replicate those really cool websites so I’m really proud. for a second it did wokr but I kinda. broke it again becasue I tried adding some new code. I will probably fix it tomorrow. the colopallete must wait

I tried getting gemini to create an example of what I had wanted for my overly-aesthetic website, I use ai to generate code which I then manually check over and type on my own finding out and discovering my mechanics while being given a somewhat of a image or refrence of what I want, but following the code gemini had created was found confusing when I tried to tell it how it would create my draft of my personal website, not only did I run into errors trying to type the code but i had found that it had included alot of weird divs created and language used that seemingly served no purpose to my idea of the website, rather than being helpful it was kind of fluffy and being extra so I lowkey ran into wasting an hour of coding, however I found a good website refrence that I was fascinated by it’s simple and effective design that I could adopt into my own website, in the future I will closely analyze this website and use ais to teach me more about this type of design.

Since getting an inspiration and refrence from other websites. I have restarted the project and started working on hte basic html layout fo the first two pages, I’ll try to style them in a really interactive and visually apppealing style that resembles most modern websites.

I was pretty unsatisfieied with the vision of my resulting outcome of my website, it still in a way seemede a little generic broing and balnd even with the extensive hover and intractive freatures so I topok today to draw inspriation from 3 other websitesl. i created an md file to map out my thoughts and since I kinda got a bit busier with summer school I will be stalling toay and picking up pace when I get the oppportunity.

I finnished up on the fading in effect for the timeline/story of my website protfolio I haven’t added any imagees tho. I’ll work on all the tailwind and mechanics first then I’ll move to importing images, and finding a better colour scheme and making the layout more visually appealing

I started working on the scroll- flow-in timeline mechanic of my story tab in the website, currently it’s not done and I think it’s a little broken but I’ll finnish it up later.

I added a new music list onto the portfolio webstie talking about all the favourite songs I like, I also stared working on the story page that talked about how i came onto this personal path. I faced some small typos but overall got through it. I am planning on adding a similar effect I had with my lists to the small description on the “my story” page. I am planning to style this like a timeline. where boxes adn their yeaers will slowly reveal themselves as you scroll down

worked on adding the list changing image feature on all of the lists of my home page. Now I just have to add a music taste list and add links to each of the lits items and that should be it for the home page. it sitll looks a little 2d and basic…. the styling color pa;llet literally has only 3-4 colors and uses only 2 most of the time…. so I am gonna have to change that up. yt that’s just a simple code fix. I had this problem where the image kept being at the bottom of the lsit isntead of opening up on the side and it was because I realzied I hadn’t used flexbox propoerties so once I appleid them to both items of teh list and the image I was able to get a smooth visual expression of my interests with a clean smooth layout, aesthetic and appeal. Lowkey midnight motivation pushed me throguh some key changes in the website that’s probably it for the night I am gonna turn the monitor off.

I worked to implement the swtich image freature to all lists, i haven’t found suitabele images for it tho and I am kinda lazy for it … ;(

So, I added a reveal list contents feature to each of the lists using javascript, origionally I ahd to make a unique function for each lsit which was super tedious and annoying and it was just really bad coding rpactices so I deciced to wokr to make my code shorter, more organized and readable, this project, has already come along way thenw hen I had first started it 2 weeks ago… I still am thinking of what kind of images I should add but to be hoenst , finding an image that perfectly represent the topic and adding it is a bit of a drag and kinda disrupts the coding workflow flow-state I sually get into in coding so, I’m gonna have to trian my mind for that. I usually am not that good at using javascript so it was good that I got able to practice it well here.

Worked to make the effect for one of the lsits apply to all lists for the home page. Also planning to add more imgaes to teh website in the future.

I figured out the layout of styling the lists for my portfolio websote and it’s comming together alot. better now. I’ve made a list have special animations when hovereed that reveal it’s contents and I’ve figured out some JS to make a quote appear when you click on my profile. next time I will focus on giving that effect to all of the lists !! a Huge challenge was actually getting the animatiosn right. I had so many unbeleivable typos which was annoying to work with. Some of the syntax also still confused me and I did not yet understnad the meaning of some commands like “overflow-hidden”. but Learning is definitely part of the process here! Although the aesthetic is kinda nice the color pallete is a bit too simple I’lll try and make it more flashy and expressive rather than deep, dark and lowkey

I proofread and revised parts of my descirption for my personal website, since the goal is overly-aesthetic and interactivness I went ahead and added a profile-hover name reveal feature. Additionally making it minamalisitc while also intractive this is a major drafting and learning leap for my project as I learned more mechanics about tailwind and set the tone on future design of the website. Overall. I am very proud of my work today. Although I had initially struggled with styling the image correctly and somehwo it would never update, I had finally realzied that it was ebcause my tailwind css wasn’t reading my html correctly and I now had a deeper understandin gof where errors like those came from when using tailwind.

Since my personal profiel information was now. alittle outdated and needed some updating I worked to add in those updates I am near running a dead end on how to make this overly aesthetic so when I hit that roadblock I am gonna start planning out how I actually want my own website to look

Not much was done today B Ut I mostyl focused on adding links to the personal website lists. on my home page and I got stared on inputting basics for images. i want tsi to be interactive and a profile that provides the depth of my charceter so I should include links, refernces etc that lead to my hobbies, projects, likes and more I will work more on these features in the morning,

So I started on moving the css styling components from the origional website ot it;s outer parts to salvage supplies

overall I worked on connectin gthis repository to this program and I got to work trasnfering the tailwind design styles on my home page across other pages. My overall goal is to learn how to use tailwind and create a project for my own so trying to use aistrictly as likea. google but never let it automate writing code for me. Trying to learn the basics of tailwind for now and then when I ge tmore proficient at it I can master some more creative design options