# data[].attributes.body
1. Animated typing in the landing page introducing who I am and the description

2. Interactive books representing projects -> open like books and the front cover would be an image of the project and the name. Pages are the details

3. An interactive bookshelf, so when the cursor hovers on the book, it will slightly lift up to indicate that’s the book being chosen

4. Sliding windows to toggle from landing page (about me), projects, contact

5. In the contact me section, the icons of the contact method will be button that will link to the sites

# data[].attributes.body
1. things change colour and grow bigger when hovered

2. ascii logo scatters when cursor goes on it

3. videos start playing when hovered onto it

4. possibly diff music every time a new click happens

# data[].attributes.body
1. Encrypted text glitch effect on hover

2. A lot of block animations...

3. 3D parallax scroll effects for hero

4. Sticky scroll reveal card slider

5. Preloader animation

6. text glow effects

7. typewriter text effects

8. infinite scrolling effect (like a <marquee>)

9. Maybe autoplay sound effects, that the user can disable

# data[].attributes.body
1. Mouseover effect where a bubble on the landing page expands/warps as users move the cursor.

2. Audio of a 'popping' sound when users click on the bubble.

3. Images in gallery to expand a little when cursor hovers over it.

4. Animation on loading screen where site name continuously changes fonts.

# data[].attributes.body
Clickable objects on the workbench instead of a normal navigation bar (blueprints, tools, notebook, etc)

Hover effects that make objects slightly lift or highlight when the mouse is over them.

Expandable project cards so users can click to see more photos and information without leaving the page.

Small background animations like moving shadows or subtle lighting to make the homepage feel more alive.

An interactive skills section instead of just a list (progress bars or simple diagrams).

A contact form so employers can easily get in touch.

# data[].attributes.body
navigation menu: buttons change colour/highlight when hovered over. dropdown submenus appear when hovered over and also change colour/highlight

scroll down button and arrow at bottom of screen, sticky so it stays there when scrolling

in the gallery section: when you hover over an item it enlargens, the background fades a bit

background image to be a gif/mov that loops (not sure how to do this because the free version of neocities doesn't allow .mov)

# data[].attributes.body
Photo Carousel - moving horizontal strip of images that scrolls automatically, like cars passing on a straight.

Lightbox - click any photo and it pops up fullscreen over the page, click outside to close

• Sound toggle - button that turns engine audio on and off

# data[].attributes.body
1. pop ups when scrolling

2. toggel sizes where clicked

3. some form of 3D rotation of objects

4. sound effects when certain objects are clicked

5. a looping carousel

# data[].attributes.body
1. Spray painted words and header when you arrive on the landing page - animation to reveal like gradual paint (can be applied to the logo as well)

2. Paint to reveal images from blank/black and white to colour (this will involve the cursor pressing and going back and forth to reveal the mage below like a scratcher reveal). These images will be set in a scategory gallery format

3. Sound played when you are 'painting' onto the images (something whimsical or a painting sound)

4. Personalised cursor - assets needed for a paintbrush and pen/marker cursor type

5. An interactive book for the design journal to flip through

6. Have the architecture models 'shake' when you interact until the 'contents' (assets such as the drawings, etc) fall out

7. Buttons to link and return to different sites (Home, Back)

8. Elements to get slightly bigger if you are hovering with a cursor (make it apparent what is being interacted with)

9. Expandable assets when clicked on for closer viewing

10. Videos and gifs loop

# data[].attributes.body
1. A carousel feature to display my photography work

2. A spinning ferris wheel like feature where people are able to click on the buttons

# data[].attributes.body
Gigi Bonet

1. Animated typewriter effect on the landing page introducing who I am and the tagline

2. Custom cursor a small plane or stamp icon that replaces the default arrow

3. Postcard wall where you click a card and it flips over to reveal handwritten text on the back

4. Interactive world map where you click on a country and a panel slides in to show travel writing, politics and food

5. Dotted flight path line that animates between visited countries on the map

6. Page preloader a spinning postmark / plane / paper planestamp animation before the site fully loads

7. Possibly a soft paper sound when a postcard flips (with option to disable)

# data[].attributes.body
Gigi Bonet

1. Animated typewriter effect on the landing page introducing who I am and the tagline

2. Custom cursor a small plane or stamp icon that replaces the default arrow

3. Postcard wall where you click a card and it flips over to reveal handwritten text on the back

4. Interactive world map where you click on a country and a panel slides in to show travel writing, politics and food

5. Dotted flight path line that animates between visited countries on the map

6. Page preloader a spinning postmark / plane / paper planestamp animation before the site fully loads

7. Possibly a soft paper sound when a postcard flips (with option to disable)

# data[].attributes.body
1. 3d rotating head and brain effect

2. my work circling around like that room in wreck it ralph

3. Interactive elements once you are taken to the desired piece of work (mainly all 3d)

# data[].attributes.body
Interactive 3D compass navigation, Hover preview thumbnails around compass, Click image → transition into project page

Scroll animation, large moving background typography

Photo stack at centre of screen, Floating letters in background. Once image clicked, letters gather to be meaningful

Layered Zic-zac door-inspired navigation, scroll through and click for full image

Interactive minimalist style map

Autoplay music

I need guidance

# data[].attributes.body
1) images/buttons magnify's/expands when cursor hover above it -> makes selection more visible

