Personal Website banner

Personal Website

Created by: Lauren
6 devlogs
17h 20m 15s

This is a website dedicated to me! I've always wanted to tell people about me, but there's so much to share. Creating a website talking about me would be perfect.

This is my first attempt at a personal website that has a little more than surfac…

This is a website dedicated to me! I’ve always wanted to tell people about me, but there’s so much to share. Creating a website talking about me would be perfect.

This is my first attempt at a personal website that has a little more than surface-level discussion about me. I used HTML and CSS to create this entire project!! I learned a lot from building this website; I used grid and flex containers, I figured out how to control entire sections of items using div classes instead of mainly IDs, and I learned how to apply animations to container elements.

Demo Repository

README

Loading README...
Lauren
Lauren shipped Personal Website
1 day ago

Shipped this project!

Hours: 17.34
Cookies: 🍪 128
Multiplier: 7.36 cookies/hr

This is my first attempt at a personal website that has a little more than surface-level discussion about me. I used HTML and CSS to create this entire project!! I learned a lot from building this website; I used grid and flex containers, I figured out how to control entire sections of items using div classes instead of mainly IDs, and I learned how to apply animations to container elements. I applied scroll animations to the “Hunger Games” tab and carousel animation to the “Interests” tab. The trickiest part about applying these animations was ensuring consistency in the CSS naming of each div/element.

The thing I enjoyed most in creating this website was the customization! I was able to imagine something, code it, and fix bugs! My favorite tab is the “Hunger Games” since it is a saga that has always been around since my earliest memories.

When navigating the website, press the word inside the button to navigate to the next tab.
In the future, I will build on this website with new interests I have! I plan to improve the quality of this website as my programming abilities improve.

Lauren
Lauren worked on Personal Website
1 day ago
2h 33m logged

COMPLETED WEBSITE ( Whoop Whoop!!!)

  • replaced the game tab with the interests tab since I noticed that I don’t play many video games
  • implemented carousel animation to the interests tab
  • added images to the carousel animated containers
Attachment
Attachment
0
Lauren
Lauren worked on Personal Website
2 days ago
4h 46m logged

I changed the “Likes” tab to “Hunger Games”. I wanted to make a space on my website dedicated to the Hunger Games since it holds a special place in my heart.

  • added scroll animation
  • added “Hunger Games” title
    I used containers to hold all the information related to each book of the Hunger Games saga
  • used colorful borders to match the theme of the Hunger Games
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
Attachment
0
Lauren
Lauren worked on Personal Website
3 days ago
2h 41m logged

I updated the “cats” section of my website

  • added colorful border to each box
  • moved their toy links towards the middle of the page
    I created the project section!
  • I used the grid-template-columns, grid-auto-rows, and grid-template-areas to create the section. I wanted the layout to be different than what I’m used to creating. I did this by naming each box “elements” (class) inside of the div id “grid”. I followed a few online tutorials and tweaked it to my liking

I also updated the horizontal buttons to where they glow a red and blue gradient, instead of being that color the entire time. Before the mouse is hovering over the button, it is black with a gradient border.

Attachment
Attachment
Attachment
Attachment
0
Lauren
Lauren worked on Personal Website
4 days ago
2h 31m logged
  • I added the cat info page!
    Everything I want to share about my cats is on this page
  • I added a small amount of links to their fav toys on this page aswell
  • Milo has a picture, it’s just not displayed due to wifi problems
Attachment
Attachment
0
Lauren
Lauren worked on Personal Website
5 days ago
3h 15m logged

COMPLETE website revamp.

  • Layout almost the same
  • Background design has cooler tones (blue & purple)
  • I added a small about me in the center of the page
  • I changed the button colors to match the new theme
  • I added a small banner at the top of the screen that I will be updating during my next code session
  • I felt my original idea was too much as a beginner, so I decided to simplify it while keeping the original intentions of my website.
Attachment
0
Lauren
Lauren worked on Personal Website
6 days ago
1h 32m logged

I added a center image for the home part of the page. Then I edited the text that will link to other parts of my page for an improved coherent design.

Attachment
0