You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@oodt.apache.org by ma...@apache.org on 2014/12/21 01:06:54 UTC

svn commit: r1647066 - /oodt/cms_site/trunk/content/components.md

Author: magicaltrout
Date: Sun Dec 21 00:06:54 2014
New Revision: 1647066

URL: http://svn.apache.org/r1647066
Log:
change component design

Modified:
    oodt/cms_site/trunk/content/components.md

Modified: oodt/cms_site/trunk/content/components.md
URL: http://svn.apache.org/viewvc/oodt/cms_site/trunk/content/components.md?rev=1647066&r1=1647065&r2=1647066&view=diff
==============================================================================
--- oodt/cms_site/trunk/content/components.md (original)
+++ oodt/cms_site/trunk/content/components.md Sun Dec 21 00:06:54 2014
@@ -105,85 +105,89 @@
 		</section>
 	</div>
 </div>
+<div class="row">
+    <div class="twelve columns">
+        <!-- CATEGORIES-->
+        <!--<section id="options" class="clearfix">
+        <ul id="filters" class="option-set clearfix" data-option-key="filter">
+                <li><a href="#filter" data-option-value="*" class="portofoliobutton selected">Show all</a></li>
+                <li><a href="#filter" data-option-value=".cas" class="portofoliobutton">Catalog and Archive (CAS)</a></li>
+                <li><a href="#filter" data-option-value=".grid" class="portofoliobutton">Grid</a></li>
+                <li><a href="#filter" data-option-value=".common" class="portofoliobutton">Common</a></li>
+                    <li><a href="#filter" data-option-value=".agility" class="portofoliobutton">Agility</a></li>
+        </ul>
+        </section>-->
+    </div>
+</div>
+
 <div id="portofolio" class="row">
+    <div class="two columns">
+        <ul>
+            <li>All</li>
+            <li>Catalog and Archive</li>
+            <li>Grid</li>
+            <li>Common</li>
+            <li>Agility</li>
+        </ul>
+        </div>
     <!-- Project 1-->
-	<div class="six columns category agility">
-		<h5>Agility</h5>
-		<p>
-         A Python re-implementation of the <a href="components/grid.html">OODT Grid</a> with a focus on high performance, accelerated development and integration into existing systems. 
-		</p>
-		<div class="portofoliothumb">
-			<div class="portofoliothumboverlay">
-				<div class="viewgallery">
-					<!--image here -->
-					<a data-gal="prettyPhoto[gallery]" href="images/agility.jpg"><img src="images/agility.jpg" class="left galleryicon" alt=""> Gallery</a>
-				</div>
-				<div class="inner">
-					<a class="projectdetail" href="components/agility.html">+ Details</a>
-				</div>
-			</div>
-			<!-- image here -->
-			<img src="images/agility.jpg" alt="">
-		</div>
-	</div>
-	<!-- Project 2-->
-    <div class="six columns category cas">
-        <h5>App</h5>
+    <div class="five columns category agility">
+        <div class="portofoliothumb">
+            <div class="agilityBox"></div>
+        </div>
         <p>
-        Graphical User Interface applications for both <a href="components/filemgr.html">File Manager</a> and <a href="components/workflow.html">Workflow Manager</a> components.
+         A Python re-implementation of the <a href="http://oodt.staging.apache.org/components/grid.html">OODT Grid</a> with a focus on high performance, accelerated development and integration into existing systems. 
         </p>
+
+    </div>
+    <!-- Project 2-->
+    <div class="five columns category cas">
         <div class="portofoliothumb">
-            <div class="portofoliothumboverlay">
-                <div class="viewgallery">
-                    <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/app.jpg"><img src="images/app.jpg" class="left galleryicon" alt=""> Gallery</a>
-                </div>
-                <div class="inner">
-                    <a class="projectdetail" href="components/app.html">+ Details</a>
-                </div>
-            </div>
+
             <!-- image here -->
-            <img src="images/app.jpg" alt="">
-        </div>
-    </div>
-    <!-- Project 3-->
-    <div class="six columns category cas">
-        <h5>Balance</h5>
+            <div class="appBox"></div>
+            </div>
         <p>
