website - Stardance

1h 5m 57s logged

Changed the website concept to an underwater world instead of a regular portfolio layout. Added a welcome section with: “Hello!”“I’m Nanditha” “Welcome to my world” “Explore and discover more about me. ”Added fish swimming across the underwater section. Added bubbles that move upward. Added jellyfish with a simple floating animation. Added seaweed to make the underwater environment feel more natural. Changed the navigation into shells for About, Projects, Skills, and Contact. Made the shells scroll to their respective sections when clicked. Added smooth scrolling between sections.

Ship #1

@Nanditha on website · 20 days ago

I made a personal portfolio website to showcase my skills. I built it using HTML and CSS. I also added animation to make the website more interesting. The most challenging part was creating the animations and making sure they worked smoothly without affecting the layout of the website. I also had to fix several small issues with positioning and images while testing the website in the browser. Some images were not appearing because I had issues with the file paths and image locations. I had to check my folder structure, fix the image paths, and test the website several times until the images displayed properly. This helped me understand how files and relative paths work in a website. I am proud that I built the website myself and turned my ideas into a working project. I am especially proud of the animations and the overall design because they make the website feel more dynamic. I also learned how to use Git, GitHub, and GitHub Pages while working on this project. The project is a website, so no installation is required. Open the Demo URL in a browser and explore the different sections of the portfolio. Try the hover effects, and animations. The website is designed to work directly in a web browser.

1 devlog
10h
1.11x multiplier
11 Stardust

Try project → See source code →

Open comments for this post

@Nanditha on website · 20 days ago

9h 54m 57s logged

Day 1 — Project Idea 💡
I decided to build my own personal portfolio website to showcase my skills, projects, and learning journey as a student developer.
I wanted the website to be simple, clean, and easy to navigate.
Day 2 — Planning 🎯
I planned the main sections of the website:

Home

About Me

Skills

Projects

Education

Contact

I also decided to use HTML, CSS, and JavaScript for the project.
Day 3 — Building the Website
I started creating the website in VS Code.
I built the basic structure using HTML and then used CSS to design the different sections. I worked on the layout, spacing, fonts, buttons, and overall appearance of the website.
Day 4 — Adding Animation
I wanted my portfolio website to feel more dynamic instead of being completely static. So, I added animations to different sections of the website.
I experimented with CSS animations and transitions to make elements appear smoothly.While working on the animations, I learned how small visual effects can improve the overall user experience without making the website complicated.
I also tested the animations several times to make sure they were smooth and didn’t affect the usability of the website.
Day 5 — Testing & Improvements
I opened the website in my browser and tested it several times.
I fixed some layout issues and made improvements to the design. I also checked how the website looks at different screen sizes.
Day 6 — GitHub & Deployment
I created a GitHub repository for the project and connected it with my VS Code project.
I committed and pushed my changes to GitHub and worked on deploying the website using GitHub Pages.
What I Learned :
Through this project, I learned:

How to structure a website with HTML

How to style a website using CSS

How to use Git and GitHub

How to deploy a website using GitHub Pages

How to debug and improve my own project