PHP - Php Portfolio
I would like to create a portfolio for future reference and for potential employers.
What's the best way to do this? Should I make individual pages with examples of different code or create a website which functions to demonstrate the code? Thanks Similar TutorialsI had an interesting idea, but I don't know if it exsisted... Say for example if I had designed the CNN homepage, that clearly gets updated every few minutes with new news, if I wanted to show this in my portfolio as as example of a project I have designed, is there a way of creating a thumbnail or image of the site, which would be updated in real time to go along side the description? (I say real time, but I guess I mean every couple of hours or so) If anyone has seen anything like this or has any suggestions, let me know what you think! Hi guys I am busy with a website for myself and need some help on this, because I am stuck and not getting this right.
Can someone tell me where is a tutorial or where I can find a code to help me with this , I have attached a pictures on what I need and want. the second image is what need to happen when someone click on the image in the Portfolio
Below Is the html code for this Portfolio Gallery but need it to be like in a database where I can upload or add new work.
<!-- PORTFOLIO --> <div class="row portfolio-page"> <div class="hide" id="project-info"> <div id="content"> <i class="fa-times fa back"></i> <div class="row"> <div class="large-11 columns"> <h2 class="project-title">Super Design</h2> </div> <div class="large-6 columns"> <div class="project-images"> <div class="item-list"> <ul class=""> <li> <a href="#"> <img width="500" height="380" alt="13tndZF" class="attachment-project-thumb" src="assets/images/12.jpg"> </a> </li> </ul> </div> </div> </div> <div class="large-6 columns project-content"> <p>Donec pulvinar porttitor felis ac tincidunt. Quisque sit amet ligula quis lacus pellentesque luctus consequat aliquam neque. Nunc ac elit eu odio consequat rutrum. Suspendisse nec facilisis turpis. </p> <p>Proin egestas nisl in nibh condimentum, nec ornare erat egestas. Fusce dui est, gravida ut sem vitae, tincidunt pharetra massa. In erat libero, fermentum suscipit pretium vel, eleifend vitae odio. Nullam quis mi velit. Cras ut aliquet orci.</p> <p>Curabitur sollicitudin massa quis magna cursus, a auctor dolor imperdiet. Nullam ultrices pretium mauris, vel fermentum nisl venenatis ac. Aenean adipiscing lorem a purus viverra, eu</p> </div> </div> </div> </div> <ul class="small-block-grid-1 large-block-grid-3"> <li class="article portfolio-item" id="160"> <figure> <img width="500" height="380" src="assets/images/12.jpg" alt="13tndZF" /> <figcaption class="text-center"> <h3>Super Design</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="157"> <figure> <img width="500" height="380" src="assets/images/13.jpg" alt="1j5JfNg" /> <figcaption class="text-center"> <h3>Cool Project</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="153"> <figure> <img width="500" height="380" src="assets/images/14.jpg" alt="1m7ZhI3" /> <figcaption class="text-center"> <h3>New Project</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="94"> <figure> <img width="500" height="380" src="assets/images/15.jpg" alt="1a2n0Ck" /> <figcaption class="text-center"> <h3>Sed porttitor</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="79"> <figure> <img width="500" height="380" src="assets/images/16.jpg" alt="7714491824_ef36a096ff_b" /> <figcaption class="text-center"> <h3>Kid Play</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="73"> <figure> <img width="500" height="380" src="assets/images/17.jpg" alt="8364043731_9da828b5c7_h" /> <figcaption class="text-center"> <h3>Project Two</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="71"> <figure> <img width="500" height="380" src="assets/images/18.jpg" alt="almond-blossom-5378_1280" /> <figcaption class="text-center"> <h3>Project One</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="96"> <figure> <img width="500" height="380" src="assets/images/19.jpg" alt="Youthful learners" /> <figcaption class="text-center"> <h3>Etiam at commodo</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> <li class="article portfolio-item" id="14"> <figure> <img width="500" height="380" src="assets/images/20.jpg" alt="9862145525_c08b245398_h" /> <figcaption class="text-center"> <h3>Project 1</h3> </figcaption> </figure> <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span> </li> </ul> </div> <!-- END PORTFOLIO/> --> </div> </section> This topic has been moved to PHP Applications. http://www.phpfreaks.com/forums/index.php?topic=345741.0 So I was working on this site past month. I know it is too much time for such simple website, but I am a perfectionist and I need to have everything perfect. It is using JQuery, Twitter Bootstrap (I am deep fan of TWBS and I am using it on almost every website I make) and Yeti(?probably, I forgot ) theme from Bootswatch. Of course also FontAwesome for YT, FB, Twitter an GitHub icons. On smaller resolutions it is looking epic (1024x768 etc etc), on mobile devices too, but I am not sure how it looks on HD, HD-ready resolutions (yes, I can use zoom-out in my browser, but it is misleading...). What do you think?
P.S.: Projects in "My Recent Work" are clickable and that will toggle description with some fancy fade effect (using jQuery.toggle()).
P.S.2: I am not sure if I should vertically-center contact text or let it be with big top and bottom padding. What do you think?
P.S.3: Oh, I almost forgot. Website link is here http://deathbeam.github.io/. Yes, I am using GitHub pages, I love git. And nope, I do not bought my own domain yet.
P.S.4: I accept "brutal" criticizm, feel free to be rude
P.S.5: (this is starting to be annoying lol): If you guys have time, can you please tell me what feeling do you have from my subsite http://deathbeam.git...fwphp/index.htm. I tried to keep everything as simple as possible, but I am not sure if it is not too much :/
P.S.6: I am really sorry for my English...
Edited by deathbeam, 08 September 2014 - 01:08 PM. I am trying to find a job doing PHP and MySQL. I have a portfolio section where I created a really simple Postcard application where visitors can send people they know online postcards via email after they click on confirmation link i send them using sha1() as token in a temp table that holds information. I was also going to add a section where I show usage of Regular Expressions and things. Does anybody have any suggestions what other web apps or whatever I could add to this section to make my portfolio section really POP to potential employers? Any suggestions are welcome and much appreciated. Hi, I've attempted to put together a portfolio on my WP blog using php, jquery, and this tutorial- http://wp.tutsplus.com/tutorials/theme-development/create-a-quicksand-portfolio-with-wordpress/ I've gone to my WP site and tried to put it together, but nothing seems to work. Aside from "what's wrong?" I'd also like to know how do I utilize these features to display my portfolio? (Simply post images in the page/post, set featured images, etc.) My apologies for this perhaps not being the easiest question, but thorough help and advice is greatly appreciated. If further information is needed, please let me know. functions.php <?php // portfolio include("portfolio/portfolio-post-types.php"); // Register our scripts function register_js() { if ( !is_admin() ) { wp_register_script( 'quicksand', get_template_directory_uri() . '/js/jquery.quicksand.js', 'jquery' ); wp_register_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', 'jquery' ); wp_register_script( 'custom', get_template_directory_uri() . '/js/jquery.custom.js', 'jquery', '1.0', true ); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'quicksand' ); wp_enqueue_script( 'easing' ); wp_enqueue_script( 'custom' ); } } add_action('init', 'register_js'); // Register our styles function register_css() { if (!is_admin()) { wp_register_style( 'prettyPhoto', get_template_directory_uri() . '/css/prettyPhoto.css' ); wp_enqueue_style( 'prettyPhoto' ); } } add_action( 'init', 'register_css' ); // sidebar functions if(function_exists('register_sidebar')) { register_sidebar(); } // add thumbnail support add_theme_support('post-thumbnails'); // disable autoformat with raw function my_formatter($content) { $new_content = ''; $pattern_full = '{(\[raw\].*?\[/raw\])}is'; $pattern_contents = '{\[raw\](.*?)\[/raw\]}is'; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter('the_content', 'wpautop'); remove_filter('the_content', 'wptexturize'); add_filter('the_content', 'my_formatter', 99); ?> portfolio.php <?php /* Template Name: Portfolio */ ?> <?php get_header(); ?> <!-- #content BEGIN --> <div id="content" class="clearfix"> <ul class="filterable-grid clearfix"> <?php $wpbp = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' =>'-1' ) ); ?> <?php if ($wpbp->have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post(); ?> <?php $terms = get_the_terms( get_the_ID(), 'filter' ); ?> <li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>"> <?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) : ?> <?php the_post_thumbnail('portfolio'); ?> <?php endif; ?> <p><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p> </li> <?php $count++; ?> <?php endwhile; endif; ?> <?php $large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'fullsize', false, '' ); $large_image = $large_image[0]; ?> <?php wp_reset_query(); ?> </ul> </div><!-- #content END --> <?php get_sidebar(); ?> <?php get_footer(); ?> portfolio-post-types.php <?php // function: post_type BEGIN function post_type() { $labels = array( 'name' => __( 'Portfolio'), 'singular_name' => __('Portfolio'), 'rewrite' => array( 'slug' => __( 'portfolio' ) ), 'add_new' => _x('Add Item', 'portfolio'), 'edit_item' => __('Edit Portfolio Item'), 'new_item' => __('New Portfolio Item'), 'view_item' => __('View Portfolio'), 'search_items' => __('Search Portfolio'), 'not_found' => __('No Portfolio Items Found'), 'not_found_in_trash' => __('No Portfolio Items Found In Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'hierarchical' => false, 'menu_position' => null, 'supports' => array( 'title', 'editor', 'thumbnail' ) ); register_post_type(__( 'portfolio' ), $args); } // function: post_type END // function: portfolio_messages BEGIN function portfolio_messages($messages) { $messages[__( 'portfolio' )] = array( 0 => '', 1 => sprintf(('Portfolio Updated. <a href="%s">View portfolio</a>'), esc_url(get_permalink($post_ID))), 2 => __('Custom Field Updated.'), 3 => __('Custom Field Deleted.'), 4 => __('Portfolio Updated.'), 5 => isset($_GET['revision']) ? sprintf( __('Portfolio Restored To Revision From %s'), wp_post_revision_title((int)$_GET['revision'], false)) : false, 6 => sprintf(__('Portfolio Published. <a href="%s">View Portfolio</a>'), esc_url(get_permalink($post_ID))), 7 => __('Portfolio Saved.'), 8 => sprintf(__('Portfolio Submitted. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))), 9 => sprintf(__('Portfolio Scheduled For: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview Portfolio</a>'), date_i18n( __( 'M j, Y @ G:i' ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))), 10 => sprintf(__('Portfolio Draft Updated. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))), ); return $messages; } // function: portfolio_messages END // function: portfolio_filter BEGIN function portfolio_filter() { register_taxonomy( __( "filter" ), array(__( "portfolio" )), array( "hierarchical" => true, "label" => __( "Filter" ), "singular_label" => __( "Filter" ), "rewrite" => array( 'slug' => 'filter', 'hierarchical' => true ) ) ); } // function: portfolio_filter END add_action( 'init', 'post_type' ); add_action( 'init', 'portfolio_filter', 0 ); add_filter( 'post_updated_messages', 'portfolio_messages' ); jquery.custom.js Code: [Select] function portfolio_quicksand() { // Setting up our variables var $filter; var $container; var $containerClone; var $filterLink; var $filteredItems // Set our filter $filter = $('.filter li.active a').attr('class'); // Set our filter link $filterLink = $('.filter li a'); // Set our container $container = $('ul.filterable-grid'); // Clone our container $containerClone = $container.clone(); // Apply our Quicksand to work on a click function // for each of the filter li link elements $filterLink.click(function(e) { // Remove the active class $('.filter li').removeClass('active'); // Split each of the filter elements and override our filter $filter = $(this).attr('class').split(' '); // Apply the 'active' class to the clicked link $(this).parent().addClass('active'); // If 'all' is selected, display all elements // else output all items referenced by the data-type if ($filter == 'all') { $filteredItems = $containerClone.find('li'); } else { $filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); } // Finally call the Quicksand function $container.quicksand($filteredItems, { // The duration for the animation duration: 750, // The easing effect when animating easing: 'easeInOutCirc', // Height adjustment set to dynamic adjustHeight: 'dynamic' }); }); $container.quicksand($filteredItems, function () { lightbox(); } ); } function lightbox() { jQuery("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed:'fast', slideshow:5000, theme:'pp_default', show_title:false, overlay_gallery: false, social_tools: false }); } if(jQuery().prettyPhoto) { lightbox(); } This topic has been moved to JavaScript Help. http://www.phpfreaks.com/forums/index.php?topic=319419.0 |