-        A suite of PHP-powered application interface components including a skeleton framework for building UI's on top of CAS components. 
+        Graphical User Interface applications for both <a href="http://oodt.staging.apache.org/components/filemgr.html">File Manager</a> and <a href="http://oodt.staging.apache.org/components/workflow.html">Workflow Manager</a> components.
         </p>
+
+    </div>
+    </div>
+    <div id="portofolio1" class="row">
+
+    <!-- Project 3-->
+    <div class="five offset-by-two columns category cas">
         <div class="portofoliothumb">
-            <div class="portofoliothumboverlay">
-                <div class="viewgallery">
-                    <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/balance.jpg"><img src="images/balance.jpg" class="left galleryicon" alt=""> Gallery</a>
-                </div>
-                <div class="inner">
-                    <a class="projectdetail" href="components/balance.html">+ Details</a>
-                </div>
-            </div>
+
             <!-- image here -->
-            <img src="images/balance.jpg" alt="">
+            <div class="balanceBox"></div>
         </div>
+        <p>
+        A suite of PHP-powered application interface components 
+including a skeleton framework for building UI's on top of CAS 
+components. 
+        </p>
+
     </div>
     <!-- Project 4-->
     <div class="six columns category cas">
         <h5>Catalog</h5>
         <p>
-        The OODT CAS Virtual Catalog and Integration Service is an effort to virtualize underlying catalogs for use in the CAS system.
+        The OODT CAS Virtual Catalog and Integration Service is an 
+effort to virtualize underlying catalogs for use in the CAS system.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/catalog.jpg"><img src="images/catalog.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/catalog.jpg"><img src="Apache%20OODT_files/catalog.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/catalog.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/catalog.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/catalog.jpg" alt="">
+            <img src="Apache%20OODT_files/catalog.jpg" alt="">
         </div>
     </div>
     <!-- Project 5-->
@@ -196,14 +200,14 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/cli-wallpaper.png"><img src="images/cli-wallpaper.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/cli-wallpaper.png"><img src="Apache%20OODT_files/cli-wallpaper.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/cli.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/cli.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/cli-wallpaper.png" alt="">
+            <img src="Apache%20OODT_files/cli-wallpaper.png" alt="">
         </div>
     </div>
     <!-- Project 6-->
@@ -216,54 +220,57 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/Cluster.png"><img src="images/Cluster.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/Cluster.png"><img src="Apache%20OODT_files/Cluster.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/cluster.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/cluster.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/Cluster.png" alt="">
+            <img src="Apache%20OODT_files/Cluster.png" alt="">
         </div>
     </div>
     <!-- Project 7-->
     <div class="six columns category cas">
         <h5>Common Utilities</h5>
         <p>
-        Just as it says on the tin! Common utility functions, interfaces and packages which are used throughout the OODT codebase.
+        Just as it says on the tin! Common utility functions, interfaces
+ and packages which are used throughout the OODT codebase.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/commons.jpg"><img src="images/commons.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/commons.jpg"><img src="Apache%20OODT_files/commons.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/commons.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/commons.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/commons.jpg" alt="">
+            <img src="Apache%20OODT_files/commons.jpg" alt="">
         </div>
     </div>
     <!-- Project 8-->
     <div class="six columns category cas">
         <h5>OODT Core</h5>
         <p>
-        A core Maven module from which all others inherit configuration in an effort to maintain consistency in versioning and dependency management.
+        A core Maven module from which all others inherit configuration 
+in an effort to maintain consistency in versioning and dependency 
+management.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/core.jpg"><img src="images/core.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/core.jpg"><img src="Apache%20OODT_files/core.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/core.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/core.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/core.jpg" alt="">
+            <img src="Apache%20OODT_files/core.jpg" alt="">
         </div>
     </div>
         <!-- Project 9-->
@@ -276,14 +283,14 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/crawler.png"><img src="images/crawler.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/crawler.png"><img src="Apache%20OODT_files/crawler.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/crawler.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/crawler.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/crawler.png" alt="">
+            <img src="Apache%20OODT_files/crawler.png" alt="">
         </div>
     </div>
     <!-- Project 10-->