2) No vertical scrolling -> all images/works will be shown within the window boundary, resize to window size as needed (Not too sure how to code this?)

3) Interactive work 'map' -> work is presented in 3 styles, each version is interactive with slides, zoom and rotate mechanics (eg. Mirror is a colour wheel you can slide around in, Garden allows you to zoom in/out of different 'areas' to view, Night will have a rotating 'dial')

4) Enlarged stylistic cursor -> visibility

5) background and page preloader animations -> small movements in background pixel art + custom loading animation

# data[].attributes.body
1. CLI interface for navigating the website

2. Rotating list (circular style) that gives preview of each list item at hover

3. Interactive animations and digital assets

# data[].attributes.body
1. Interactive, clickable parts of an image that expands towards you as it leads to another page (as an animation).

2. Ability to hover over a certain section of the image and a picture pops up.

3. As you scroll through the "works" page, the images move with depth perception where the images move slower than the background and icon elements

4. As you scroll through the didactic section, the words fade into view and there is a sound effect of rushing water.

# data[].attributes.body
1. Bubble buttons — floating/bobbing animation (like they're drifting), so navigation feels playful rather than static

2. Hover-to-scale buttons — buttons slightly enlarge on mouseover to give tactile feedback

3. Fragment shatter panels (the "shattered-glass" gallery display) — hover triggers a subtle light reflection/shimmer across the glass shards, reinforcing the fractured, glossy feel

4. Image hover overlays — hovering over gallery images fades in a "Click to view more" prompt, signaling that content is expandable

# data[].attributes.body
1. smoke effect animated moving without interaction

2. smoke reacts to cursor, interacting with it, pushing it

3. Words scrambled and moving within the smoke also

4. navigation dial popping out and toggles able to change in size when hovered over as well as change to the subject line in a vertical collumn when clicking onto that page.

5. music played faded in when the first interaction occurs

6. line work that connects objects on the screen also being interacted with and moved around by user.

# data[].attributes.body
1. Interactive buttons when hovered over become slightly larger, so you know what you're on.

2. Pictures that move closer together to form a larger picture when clicked on.

3. The screen rotates around to the top of the desired subject (flutes, saxophone etc)

4. Fun sounds of the instruments playing when interacted with.

# data[].attributes.body
1. Opening page is the world map and there are red pins - also seen on google maps, then if you hover over them a photo and the location pops up for each pin

2. As you open the location and hover over food/activity a bunch of photos will appear looking stacked on top of each other

3. There will be links where the location of the activity/hotel will be pinned and it will send you to google where you can make your own itinerary

4. Maybe a sound for when the user clicks on my website could be like a different sound per location?

# data[].attributes.body
1. Search bar whenever the visitor first access, which will prompt a couple items and ask what they are looking to know in the website. Then once they click it would directly put them in the website subpage that is related to what they are looking for

2. Passcode requirement to enter the website (as I wanted the website to be more private)

3. Interactive toggles as their mouse goes through

# data[].attributes.body
1. Smooth scrolling between sections of the website

2. Hover animations on buttons, navigation links, and project cards

3. Fade-in animations as content appears while scrolling

4. A responsive navigation menu with a hamburger menu on mobile devices

5. A dark/light mode toggle for improved accessibility and user preference

6. Clickable project cards that open a dedicated project page or detailed pop-up

7. Animated social media icons that respond when hovered over

8. A contact form with simple validation to ensure all required fields are completed

9. A "Back to Top" button that appears after scrolling down the page

10. A clean loading animation or hero section fade-in to create a polished first impression

Assets/Tools Needed

HTML for page structure

CSS for styling. hover effects, and animations

JavaScript for interactive features (menu toggle, dark mode, form validation, pop-ups)

Project images, logo, icons, and portfolio content

I already have a basic understanding of HTML and CSS, but I would like more guidance and demonstrations on using JavaScript to create interactive features.

# data[].attributes.body
-a dashed circle that follows the mouse, rotating slowly as it moves (p5.js）
-Scroll-triggered animations — illustrations that fade in / animate as the visitor scrolls down the page, to add a sense of atmosphere and pacing
Full-screen responsive background imagery — atmospheric background images that adapt to the browser window size
-Interactive mini-games (exploring) — small playful elements that let visitors engage directly with my design work, rather than just viewing it passively, to build a stronger connection between the audience and my projects

I want these features to feel atmospheric and a little whimsical/handmade — supporting the mood of my portfolio rather than distracting from it.

# data[].attributes.body
1） click: Home page objects —> different pages

- Needed: images with transparent background

- hover/ slightly enlarge when the cursor moves over an objects

2) cursor design: draw a icon/ change the cursor when click it?

3) images: slides left and right with the cursor/clicks to enlarge images with descriptions

