Step 1
Downloaded a PSD filefrom a website (https://colorlib.com/wp/free-psd-ecommerce-templates/) after a Google search and created a new Shopify store in the Shopify admin.
Hi! I'm Amit and I'm a Front End Developer
I've worked for Middlestate, LLC - a design company in Visalia, CA in 2019. I've used HTML, CSS, JavaScript, as well as Netlify and Gatsby, to develop websites for various businesses in the Central Valley. In 2020, I've learned how to build and customize Shopify themes and am looking for a job as a Shopify theme developer.
Shopify Projects
These are Shopify development stores that I've built from scratch using downloaded free themes from the Shopify Theme store. Below is the process that I took to convert downloaded PSDs of e-commerce sites to Shopify sites, as well as installing and customizing required Shopify plugins. Below the process description are the actual Shopify store projects.
The Process
Step 2
Downloaded a free Shopify themefrom the Shopify theme store that is similar in layout to the downloaded PSD mockup. The downloaded theme must be compatible with the online content editor accessible in the Shopify admin.
Step 3
Created new private app and setup API.Set permissions of "Theme templates and theme assets" to "Read and write access" to generate the API credentials.
Step 4
Setup Shopify theme locallyusing ThemeKit within Powershell terminal and the theme's API credentials created in Step 3. Also initialize a new GitHub repository with the theme code.
Step 5
Edited theme elements and stylesto match the mockup as close to pixel perfect as possible while taking a mobile-first approach. Used ThemeKit with Visual Studio Code to customize the theme locally.
Step 6
Customized the content manager in the Adminby creating and customizing Schemas in the code using Shopify's Liquid templating language.
Step 7
Installed the necessary pluginsfrom Shopify's App store and styled the plugin elements on the front end to match the mockup and the styles of the rest of the site. Tested the plugin functionality to make sure it works.
Step 8
Styled the elements on the other pagesto match styles on mockup so that styles across pages look consistent and uniform.
Customized Themes
Note: Shopify development stores are password-protected by default. The password for the themes would be the store name in the site's URL. For example, the password for the Eyewear store would be 'eyecenter-store'.
Fashion Llorem
Built with: HTML, CSS, JS, Jquery, Sass, Shopify, Liquid
Downloaded the Fashion Llorem e-commerce PSD mockup from https://colorlib.com/wp/free-psd-ecommerce-templates/ and added the free Shopify theme Brooklyn to my Shopify Admin. Customized the free theme's elements using HTML, CSS, JS to match the mockup. Also used Shopify Liquid to render store products. Also installed the following Shopify plugins into the site: Auto Multi Currency Converter, Product Reviews, ShareThis Share Buttons, Wishlist Plus. Created custom sections and customized online content editor using Liquid Schemas.
Eyewear
Built with: HTML, CSS, JS, Sass, Shopify, Liquid
Downloaded PSD of mockup here: https://downloadfreepsd.com/free-psd/eyewear-sunglasses-store-website-template-free-psd and used the default Debut shopify theme as a template. Using HTML and Sass, customized the layout of the Debut theme and used Liquid to retrieve and render product data. Also used Liquid to create Schemas to customize the online site editor in the admin.
Certifications
🔷 Theme Development
Middlestate Projects
These were the projects I did for Middlestate, LLC. These were contract jobs for which I also did periodic updates to add new content/features. The technologies that I used were mainly NetlifyCMS, Gatsby, and Sass.
Grizzlyfest
Music Festival
Built with: Jade, Pug
This project was a completed website that was handed to me to revamp the homepage using a new layout and new content.
I learned about Jade and Pug, their similarities compared to HTML and CSS, and also how to work with another developers' code.
Cellar Door
Music Lounge & Bar
Built with: NetlifyCMS, Gatsby, Sass, GraphQL
This website was originally a PSD to HTML project that I developed. I later rebuilt it using Netlify & Gatsby. Doing this, I was able to increase the speed of the website from 32% (according to Google PageSpeed Insights) to 66% for mobile and from 92% to 94% for desktop, while also enabling the client to publish changes to the sites' content using Netlify's CMS dashboard.
Due to the pandemic, the business remodeled their website to another contractor, so the new website can be viewed here: https://cellardoor101.com/. The netlify site is the one I built.
DataHarvest
Blockchain Company
Built with: NetlifyCMS, Gatsby, Sass, GraphQL
This is a rebuild for a website that was originally built using WordPress. That website can visited at http://dataharvest.co/. I developed the rebuild using NetlifyCMS, Gatsby, Sass, and GraphQL. The website for the rebuild is linked below (along with the link to the GitHub code).
Ryan Clark
Middlestate Founder - Director of Technology
"Amit has a great work ethic and is always looking to learn and try new stuff. His attitude about new challenges is great and works well in a group or solo."
Send Me a Message