@@ -296,36 +303,38 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/curator.jpg"><img src="images/curator.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/curator.jpg"><img src="Apache%20OODT_files/curator.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/curator.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/curator.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/curator.jpg" alt="">
+            <img src="Apache%20OODT_files/curator.jpg" alt="">
+        </div>
+    </div>
+    <!-- Project 11-->
+    <div class="six columns category cas">
+        <h5>File Manager</h5>
+        <p>
+            Components that deal with extracting metadata from 
+resources, archiving them for long term storage, and providing discovery
+ functions for later retrieval. 
+        </p>
+        <div class="portofoliothumb">
+            <div class="portofoliothumboverlay">
+                <div class="viewgallery">
+                    <!--image here -->
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/filemgr.jpg"><img src="Apache%20OODT_files/filemgr.jpg" class="left galleryicon" alt=""> Gallery</a>
+                </div>
+                <div class="inner">
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/filemgr.html">+ Project Details</a>
+                </div>
+            </div>
+            <!-- image here -->
+            <img src="Apache%20OODT_files/filemgr.jpg" alt="">
         </div>
     </div>
-	<!-- Project 11-->
-	<div class="six columns category cas">
-		<h5>File Manager</h5>
-		<p>
-	        Components that deal with extracting metadata from resources, archiving them for long term storage, and providing discovery functions for later retrieval. 
-		</p>
-		<div class="portofoliothumb">
-			<div class="portofoliothumboverlay">
-				<div class="viewgallery">
-					<!--image here -->
-					<a data-gal="prettyPhoto[gallery]" href="images/filemgr.jpg"><img src="images/filemgr.jpg" class="left galleryicon" alt=""> Gallery</a>
-				</div>
-				<div class="inner">
-					<a class="projectdetail" href="components/filemgr.html">+ Project Details</a>
-				</div>
-			</div>
-			<!-- image here -->
-			<img src="images/filemgr.jpg" alt="">
-		</div>
-	</div>
     <!-- Project 10-->
     <div class="six columns category cas">
         <h5>Grid Services</h5>
@@ -336,34 +345,35 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/grid.jpg"><img src="images/grid.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/grid.jpg"><img src="Apache%20OODT_files/grid.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/grid.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/grid.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/grid.jpg" alt="">
+            <img src="Apache%20OODT_files/grid.jpg" alt="">
         </div>
     </div>
     <!-- Project 11-->
     <div class="six columns category cas">
         <h5>Metadata</h5>
         <p>
-        A Multi-valued, generic Metadata container class. The class uses an internal Map of string keys pointing to vectors of strings.
+        A Multi-valued, generic Metadata container class. The class uses
+ an internal Map of string keys pointing to vectors of strings.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/metadata.jpg"><img src="images/metadata.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/metadata.jpg"><img src="Apache%20OODT_files/metadata.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/metadata.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/metadata.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/metadata.jpg" alt="">
+            <img src="Apache%20OODT_files/metadata.jpg" alt="">
         </div>
     </div>
     <!-- Project 12-->
@@ -376,14 +386,14 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/mvn.png"><img src="images/mvn.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/mvn.png"><img src="Apache%20OODT_files/mvn.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/mvn.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/mvn.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/mvn.png" alt="">
+            <img src="Apache%20OODT_files/mvn.png" alt="">
         </div>
     </div>
     <!-- Project 13-->
@@ -396,34 +406,36 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/opendapps.jpg"><img src="images/opendapps.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/opendapps.jpg"><img src="Apache%20OODT_files/opendapps.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/opendapps.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/opendapps.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/opendapps.jpg" alt="">
+            <img src="Apache%20OODT_files/opendapps.jpg" alt="">
         </div>
     </div>
     <!-- Project 14-->
     <div class="six columns category cas">
         <h5>Process Control System</h5>
         <p>