4) background: maybe add some movable symbols?

# data[].attributes.body
buttons on the home page where each letter of my name will zoom in when the cursor is on it

possibly, a rotating part with images where they can press and read more about it

text moves as you scroll down or up

# data[].attributes.body
1) Interactive buttons - when a user hovers their mouse over a picture or project, it will expand to show the name of the project.

2) Sliding windows of pictures showcasing featured projects.

3) Website logo will expand when user hovers mouse over the icon into full name.

# data[].attributes.body
Interactive elements:

Hover effect with floating or highlighting border

User play puzzle game by drag puzzle pieces

Animation of falling painting knife + fading effect

Scrollable gallery view

Return and other buttons jump to previous/selected pages

Some 3D rotatable models (e.g. color pallet) if possible

Assets/Tools:

Figma: prototype

Learning React, CSS, and JSX for building my portfolio website more dynamic and interactive.

# data[].attributes.body
An image acting as the button/link to a page that expands when users hover their mouse over it

Decorations and art on the borders of the page that move/bounce slightly when users hover their mouse over it

Clicking photos for more information and to reveal another photo of the same place/site

A main map that gradually becomes more filled with the names of specific locations as users explore the site and discover the different locations

# data[].attributes.body
1. Large paper cut out of dandelion flies away as user clicks or scrolls to enter the website.

2. Small, paper cut out dandelion seeds are 'blown' away when the user clicks on the large dandelion to get to landing page.

3. User clicks on images of the life cycle of dandelion as buttons that 'wiggle' to indicate they are interactive.

4. Within each stage page a mind map pops up with keywords that 'float'. when the user clicks on these floating words a box pops up with a brief description on the importance this activity when producing.

# data[].attributes.body
1. Interactive/ animated background for the Hero

2. Unique custom website cursor, leaves trails across the page

3. Interactive 3D model of featured project equipments

# data[].attributes.body
1. A landing page which says something like "click here" and so when the user does so it introduces the next landing page and then the home page.

2. Forest ambience (like bird tweets, crickets etc.) - mute button in the corner.

3. The home page presents as an interactive "forest" with three pictures/drawings that are also buttons and represent each of my projects, when clicked on the project title opens and its scrollable to the rest of the project information.

4. When scrolled down from the project title page, there is a slow carousel at the side along with a project information box next to it. When the user hovers over the carousel it pauses so that the user can look at the photo.

5. Scrolling down again reveals the gallery of the project and when clicked it enlargens and tells the story of the image.

# data[].attributes.body
hover animations in my home page CRTs

custom cursor

possible hover to show an image

zooming to a CRT when it is clicked on from the home page

I'd love to have an interactive cd player that could drag a cd onto the player and have it produce sound