Git Product home page Git Product logo

back-to-static-creative-coding's Introduction

CREATIVE CODING

Scherm­afbeelding 2024-01-18 om 01 09 54

DOEL

Het doel van deze deeltaak is het ontwerpen (bedenken) en realiseren van verschillende creatieve opdrachten voor de opdrachtgever. De eerste twee weken heb ik gewerkt met de huisstijl van de opdrachtgever, daarna in de laatste week heb ik de huisstijl van de opdrachtgever losgelaten.


PROCESS

Analysefase 🕵🏾‍♀️

Ik ben eerst begonnen met de onderzoeksfase, het krijgen (uitkiezen) van de opdracht en daarna inspiratie opdoen om zo op ideeën te komen.

Ontwerpfase 👩🏾‍🎨

In de ontwerpfase heb ik de ideeën die ik gekregen heb tijdens de onderzoeksfase visueel gemaakt door middel van schetsen (ontwerpen).

Bouwfase 👩🏾‍💻

In de bouwfase ben ik de schetsen (ontwerpen) gaan realiseren in de code.

Integratiefase 👩🏾‍🏭

In de integratiefase heb ik de creative coding opdrachten live gezet met Vercel.

Testfase 👩🏾‍🔬

In de testfase heb ik verschillende testen uitgevoerd om de opdrachten beter te maken voor de eindgebruikers

Bekijk hier de wiki: https://github.com/Nazneen05x/back-to-static-creative-coding/wiki

OPDRACHTEN

Bekijk hier de opdrachten: https://back-to-static-creative-coding-red.vercel.app/

WEEK 1: ✨ Magical blur en gradient footer ✨

Scherm­afbeelding 2023-12-07 om 21 30 28

WEEK 2: Hysterical spooky popart menu page-transition 👻

Scherm­afbeelding 2023-12-14 om 23 43 07

WEEK 3: Bizarre ballenbak bubbelgum cascade 🎈

Scherm­afbeelding 2024-01-18 om 00 33 31

Kenmerken 🖇️

TOOLS 🧰

  • VSCode
  • Ipad (schetsen)

GEBRUIKTE TECHNIEKEN 🪚

  • HTML
  • CSS
  • Javascript
  • Svelte
  • View transitions API

Licentie 🔒

This project is licensed under the terms of the MIT license.

back-to-static-creative-coding's People

Contributors

nazneen05x avatar koopreynders avatar joostf avatar ju5tu5 avatar

Watchers

 avatar

back-to-static-creative-coding's Issues

Meer sterren

Misschien leuk om meer sterretjes te doen zodat het wat meer random voelt

Mooie rotsen!

Cool dat je gradients hebt gebruikt om de rotsen zo echt te laten lijken 💯

Groetjes Roelie

Footer flex

Om de witruimte beter te verdelen kan je justify-content: space-evenly doen ipv center.

Concept

Mooi concept! Zie mijn pagina voor de bubblegum ball pit effect

✨Inspiratie✨

Over het logo van je footer een blur on hover waarbij de vakjes van het logo in een soort sterren veranderen, zoals de sterren hier beneden

image

Page transition

Heel tof gedaan! Ik vind dat het echt iets toevoegt aan je website

Prima opzet

Prima initiële opzet, ik ben heel benieuwd naar de animaties die je gaat maken! (Justus)

ontwerp

Je eindresultaat lijkt veel op je ontwerp! 👍

Feedback:

Mohamed:
Ontwerp ziet er goed uit, misschien de bubblegum laten vallen in het water.
Mist ballenbak!

Levi:
Ik zou beginnen met het toevoegen van een bubble maken die klein begint en groter wordt. Uiteindelijk een soort spat animatie maken. Dit kun je met SVG eventueel oplossen, door verschillende shapes te maken in Figma.

gaaf ontwerp

gaaf ontwerp, duidelijke uitleg gegeven over hoe het werkt.

Mobile gradient

Misschien op mobile de gradient omdraaien of van boven naar beneden. Omdat de tekst links staat uitgelijnd zijn sommige dingen moeilijker te lezen vanwege de witte gradient. Of misschien de tekst andere kleur

Waterfall

Zet er een waterval in die interactie met het water

readme

Misschien is het handig om een readme te maken?

Plaatsen van "AAAA"

Kijk even naar het gebruiken van vw of % voor het plaatsen van je "AAAA". Je gebruikt nu een standaard waarde van left: 39em. Dit werkt alleen op 1 schermgrootte. Check ook even je media queries.

Enge webp

Je kan het rechter plaatje misschien nog iets meer in beeld zetten (dus meer naar links)
Scherm­afbeelding 2023-12-14 om 19 09 19

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.