stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

My own website!

By @berragurlesin

  • 3 Devlogs
  • 5 Total hours

My first personal website, built from scratch using HTML and CSS! It’s a portfolio that truly reflects who I am, featuring a custom scrapbook-style homepage, my projects, my social media links, and a mobile-friendly design.💫⋆⭒˚.⋆

Source
Ship #1

@berragurlesin on My own website!

This project is a personal website I created for myself. It’s a platform where I can bring together my research and other things related to myself.

It includes an “About Me” page I designed in a scrapbook style, an “Essays and Research” section where I’ll share my personal writings and research, a “Projects and Milestones” page showcasing my competitions, awards, and projects, and a “Social and Media” page with links to my other social media accounts. I also added hover effects that make the images enlarge and stand out when the mouse hovers over them, and I also created a mobile-specific design to make the site simpler and more user-friendly on smaller screens.

One of the most challenging parts for me was adjusting the positions of the images in the scrapbook collage. Since I wanted the collage to look a certain way, I manually adjusted the positions of each image one by one and experimented with different values until I achieved the look I wanted. Since changing the position or size of a single image sometimes affected the appearance of the entire collage, this process required a great deal of trial and error. In addition, I had to learn many things I didn’t know before during the process. Although this made the project more difficult, it allowed me to learn more about web development.

What I’m most proud of about this project is that it’s my first website and while people usually use ready-made applications to build websites, I’m very happy that I created this site from scratch by coding it myself in Visual Studio, and the site turned out exactly the way I wanted it to.

One thing to keep in mind while browsing the site is that the “Essays and Research” section isn’t complete yet. The reason for this is that, although I’ve actually written some pieces for this section, I want to polish them up before adding them. That’s why I’ve chosen not to upload my articles at this stage. I plan to add them to the site as I continue to refine my writing.

I spent a total of more than 5–6 hours on this project, but seeing something functional come out of it makes me feel like it was worth the effort! If you check out my site, I’d love to hear your feedback and make improvements based on it. ˚.⋆🔭⋆⭒🪐⭒˚.⋆

Try project → See source code →
Open comments for this post

@berragurlesin on My own website!

1h 2m 1s logged

My website now looks good on mobile devices too! To fix this issue, I removed the images from the mobile version, but it’s fully functional now. So I’ve finished my project, gained experience building a website, and feel really motivated!! ༄˖°.🚀.ೃ࿔*:･

0
0
8
Open comments for this post

@berragurlesin on My own website!

3h 26m 27s logged

After +4 hours, my website is almost done! After creating the basic layout of my website, I selected the photos I wanted to use in the collage on the homepage and chose the fonts and colors. I wrote my bio and spent hours tweaking the collage to look exactly the way I wanted, adjusting the position of each photo one by one. Inspired by a website I’d seen before, I wanted the images to move when the mouse hovered over them and to have a footer section at the bottom, so I asked the AI to teach me how to do that. It turned out to be really easy! To make the images move, CSS uses a property called :hover (basically, you’re telling it what should happen when the mouse hovers over it) I added “transform: scale(1.08)” to the image to make it enlarge slightly when hovered over. To ensure this happened smoothly, I also added “transition: transform 0.25s ease”. For the footer, there’s an HTML tag called “”. Just add it to the very bottom of the page and type whatever text you want inside it (I added a copyright notice to make it look cool). You can try it too! Right now, I have a homepage introducing me, a page where I talk about my projects and achievements, and a page with links to my social media accounts. Later, I’ll also add my own essays to the site. That’s how I built my first website, and it actually really excited me!

0
0
7

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…