Portfolio List using Ionic Framework

In this example below you will see how to do a Portfolio List using Ionic Framework with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ronycsdu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ronycsdu ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Portfolio List using Ionic Framework</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="portfolio">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="portfolioController">
    
      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">Portfolios</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item ng-repeat="item in portfolios" ng-href="#">
              <img ng-src="https://www.scribblevision.com.au/{{item.images[0].loc}}">
            </ion-item>
          </ion-list>
        </ion-content>
      </ion-view>
    
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ronycsdu/portfolio-list-using-ionic-framework-MYqYyd */
img{
  width: 100%;  
}

a.item-content{
  padding: 0 !important;
  border: 0 !important;
}

/*Downloaded from https://www.codeseek.co/ronycsdu/portfolio-list-using-ionic-framework-MYqYyd */
angular.module('portfolio', ['ionic'])



.controller("portfolioController", function($scope, $http){
	$scope.portfolios = [{"title":"Branding Applications","content":"With our Gippsland graphic design team and in-house digital printing, we can offer a one-stop shop for all your branding and stationery needs, working with existing logos or creating a fresh new brand to keep your business at the top of its game.","images":[{"loc":"images/portfolio/stationery-01.jpg"},{"loc":"images/portfolio/stationery-02.jpg"},{"loc":"images/portfolio/stationery-04.jpg"}],"videos":[]},{"title":"Cargo Lounge","content":"Sophisticated and modern was the required mix for Latrobe Valley café, bar and entertainment venue, the Cargo Lounge, which was seeking a new logo to represent the business. We created a wild wing design and used a modern font to capture the excitement that comes with a rad night out.","images":[{"loc":"images/portfolio/cargo-01.jpg"}],"videos":[]},{"title":"Breed Street Clinic","content":"An apple a day might keep the doctor away, but if you’ve been avoiding your fruit and veg then you’ll want to find medical help without fuss. That’s now an easy ask thanks to the new website we developed for the Breed St Clinic, in the Latrobe Valley. Clean lines, crystal imagery and mobile responsiveness all come together for an online presence with impact. The doctor’s verdict? Fighting fit.","images":[{"loc":"images/portfolio/bsc-01.jpg"},{"loc":"images/portfolio/bsc-02.jpg"},{"loc":"images/portfolio/bsc-03.jpg"}],"videos":[]},{"title":"Boulevard","content":"Latrobe Valley hairdressing business Boulevard Salon wanted a new logo that offered instant recognition. Our graphic design team proved it was a cut above the rest, developing a brand that incorporated classic scissors symbolism and contemporary styling. Snip!","images":[{"loc":"images/portfolio/boulevard-01.jpg"},{"loc":"images/portfolio/boulevard-02.jpg"}],"videos":[]},{"title":"Pull-Up Banners","content":"Pull-up banners provide a creative mobile marketing solution for all kinds of businesses. Portable, light and easy to transport, many Gippsland firms have found them ideal for maximising exposure both front of store or on location. Available in a range of colours, sizes and styles, they can be custom designed.","images":[{"loc":"images/portfolio/banners-01.jpg"},{"loc":"images/portfolio/banners-02.jpg"},{"loc":"images/portfolio/banners-03.jpg"},{"loc":"images/portfolio/banners-04.jpg"},{"loc":"images/portfolio/banners-05.jpg"}],"videos":[]},{"title":"Annual Reports","content":"Done properly, your annual report is a terrific opportunity to showcase your business as well as provide an interesting read. East Gippsland Shire and Latrobe Regional Hospital are among those who’ve decided to farewell yawn and welcome a new dawn – bright and cheery annual reports with enthusiastic design, sleek imagery and entertaining copy.","images":[{"loc":"images/portfolio/ar-01.jpg"},{"loc":"images/portfolio/ar-02.jpg"},{"loc":"images/portfolio/ar-03.jpg"},{"loc":"images/portfolio/ar-04.jpg"}],"videos":[]},{"title":"Asset Finance Management","content":"Critical to success in today’s competitive commercial environment is your brand. Asset Finance Management wanted a professional logo design that would set it apart. We liked the idea of a clean, folded look teamed with bright red and added layered triangles, including to the unique central 'F', capturing the notion that AFM and its clients were continuously moving forward.","images":[{"loc":"images/portfolio/afm-01.jpg"},{"loc":"images/portfolio/afm-02.jpg"},{"loc":"images/portfolio/afm-03.jpg"}],"videos":[]},{"title":"Pottinger TVC","content":" Pottinger's brief to us was to create a television commercial that conveyed a sense of family history and values along with quality, innovative product development. We combined images of Pottinger's magnificent, world-class farming machinery with a singular piano as the audio bed to keep the story simple and emotive, bringing the audience's attention to the sheer majesty of these massive machines.","images":[],"videos":[{"loc":"7KSKvv-Wmm8"}]},{"title":"Andrew Ronalds MP","content":"Crucial to the development of a website for Gippsland MP Andrew Ronalds was the capacity for his electorate office staff to update the site. Our simple-to-use content management system meant that even staff with no website administration experience could confidently manage the content. Straightforward navigation extended the ease of use to Mr Ronalds’s constituents.","images":[{"loc":"images/portfolio/andrewronalds-01.jpg"},{"loc":"images/portfolio/andrewronalds-02.jpg"}],"videos":[]},{"title":"Darren Chester MP","content":"Gippsland MP Darren Chester had a special requirement in addition to his request for a stylish, easy-to-navigate website: he also needed a site that was easy to update. Our web development team built a website specific to the MP’s needs, installing a content management system that allows both Darren and his staff, no matter their IT capability, the capacity to create and upload new content.","images":[{"loc":"images/portfolio/dc-01.jpg"},{"loc":"images/portfolio/dc-02.jpg"}],"videos":[]},{"title":"Danae Photography","content":"Danae Photography seconded us for website development and it was pretty clear that the stunning work of this award-winning photography studio had to be the star. Our Gippsland website design team created a simple, yet sophisticated online presence that captured the elegance of Danae completely.","images":[{"loc":"images/portfolio/danae-01.jpg"},{"loc":"images/portfolio/danae-02.jpg"}],"videos":[]},{"title":"Dalkeith Heights","content":"Dalkeith Heights Independent Living wanted a website to showcase its homes and facilities to its key clientele – older people who were definitely young at heart. Providing website design that teamed easy navigation with elegant composition and mobile responsiveness proved the ideal solution.","images":[{"loc":"images/portfolio/dalkeith-01.jpg"}],"videos":[]},{"title":"Latrobe 2026","content":"The articulation of Latrobe City Council’s vision Latrobe 2026 via online and print mediums required a branding and identity workup to take it into the future. Our graphic design team juxtaposed sunset hues with industrial grey to create a cutting-edge brand that we then applied to print design – such as annual reports – and when developing the Latrobe 2026 website.","images":[{"loc":"images/portfolio/2026-01.jpg"},{"loc":"images/portfolio/2026-02.jpg"},{"loc":"images/portfolio/2026-03.jpg"},{"loc":"images/portfolio/2026-04.jpg"},{"loc":"images/portfolio/2026-05.jpg"}],"videos":[]},{"title":"Anchor Homes Booklet Design","content":"<p>Anchor Homes approached us to modernise its home range brochure. Sleek and modern, the styling captures the quality of the transprtable and kit built homes while maintaining the stroing brand and identity of Anchor Homes.</p><p>Related projects include the Anchor Homes Website Project. Check it out here: <a href=\"https://www.anchorhomes.com.au\" target=\"_blank\">Anchor Homes Website Project</a></p>","images":[{"loc":"images/portfolio/anchor-01.jpg"},{"loc":"images/portfolio/anchor-02.jpg"},{"loc":"images/portfolio/anchor-03.jpg"},{"loc":"images/portfolio/anchor-04.jpg"}],"videos":[]},{"title":"EBBWEC 2014 Season Brochure","content":"<p>The EBBWEC season launch is a project that involves us working very closely with the entertainment centre to produce, among other digital and printed assets, an exciting event brochure that showcases all scheduled events for the coming year.</p><p>Related projects include the EBBWEC Website Project. Check it out here: <a href=\"portfolio/ebbwec-website\">EBBWEC Website Project</a></p>","images":[{"loc":"images/portfolio/ebbwec-14-01.jpg"},{"loc":"images/portfolio/ebbwec-14-02.jpg"},{"loc":"images/portfolio/ebbwec-14-03.jpg"}],"videos":[]},{"title":"EBBWEC Website Development","content":"With exciting new branding redefining the entertainment centre’s identity, a website that continued the makeover was in order. Using modern web technologies, we conceived a refined, uncluttered design that worked as well on a smart phone as it did on home computer, an outcome worthy of a standing ovation.","images":[{"loc":"images/portfolio/ebbwec-web-01.jpg"},{"loc":"images/portfolio/ebbwec-web-02.jpg"}],"videos":[]},{"title":"Federation Training TVC","content":"<p>Federation Training needed a simple yet sophisticated TV campaign to drive enrolments and extend recognition of the organisation, established following the amalgamation of Advance TAFE and GippsTAFE in May of this year.</p><p>The brief was to produce a 30-second TVC utilising the images and voices of real students and drawing on Federation Training's exciting new brand.</p><p>Now 30 seconds isn't much, and in that time we had to convey a clear message - with sound, with words, with images. It's a fine line between too much information and not enough, so getting the balance just right was imperative.</p>","images":[],"videos":[{"loc":"reLKsmKugY8"}]}];
  
})

Comments