-        The Process Control System's core system framework. PCS is an agglomeration of CAS services and components needed to build a science data system.
+        The Process Control System's core system framework. PCS is an 
+agglomeration of CAS services and components needed to build a science 
+data system.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/pcs.jpg"><img src="images/pcs.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/pcs.jpg"><img src="Apache%20OODT_files/pcs.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/pcs.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/pcs.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/pcs.jpg" alt="">
+            <img src="Apache%20OODT_files/pcs.jpg" alt="">
         </div>
     </div>
     <!-- Project 15-->
@@ -436,74 +448,79 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/pge.jpg"><img src="images/pge.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/pge.jpg"><img src="Apache%20OODT_files/pge.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/pge.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/pge.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/pge.jpg" alt="">
+            <img src="Apache%20OODT_files/pge.jpg" alt="">
         </div>
     </div>
     <!-- Project 16-->
     <div class="six columns category cas">
         <h5>Product Service</h5>
         <p>
-        The Product Service provides access to data products.  Products can be scientific datasets, images, documents, or anything with an electronic representation.
+        The Product Service provides access to data products.  Products 
+can be scientific datasets, images, documents, or anything with an 
+electronic representation.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/product.jpg"><img src="images/product.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/product.jpg"><img src="Apache%20OODT_files/product.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/product.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/product.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/product.jpg" alt="">
+            <img src="Apache%20OODT_files/product.jpg" alt="">
         </div>
     </div>
     <!-- Project 17-->
     <div class="six columns category cas">
         <h5>Profile Service</h5>
         <p>
-        Describes and locates resources using metadata descriptions via cataloging of metadata descriptions and provides creating, updating, and querying capabilities.
+        Describes and locates resources using metadata descriptions via 
+cataloging of metadata descriptions and provides creating, updating, and
+ querying capabilities.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/profile.png"><img src="images/profile.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/profile.png"><img src="Apache%20OODT_files/profile.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/profile.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/profile.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/profile.png" alt="">
+            <img src="Apache%20OODT_files/profile.png" alt="">
         </div>
     </div>
     <!-- Project 18-->
     <div class="six columns category cas">
         <h5>Protocol Package</h5>
         <p>
-        A collection of pluggable protocol implementations including ftp, http, imaps and sftp which can be used for data acquisition. 
+        A collection of pluggable protocol implementations including 
+ftp, http, imaps and sftp which can be used for data acquisition. 
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/protocol.jpg"><img src="images/protocol.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/protocol.jpg"><img src="Apache%20OODT_files/protocol.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/protocol.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/protocol.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/protocol.jpg" alt="">
+            <img src="Apache%20OODT_files/protocol.jpg" alt="">
         </div>
     </div>
     <!-- Project 19-->
@@ -516,34 +533,36 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/pushpull.jpg"><img src="images/pushpull.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/pushpull.jpg"><img src="Apache%20OODT_files/pushpull.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/pushpull.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/pushpull.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/pushpull.jpg" alt="">
+            <img src="Apache%20OODT_files/pushpull.jpg" alt="">
         </div>
     </div>
     <!-- Project 20-->
     <div class="six columns category cas">
         <h5>CAS Resource Management Component</h5>
         <p>
-        Provision of job management, and management of the underlying software system hardware and resources, such as disk space, computational resources, and shared identity.
+        Provision of job management, and management of the underlying 
+software system hardware and resources, such as disk space, 
+computational resources, and shared identity.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/resource.png"><img src="images/resource.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/resource.png"><img src="Apache%20OODT_files/resource.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/resource.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/resource.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/resource.png" alt="">
+            <img src="Apache%20OODT_files/resource.png" alt="">
         </div>
     </div>
     <!-- Project 21-->
@@ -556,14 +575,14 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/sso_logo.png"><img src="images/sso_logo.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/sso_logo.png"><img src="Apache%20OODT_files/sso_logo.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/sso.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/sso.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/sso_logo.png" alt="">
+            <img src="Apache%20OODT_files/sso_logo.png" alt="">
         </div>
     </div>
     <!-- Project 21-->
