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

alinanoman

@alinanoman

Joined June 24th, 2026

  • 5Devlogs
  • 6Projects
  • 1Ships
  • 0Votes
Ship

I created a personal portfolio using HTML and CSS in Visual Studio. The goal of my website was to create a place where people can learn more about me, my interests, my activities, my projects and my future goals. I built it from scratch using an index.html file for the structure and content and a style.css file for the appearance. For the design I created a soft pastel lilac theme because lilac is my favorite color.
One of the biggest challenges was learning how HTML and CSS work together. I had to trouble shoot my problems in VS Code. Such as figuring out why certain files were not operating correctly, understand files types and learn how to properly formate my code. I experimented with different color, spacingd and fonts.
I am most proud that I was able to create my first and very own website from the ground up. I was also proud that I was able to apply my css and html skills.
When testing my site people should know that they can explore each section using the navigation bar at top. they can click different links to jump between the about me, activities, projects and goals section. The website is made to be viewed on a computer browser through the index.html file. users should make sure that both index.html and style.css are kept in the same folder.

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

53m 53s logged

Coded my Site! Today I made significant progress on my personal website using Visual Studio Code. I began by setting up the project structure and creating the two main files required for the website: index.html and style.css. While working on the setup, I learned the difference between HTML and CSS and how they work together to create a functional and visually appealing website. I spent time troubleshooting file organization issues, ensuring that both files were located in the same project folder and correctly linked using the stylesheet reference in the HTML file.After completing the basic setup, I developed the structure of my website in HTML. I created a header section that introduces me and includes navigation links to different parts of the site. I then added several sections containing information about myself, including an About Me section, activities and extracurricular involvement, engineering projects, and future goals. This allowed me to organize my content into a clear and professional layout while practicing the use of HTML elements such as headings, paragraphs, navigation bars, sections, and div containers.Once the content was in place, I focused on the visual design of the website by working extensively with CSS. I customized the appearance of the page by creating a lilac and pastel color scheme that matched the aesthetic I wanted. I adjusted the background colors, text colors, spacing, borders, and corner radii to create a softer and more welcoming design. I also added rounded cards for project information, styled navigation buttons, and implemented a gradient header to improve the overall appearance of the site. Throughout this process, I learned how CSS properties such as background-color, padding, margin, border-radius, font-family, and box-shadow affect the user interface.In addition to improving the visual design, I spent time troubleshooting coding errors and learning how to navigate Visual Studio Code more effectively. I learned how to create and rename files, distinguish between HTML and CSS files, interpret file icons, and resolve warnings related to empty CSS rule sets. These challenges helped me gain a stronger understanding of how web development projects are organized and how different technologies interact within a website.By the end of today’s work session, I successfully created a functional personal portfolio website with multiple sections, custom styling, and a cohesive visual theme. The website now highlights my interests, activities, engineering projects, and future aspirations in an organized and professional format. This progress provided valuable experience in both HTML and CSS while helping me build confidence in web development and problem-solving skills.

0
0
3
Open comments for this post

59m 1s logged

Devlog 4: Components. Today, I continued developing the 3D CAD model of the PromptPen and made substantial progress toward creating a realistic prototype. Building upon the pen enclosure that I previously designed, I began integrating several of the actual electronic components into the model. I added a representation of the INMP441 MEMS microphone, which will be responsible for capturing voice input from the user, and carefully positioned it within the housing to ensure it would have a clear opening for sound detection. I also incorporated the push button that will be used to activate voice recording and interact with the device, placing it in a location that is easily accessible while maintaining the ergonomics of the pen.In addition, I modeled and positioned the OLED display that will present AI-generated responses to the user. This required ensuring that the display aligned properly with the viewing window on the exterior of the pen so that information can be read clearly. I also added the charging module and began planning how it will connect to the battery and other electronics while fitting within the limited internal space available. Throughout the modeling process, I evaluated component spacing, orientation, and accessibility to ensure that all parts could coexist within the enclosure without interference.

0
0
1
Open comments for this post

1h 28m 2s logged

Devlog 3: Lots of progress on 3d Model! Today, I made significant progress on the mechanical design of the PromptPen by beginning the development of the three-dimensional CAD model. I started by creating a basic pen-shaped enclosure in Fusion 360 that accurately represented the overall size and form factor of the final device. This initial model established the exterior dimensions of the pen and provided a foundation for integrating the electronic components. After completing the outer shell, I modified the design by creating internal cavities and cutouts to accommodate the major hardware components required for the project. These included designated spaces for the ESP32-S3 microcontroller, LiPo battery, OLED display, microphone, charging module, and supporting circuitry.Throughout the modeling process, I carefully considered component placement to maximize the limited internal space while maintaining the appearance and ergonomics of a standard pen. I carved out specific regions within the enclosure to ensure that each component would fit properly and remain accessible for assembly and maintenance. In addition, I evaluated how the placement of components would affect wiring, power distribution, and overall functionality. The CAD model also helped identify potential design constraints and allowed me to make adjustments before moving into the prototyping stage. By creating a detailed digital representation of the device, I was able to better visualize the final product and confirm that the internal electronics could be successfully integrated into the pen-shaped housing. This progress marks an important milestone in the PromptPen development process, as it transitions the project from conceptual sketches and planning into a realistic and manufacturable engineering design.

0
0
9
Open comments for this post

30m 1s logged

Devlog 2: Sketches
Today, I continued the design and planning process for the PromptPen prototype by creating a series of dimensioned engineering sketches to establish the physical layout of the device. I developed a general top-view drawing to determine the overall length, width, and placement of the major internal components. This sketch helped visualize how the ESP32-S3 microcontroller, LiPo battery, OLED display, microphone, and other electronics would fit within the limited space available inside the pen housing.I also created a detailed side-view sketch of the PromptPen to define the external appearance and identify the locations of user-facing features. In this drawing, I planned the placement of the OLED display window, voice activation button, microphone opening, and USB-C charging port. The side view allowed me to evaluate spacing between components and ensure that the design would remain ergonomic and comfortable to hold while still accommodating all required hardware.Additionally, I produced a top-view sketch that specifically incorporated the power switch and its location within the design. This drawing helped determine how the power switch would be accessed by the user while minimizing accidental activation during normal use.

0
0
5
Open comments for this post

27m 2s logged

Worked on the 3d Model today
Today, I began the design and planning phase of the NeuraPen prototype. I researched the hardware components required for the device and finalized a bill of materials, including the ESP32-S3 microcontroller, OLED display, INMP441 microphone, rechargeable LiPo battery, charging module, and other supporting electronics. I also developed the overall system architecture, determining how the pen will communicate with a smartphone via Bluetooth to process voice input and display AI-generated responses.

In addition, I worked on the mechanical design of the device by creating preliminary CAD concepts for the pen housing and internal component layout. I planned the placement of major components, including the display, microphone, battery, and charging port, while considering size constraints and portability. Im hoping to get more comfortable with fusion so I can get these designs in quickly!

0
0
15

Followers

Loading…