https://github.com/sandramsc/techfolio

Contains all projects built to gain practical skills in JavaScript, HTML, CSS, and React.
https://github.com/sandramsc/techfolio

Last synced: 7 days ago
JSON representation

Contains all projects built to gain practical skills in JavaScript, HTML, CSS, and React.

• Host: GitHub
• URL: https://github.com/sandramsc/techfolio
• Owner: sandramsc
• License: apache-2.0
• Created: 2023-08-13T02:52:37.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-27T17:27:40.000Z (6 months ago)
• Last Synced: 2024-04-27T18:33:47.727Z (6 months ago)
• Language: HTML
• Homepage:
• Size: 67.7 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

  
techfolio


## Description

This repository showcases the projects that have been instrumental in helping me gain fundamental practical programming knowledge in JavaScript, HTML, CSS, and React. Each of these projects has provided unique insights and learning experiences that have contributed to my growth as a developer since March 2020 - Dec 2022. Below, is a detailed overview of each folder along with links to the project, key takeaways, and skills acquired.

## Table of Contents

Table of Contents

- [Andy-Mineo-Music](#andy-mineo-music)

- [Berlin-Through-Your-Eyes](#berlin-through-your-eyes)

- [Book-Collection](#book-collection)

- [Bookmarker-app](#bookmarker-app)

- [CSS-GridLayout-ImageSpan](#css-gridlayout-imagespan)

- [DeTektVibes](#detektvibes)

- [EarthquakeDataViz-Python-Folium](#earthquakedataviz-python-folium)

- [Expanding-Pearl--CSS-work](#expanding-pearl--css-work)

- [Fetch-API-SpaceX](#fetch-api-spacex)

- [FilterableList-CitiesInEU](#filterablelist-citiesineu)

- [Folium-Web-App-Earthquake-Data-Vizualiser](#folium-web-app-earthquake-data-vizualiser)

- [food-ingredients-app](#food-ingredients-app)

- [FrontendMentorChallenge-signup-form](#frontendmentorchallenge-signup-form)

- [Hair-Products-Search-app](#hair-products-search-app)

- [Hogwarts-Students-Search-app](#hogwarts-students-search-app)

- [Image-Slider](#image-slider)

- [JS-Array-Methods-Cars](#js-array-methods-cars)

- [JS-Array-Methods-NBA](#js-array-methods-nba)

- [Lecrae-Music](#lecrae-music)

- [Lionel-Messi-The-G.O.A.T](#lionel-messi-the-g.o.a.t)

- [Model-Portfolio](#model-portfolio)

- [My-Site](#my-site)

- [OOP_Golden-State-Worriors](#oop_golden-state-worriors)

- [OOP_HandM-products](#oop_handm-products)

- [PDF-Viewer](#pdf-viewer)

- [periodictable](#periodictable)

- [Photography-Landing-page](#photography-landing-page)

- [reactredux](#reactredux)

- [She-Is..](#she-is..)

- [ShoppingList-app](#shoppinglist-app)

- [storefront](#storefront)

- [Survey-Form](#survey-form)

- [TinDog](#tindog)

- [US-President-Search-app](#us-president-search-app)

- [Zealands-landing-page](#zealands-landing-page)



### :hammer_and_wrench: Languages and Tools :



   

   

   

   

   

   

   

   

  





## Projects

1. [Andy-Mineo-Music](https://github.com/sandramsc/new/tree/main/Andy-Mineo-Music)

- **Description** Built a landing page to showcase a musicians art and albums. The concept was inspired by Apple website.

- **Key Takeaway**: understanding how to create a responsive navigation menu, implementing smooth scrolling for anchor links, and handling responsive behavior based on window resizing.

2. [Berlin-Through-Your-Eyes](https://github.com/sandramsc/new/tree/main/Berlin-Through-Your-Eyes)

- **Description** The project focuses on creating a responsive and visually appealing login page for a website.

- **Key Takeaway**: understanding how to create a layout that is divided into distinct sections, offering a clear separation between a login form and the showcase content.

3. [Book-Collection](https://github.com/sandramsc/new/tree/main/Book-Collection-app)

- **Description** I created a book collection app that enables users to add , edit and delete items (books) in their collection.

- **Key Takeaway**: Clear call-to-action buttons and an engaging showcase can encourage users to take desired actions such as those outlined in the description.

4. [Bookmarker-app](https://github.com/sandramsc/new/tree/main/Bookmarker-app)

- **Description** I created a book marker app where users can book mark their favorite site by entering i.e the site name and site url.

- **Key Takeaway**: learning how to utilize the browser's localStorage API to store and retrieve bookmarks. By checking whether the bookmarks already exist in local storage, one prevent overwriting existing data. This approach enables persistent data storage even after page refreshes.

5. [CSS-GridLayout-ImageSpan](https://github.com/sandramsc/new/tree/main/CSS-GridLayout-ImageSpan)

- **Description** This CSS Grid Layout ImageSpan landing page is a visually appealing and responsive webpage that utilizes CSS Grid to create a dynamic layout for showcasing images.

- **Key Takeaway**: This project reinforces the concept of CSS Grid and its ability to create complex layouts with ease. The grid-template-columns property is used to create a responsive grid, while grid-column is utilized to span images across multiple columns for an artistic effect.

6. [DeTektVibes](https://github.com/sandramsc/new/tree/main/DeTektVibes)

- **Description** This web app contains a simple dashboard with a panel on the left with a button, when clicked on navigates to the location that is saturated with earthquakes.

- **Key Takeaway**:  I learned how to integrate and utilize the OpenLayers library to create interactive maps, enabling smooth user interactions and dynamic data visualization.  Through the USGS earthquake data API, I acquired hands-on experience in fetching and displaying real-time geospatial data within the map interface.

7. [EarthquakeDataViz--Python-Folium](https://github.com/sandramsc/new/tree/main/EarthquakeDataViz--Python-Folium)

- **Description** Earthquake magnitude data displayed on an interactive map with simple pop up feature, designed with folium, a python library that makes it easy to visualize data that's been handled in Python on an interactive leaflet map

- **Key Takeaway**:  gained practical experience in working with geospatial data, integrating APIs and creating interactive maps.

8. [Expanding-Pearl--CSS-work](https://github.com/sandramsc/new/tree/main/Expanding-Pearl--CSS-work)

- **Description**  This CSS animation creates an engaging visual effect of an expanding circle.

- **Key Takeaway**:  through this project, I learned how to use CSS animations and keyframes to create captivating visual effects. The animation property, combined with keyframes, allowed me to smoothly transition between different states of the circle's size and opacity.

9. [Fetch-API-SpaceX](https://github.com/sandramsc/new/tree/main/Fetch-API-SpaceX)

- **Description** The Fetch API SpaceX application demonstrates the utilization of the Fetch API to retrieve data from various sources and display it dynamically on a web page.

- **Key Takeaway**:  fetching data using the Fetch API provides a powerful mechanism to retrieve and interact with external resources asynchronously within a web application.

10. [FilterableList-CitiesInEU](https://github.com/sandramsc/new/tree/main/FilterableList-CitiesInEU)

- **Description** A web application that uses the Fetch API to dynamically filter and display cities based on user input.

- **Key Takeaway**:  gained practical knowledge in working with the Fetch API, event handling, DOM manipulation.

11. [Folium-Web-App-Earthquake-Data-Vizualiser](https://github.com/sandramsc/new/tree/main/Folium-Web-App-Earthquake-Data-Vizualiser)

- **Description** This application was created with earthquake data from USGS and its main feature is to display a visual representation of all earthquakes happening in the world in the past day, while amplifying the magnitude of those earthquakes with a filled in circular pink ring.

- **Key Takeaway**:  gained experience in processing JSON data and transforming it into a pandas DataFrame for analysis. Learned how to retrieve data from an external API (USGS Earthquake API) using Python.

12. [food-ingredients-app](https://github.com/sandramsc/new/tree/main/food-ingredients-app)

- **Description** This web app enables users to enter a list of items & view locations at which these items can be purchased.

- **Key Takeaway**:  I learned how to create a navigation header in a React application (this was my very first into to react.js).  I gained experience in structuring a functional React component that encapsulates the header's content and functionality.

13. [FrontendMentorChallenge-signup-form](https://github.com/sandramsc/new/tree/main/FrontendMentorChallenge-signup-form)

- **Description** This was initially a programming challenge received as part of a job application in 2021, however re-implemented it more than a year later because I had enjoyed the challenge. THe challenge was to build out a sign-up form complete with client-side validation using JavaScript and make it look as identical to the provided image as possible.

- **Key Takeaway**:  The form has an email input which required validation, and through this I learned about using regex implementation with JavaScript.

14. [Hair-Products-Search-app](https://github.com/sandramsc/new/tree/main/Hair-Products-Search-app)

- **Description** This project showcases the development of a dynamic search interface using JavaScript's fetch function and HTML manipulation.

- **Key Takeaway**:  gained practical experience in fetching external data, filtering and manipulating arrays, dynamically generating HTML content, and enhancing user interaction.

15. [Hogwarts-Students-Search-app](https://github.com/sandramsc/new/tree/main/Hogwarts-Students-Search-app)

- **Description** This project showcases the development of a dynamic search interface using JavaScript's fetch function and HTML manipulation.

- **Key Takeaway**:  gained practical experience in fetching external data, filtering and manipulating arrays, dynamically generating HTML content, and enhancing user interaction.

16. [Image-Slider](https://github.com/sandramsc/new/tree/main/Image-Slider)

- **Description** this is an image carousel using jQuery, showcasing a dynamic way to display and navigate through a collection of images.

- **Key Takeaway**:  through this project, I gained initial skills in using jQuery, a popular JavaScript library, to manipulate the Document Object Model (DOM) and create interactive web elements.

17. [JS-Array-Methods-Cars](https://github.com/sandramsc/new/tree/main/JS-Array-Methods-Cars)

- **Description** In this project, I explored data analysis and manipulation techniques using JavaScript. The project involves an array of car data containing information about car names, assembly locations, start and end years.

- **Key Takeaway**:   by combining these array methods, I was able to perform data transformations and gain practical experience in data analysis using JavaScript.

18. [JS-Array-Methods-NBA](https://github.com/sandramsc/new/tree/main/JS-Array-Methods-NBA)

- **Description** In this project, I explored data analysis and manipulation techniques using JavaScript. The project involves an array of NBA teams data containing information about team names, divisions, wins and losses.

- **Key Takeaway**:   By combining these array methods, I was able to perform data transformations and gain practical experience in data analysis using JavaScript.

19. [Lecrae-Music](https://github.com/sandramsc/new/tree/main/Lecrae-Music)

- **Description** This web app showcases an artists website. It encompasses a visually appealing and responsive design, highlighting the artists music, books, videos, and merchandise.

- **Key Takeaway**:   this project has provided me with hands-on experience in combining HTML, CSS, and JavaScript to create an engaging and responsive web page.

20. [Lionel-Messi-The-G.O.A.T](https://github.com/sandramsc/new/tree/main/Lionel-Messi-The-G.O.A.T)

- **Description** In this project, I implemented a creative showcase hover effect using CSS. The core of this project is the showcase hover effect, which dynamically alters the appearance of a content block when hovered over.

- **Key Takeaway**:  by studying and building upon this project, I gained insights into the world of advanced CSS techniques.

21. [Model-Portfolio](https://github.com/sandramsc/new/tree/main/Model-Portfolio)

- **Description** This project involves building a slideshow carousel using JavaScript for automatic transitioning between slides.

- **Key Takeaway**:   I gained a deeper understanding of JavaScript, DOM manipulation, and event-driven programming.

22. [My-Site](https://github.com/sandramsc/new/tree/main/My-Site)

- **Description** This project involves building a personal portfolio website

- **Key Takeaway**:  through this project, I gained valuable insights into HTML and CSS for creating a visually appealing online presence.

23. [OOP_Golden-State-Worriors](https://github.com/sandramsc/new/tree/main/OOP_Golden-State-Worriors)

- **Description** This project demonstrates the utilization of JavaScript object literals and functions to create i.e profiles of basketball players from the Golden State Warriors.

- **Key Takeaway**:  I gained practical experience in creating and utilizing JavaScript object literals, defining methods, accessing properties, and leveraging the principles of code organization and reusability

24. [OOP_HandM-products](https://github.com/sandramsc/new/tree/main/OOP_HandM-products)

- **Description** This project focuses on creating a series of JavaScript objects to represent i.e different fashion products, extracting information like name, price, and color.

- **Key Takeaway**:  by working with these objects and implementing methods to summarize and display their details, I gained valuable insights into object-oriented programming and data manipulation.

25. [PDF-Viewer](https://github.com/sandramsc/new/tree/main/PDF-Viewer)

- **Description** The application allows users to view a PDF document and navigate through its pages using simple controls.

- **Key Takeaway**:  through this project, I gained valuable insights into rendering PDF documents in a web environment using JavaScript.

26. [periodictable](https://github.com/sandramsc/new/tree/main/periodictable)

- **Description** A web application that is build using vue.js to showcase a list of items i.e periodic table of elements

- **Key Takeaway**:  gained practical knowledge in working with vue.js to create a CRUD app.

27. [Photography-Landing-page](https://github.com/sandramsc/new/tree/main/Photography-Landing-page)

- **Description** In this project, I focused on styling a landing page using HTML and CSS.

- **Key Takeaway**:  the utilization of media queries, flexbox, color manipulation, and typography improvements are fundamental skills aquired inn this project.

28. [reactredux](https://github.com/sandramsc/new/tree/main/reactredux)

- **Description** This project focuses on building a React component to display a list of posts, powered by Redux for state management.

- **Key Takeaway**:  I learned how to integrate Redux into a React application for efficient state management.

29. [She-Is..](https://github.com/sandramsc/new/tree/main/She-Is..)

- **Description** In this project, I designed and coded a typewriter effect component using ES6 class syntax.

- **Key Takeaway**:  gained skills in utilizing the ES6 class syntax to create the TypeWriter class, which encapsulates the behavior of the typewriter effect. This approach demonstrates object-oriented programming principles in JavaScript.

30. [ShoppingList-app](https://github.com/sandramsc/new/tree/main/ShoppingList-app)

- **Description** This project focused on building an interactive shopping list web application using JavaScript and DOM manipulation.

- **Key Takeaway**:  by completing this project, I strengthened my understanding of JavaScript, DOM manipulation.

31. [storefront](https://github.com/sandramsc/new/tree/main/storefront)

- **Description** Storefront a web application with newsletter subscription form.

- **Key Takeaway**:  this project deepened my understanding of React's component-based development, UI composition, and the integration of various elements to create a functional and aesthetically pleasing user interface for an e-commerce website's home page.

32. [Survey-Form](https://github.com/sandramsc/new/tree/main/Survey-Form)

- **Description** An interactive survey form using HTML and CSS.

- **Key Takeaway**:  I learned how to structure an HTML form using various form elements such as text inputs, email inputs, number inputs, radio buttons, checkboxes, and text areas. Each element serves a specific purpose in collecting different types of user data.

33. [TinDog](https://github.com/sandramsc/new/tree/main/TinDog)

- **Description** a website for dogs to meet their "whoofmates" with a focus on Bootstrap5 styling.

- **Key Takeaway**:  by working on this project, I gained skills to create a visually appealing and responsive website that provide a consistent user experience across a wide range of devices and screen sizes.

34. [US-President-Search-app](https://github.com/sandramsc/new/tree/main/US-President-Search-app)

- **Description** In this project, I built a Presidential Search App that demonstrates the utilization of asynchronous data fetching, user interface interaction, and dynamic content rendering. The application fetches data from a JSON file containing information about presidents and provides a responsive interface for users to search and filter the presidents' details based on their names or numbers.

- **Key Takeaway**:  building this app added to foundational knowledge to work with data, implement user-friendly features, and create responsive web interfaces using JavaScript, HTML, and CSS.

35. [Water-Droplet--CSS-work](https://github.com/sandramsc/new/tree/main/Water-Droplet--CSS-work)

- **Description** This project focuses on creating an eye-catching animation of a water droplet using HTML and CSS.

- **Key Takeaway**:  by working on this project, I developed a stronger grasp of these fundamental CSS concepts and techniques.

36. [Zealands-landing-page](https://github.com/sandramsc/new/tree/main/Zealands-landing-page)

- **Description** In this project, I created an interactive landing page with tabbed content feature using HTML, CSS, and JavaScript. The goal was to build a user-friendly interface that allows users to switch between different sections of content by clicking on tabs.

- **Key Takeaway**:   gained valuable practical knowledge in JavaScript, HTML, and CSS. I developed skills in manipulating the DOM, handling user interactions.

## How to use the app

**Step #1** - Clone the project

```bash

$ git clone https://github.com/sandramsc/new.git

```

**Step #2**

```bash

Navigate to desired project repository and follow the respective README.md to use that project

```

## License

[![GitLicense](https://img.shields.io/badge/License-Apache-yellow.svg)](hhttps://github.com/sandramsc/new/blob/main/LICENSE)