PORTFOLIO - WORK

School

Image of Green Spirit Project

TEAM GREEN SPIRIT

About:
Developed a dynamic and user-friendly website for Team Green Spirit, a small business specializing in eco-friendly products and community events

Tech Stack:
HTML, CSS, JAVASCRIPT, BASIC PHP, BASIC SEO, PHOTOSHOP, ILLUSTRATOR

Image of Green Spirit Project

Green Spirit was an end-to-end design project encompassing logos, product cards, and website coding!

Image of Green Spirit Cards

My main goal was to create a calm and soothing vibe, reflecting the company's focus on yoga, health, and well-being.

𓁺 𓁻 𓁹 𓁼 𓁿


I aimed for a simple design to improve user experience and information architecture. By placing the most important information, like current events and details about the company, right on the front page, I ensured everything was easily accessible.

Image of Green Spirit Cards

I designed about 60 different product cards, which were printed and are now included with every purchase at the store.

Image of Green Spirit Cards

Using JavaScript, I crafted a "Pick A Card" game using those cards, where visitors can receive messages and answers from destiny. Each card in the game represents a product from the shop, allowing visitors to explore and learn more about the store's offerings. This interactive feature encourages them to return to the site, providing an engaging way to discover and potentially purchase items they're interested in. Feel free to try it out:

DRA
ETT
KORT

Responsive & Findable

The website is dynamic and responsive, offering tailored designs for different screen sizes.


Basic SEO applied:

  • • XML Sitemap
  • • Robots.txt
  • • Keyword Research
  • • Title Tags
  • • Meta Descriptions


After implementing these basic SEO strategies, the website began appearing on Google for relevant local searches, leading many customers to discover the store online!

Image of SEO Green Spirit

ROOM FOR IMPROVEMENT

Given my limited front-end development experience before creating this website, I'm satisfied with the results. However, there's certainly plenty of room for improvement.

A list of things I would change today:

• Perfect Mobile Responsiveness:
Issue: The site does not adjust perfectly to mobile screens.
Improvement: Enhance the CSS to ensure better readability and navigation on smaller devices.

• Unified Stylesheet:
Issue: Multiple stylesheets could make maintenance harder.
Improvement: Consolidate styles into a single, well-organized stylesheet using modular CSS for better reuse and maintainability.

• Loading Performance:
Issue: Images and other media might be slowing down the page.
Improvement: Optimize images and leverage lazy loading to improve page load times.

• Consistency:
Issue: Visual elements may lack consistency across pages.
Improvement: Ensure consistent use of fonts, colors, and layout to provide a cohesive user experience.

• Reusable code:
Issue: Lack of consistency in design elements requires unique classes and IDs.
Improvement: Rebuild the code structure to be simpler and more basic, using a single stylesheet.



Visit TeamGreenSpirit

Image of PaBildning-project

PABILDNING

About:
Developed a user-friendly website for an education company in Sweden, ensuring seamless navigation and a clean design

Tech Stack:
HTML, CSS, BASIC JAVASCRIPT

Image of PABILDNING-project

PaBildning already had a graphic profile when they contacted me to create a basic professional website that fit their existing branding.

Image of PABILDNING-project

My main goal was to create a professional design that aligns with PaBildning's work in education and schools. I focused on making the website basic, trustworthy, and easy to navigate.

Image of PABILDNING-project

Using HTML and CSS, I created modules for important content to optimize space usage.

Image of PABILDNING-project

I aimed to ensure visitors on the website can quickly find important information and reach their end goal without unnecessary delays.

Since booking a meeting to enroll in a course is PaBildning's primary objective for visitors, you'll find the "Book a Meeting" button prominently displayed on nearly every page of the website

ROOM FOR IMPROVEMENT

Given my limited front-end development experience before creating this website, I'm satisfied with the results. However, there's certainly plenty of room for improvement.

A list of things I would change today:

• Messy CSS Structure:
Issue: The website's stylesheets are currently disorganized, with multiple files lacking a clear structure or pattern.
Improvement: Combine & organize multiple stylesheets into one or a few files to reduce HTTP requests and simplify management.

• Code Quality:
Issue: Lack of adherence to best practices and maintainability concerns
Improvement: Review and refactor code to optimize HTML, CSS, and JavaScript for efficiency and readability

• Performance Optimization:
Issue: Suboptimal page load times due to uncompressed images, inefficient CSS, and unoptimized JavaScript
Improvement: Implement image optimization techniques, compress CSS files, and defer non-critical JavaScript to enhance loading speed and user experience. Consider lazy loading images for further performance gains.



Visit PaBildning

Wanna se more?
Go to School-projects