James Brown Photographer Portfolio
The aim of this project is to develop a user friendly, optimized, visually pleasing and functional presentational website. The theme of the website is PHOTOGRAPHY.
☞ Check out the web: James Brown Photography
-
Project purpose and goal
A freelance photographer, looking to present his work online and broaden his client base. The client is looking to develop a website that acts as a portfolio, through which he can showcase his previous work that can be filtered by visitors, allowing them to find what they are looking for.
-
Web proj and explanation
Used props to display the pics in the cards components, using also Link to {props.path}, so that on click the user can go to the portfolio page.
On the Portfolio page, I used the Pixabay Opened Api, so that we get a photo library, where we request data such as: image author, views, downloads, likes and a few tags.
For the Repertoire page I created a shopping cart simulation. You can add and/or remove as many items as you like.
-
Problems and thought process
For the ImageCard component, the tag data is a comma separated value, so we turn into an array, and then loop through that array and than output one span for each one: const tags = image.tags.split(',');
Map through the tags, and for each tag we want to output span and then put #{tag}. we give it a key, {tags.filter((i, index) => (index > 0 && index < 4)) .map((tag, index)=> ( #{tag} ))}
Lessons learned
Used hooks for the Portfolio page. Important first steps:
- declared an empty array because is going to get filled once we make our request const [images, setImages] = useState([]);
- once we're done fetching, we can set isLoading to false const [isLoading, setIsLoading] = useState(true);
- the empty array gets random pics. we can put a value in it , and get all pics of cats for ex const [term, setTerm] = useState('');
- [term]); in order for the fetch request to be called again, we need to add term as a dependancy. Whenever term changes, the fetch runs again. useEffect(() => { fetch(`https://pixabay.com/api/? key=${process.env.REACT_APP_PIXABAY_API_KEY}&q= ${term}&image_type=photo&pretty=true`) .then(res => res.json()) .then(data => { //set that response hits array to our state setImages(data.hits); //because we already got the data, set the setIsLoading to false setIsLoading(false); }) .catch(err => console.log(err)); }, [term]);
Let's build something together
Feel free to reach out if you're looking for a developer, have questions, or just want to connect via LinkedIn.