@@ -576,14 +595,14 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/tools.jpg"><img src="images/tools.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/tools.jpg"><img src="Apache%20OODT_files/tools.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/tools.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/tools.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/tools.jpg" alt="">
+            <img src="Apache%20OODT_files/tools.jpg" alt="">
         </div>
     </div>
     <!-- Project 21-->
@@ -596,96 +615,102 @@
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/vagrant.jpg"><img src="images/vagrant.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/vagrant.jpg"><img src="Apache%20OODT_files/vagrant.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/vagrant.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/vagrant.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/vagrant.jpg" alt="">
+            <img src="Apache%20OODT_files/vagrant.jpg" alt="">
         </div>
     </div>
     <!-- Project 22-->
     <div class="six columns category cas">
         <h5>Wicket Web Applications and Components</h5>
         <p>
-        <a href="http://wicket.apache.org">Apache Wicket</a>-based web applications and components for File and Workflow Manager's and Product Server. 
+        <a href="http://wicket.apache.org/">Apache Wicket</a>-based web applications and components for File and Workflow Manager's and Product Server. 
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/webapp.png"><img src="images/webapp.png" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/webapp.png"><img src="Apache%20OODT_files/webapp.png" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/webapp.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/webapp.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/webapp.png" alt="">
+            <img src="Apache%20OODT_files/webapp.png" alt="">
         </div>
     </div>
     <!-- Project 23-->
     <div class="six columns category cas">
         <h5>CAS Workflow Management Component</h5>
         <p>
-        The workflow management component of a Catalog and Archive Service. This component provides everything that you need to execute workflows, and science processing pipelines.
+        The workflow management component of a Catalog and Archive 
+Service. This component provides everything that you need to execute 
+workflows, and science processing pipelines.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/workflow.jpg"><img src="images/workflow.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/workflow.jpg"><img src="Apache%20OODT_files/workflow.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/workflow.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/workflow.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/workflow.jpg" alt="">
+            <img src="Apache%20OODT_files/workflow.jpg" alt="">
         </div>
     </div>
     <!-- Project 24-->
     <div class="six columns category cas">
         <h5>XML-configured, DBMS-based Product and Profile Server</h5>
         <p>
-        XML-configured DBMS-based Product and Profile which sits on top of Web-Grid and other Product and Profile server contexts.
+        XML-configured DBMS-based Product and Profile which sits on top 
+of Web-Grid and other Product and Profile server contexts.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/xmlps.jpg"><img src="images/xmlps.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/xmlps.jpg"><img src="Apache%20OODT_files/xmlps.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/xmlps.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/xmlps.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/xmlps.jpg" alt="">
+            <img src="Apache%20OODT_files/xmlps.jpg" alt="">
         </div>
     </div>
     <!-- Project 25-->
     <div class="six columns category cas">
         <h5>Query Expression</h5>
         <p>
-        Used by many other components as the standard way to pass a query and its results between servers, clients, nodes, and other components.
+        Used by many other components as the standard way to pass a 
+query and its results between servers, clients, nodes, and other 
+components.
         </p>
         <div class="portofoliothumb">
             <div class="portofoliothumboverlay">
                 <div class="viewgallery">
                     <!--image here -->
-                    <a data-gal="prettyPhoto[gallery]" href="images/xmlquery.jpg"><img src="images/xmlquery.jpg" class="left galleryicon" alt=""> Gallery</a>
+                    <a data-gal="prettyPhoto[gallery]" href="http://oodt.staging.apache.org/images/xmlquery.jpg"><img src="Apache%20OODT_files/xmlquery.jpg" class="left galleryicon" alt=""> Gallery</a>
                 </div>
                 <div class="inner">
-                    <a class="projectdetail" href="components/xmlquery.html">+ Details</a>
+                    <a class="projectdetail" href="http://oodt.staging.apache.org/components/xmlquery.html">+ Details</a>
                 </div>
             </div>
             <!-- image here -->
-            <img src="images/xmlquery.jpg" alt="">
+            <img src="Apache%20OODT_files/xmlquery.jpg" alt="">
         </div>
     </div>
 </div>
+
 <div class="hr">
 </div>
\ No newline at end of file