updated info - removed WordPress :)

xylophonehero · Feb 8, 2021 · 7a84d77 · 7a84d77
1 parent b01cea4
commit 7a84d77
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 198 deletions.
diff --git a/src/3dModel.js b/src/3dModel.js
diff --git a/src/App.js b/src/App.js
@@ -80,8 +80,10 @@ function App()
             <p>For the past six years, I have been working and travelling on cruise ships as a Musical Director and Pianist, then Sales Manager.</p>
             <p>My passions include coding, solving puzzles, music performance, travel, and playing games.</p> */}
             <p>Hello, and thank you for checking out my site.</p>
-            <p>I'm Nick Worrall and I'm a web developer. I'll make your website and teach you how to use the software I used to build it so that you can easily upload new content yourself.</p>
-            <p>I create beautiful and functional websites using HTML, CSS, PHP, JavaScript, WordPress, React and many other tools. </p>
+            <p>I'm Nick, a Freelance Full Stack Web Developer.</p>
+            <p>I create beautiful and functional websites using React, JavaScript, Node.js, Gatsby,js, Next.js, WordPress and many other tools.</p>
+            <p>I integrate my sites with a content management system, usually Netlify CMS, Strapi or Headless WordPress, so clients can easily edit the data on existing pages or create new pages/blog posts from a template I have created.</p>
+            <p>Clients are impressed with my knowledge and speed of delivery when it comes to developing websites for them.</p>
             <p>After graduating in 2014 from Warwick University with an Integrated Master's Degree (First Class Honours) in Mathematics, I have been working and travelling on cruise ships as a Musical Director and Pianist, then Sales Manager.</p>
             <p>During that time I have learned how to code so I can make websites, games and applications. I am a great problem solver, logical strategist, learn new concepts quickly and work swiftly and efficiently.</p>
             <p>When I am not working, I like to perform music, solve puzzles, travel the world, and play games.</p>
@@ -109,9 +111,9 @@ function App()
               <h3>Languages</h3>
               <hr />
               <ul>
+                <li>JavaScript</li>
                 <li>HTML</li>
                 <li>CSS</li>
-                <li>JavaScript</li>
                 <li>Python</li>
                 <li>PHP</li>
                 <li>C#</li>
@@ -122,11 +124,11 @@ function App()
               <hr />
               <ul>
                 <li>React</li>
+                <li>Gastby.js</li>
+                <li>Next.js</li>
+                <li>Node.js</li>
+                <li>StrapiCMS</li>
                 <li>WordPress</li>
-                <li>Flutter</li>
-                <li>Unity</li>
-                <li>jQuery</li>
-                <li>Netlify CMS</li>
               </ul>
             </div>
             <div>
@@ -144,49 +146,20 @@ function App()
           </div>
         </div>
       </div>
-      {/* <div className='section'>
-        <h1>Services</h1>
-        <div className='skill-wrapper'>
-          <div>
-            <h3>Ecommerce</h3>
-          </div>
-          <div>
-            <h3>Blogs</h3>
-          </div>
-          <div>
-            <h3>Something else</h3>
-          </div>
 
-
-        </div>
-      </div> */}
       <Services />
       <Portfolio />
       <Testimonials />
-      {/* <div className='section'>
-        <h1>Testimonials</h1>
-        <div className='testimonial-wrapper'>
-          {Testimonials.map(item =>
-
-            <div key={item.id} className='testimonial transparent-background'>
-              <h2>{item.name}</h2>
-              <h3>{item.title}</h3>
-              <hr />
-              <p>"{item.testimonial}"</p>
-            </div>
 
-          )}
-        </div>
-      </div> */}
       <div className='section' id='contact' style={{ minHeight: 'auto', textAlign: 'center' }}>
         <h1>Contact</h1>
         <div>
           <h2>Interested in working with me?</h2>
           <h2>Contact me now and we will work together to create your dream website.</h2>
-          <h3>Email: <a href='mailto:nick97000@gmail.com' target='_blank' rel='noopener noreferrer'>nick97000@gmail.com</a></h3>
+          <h3>Email: <a href='mailto:nick@nickworrall.co.uk' target='_blank' rel='noopener noreferrer'>nick@nickworrall.co.uk</a></h3>
           {/* <h3>Phone: <a href='tel: +447533232346'>(+44)7533232346</a></h3> */}
           <h3>LinkedIn: <a href='https://www.linkedin.com/in/nick-worrall-1940981ab/' target='_blank' rel='noopener noreferrer'>Nick Worrall</a></h3>
-          {/* <p>If you need words for your website &mdash; whether that be content, copywriting, blogs, advertising features, editing or proofreading &mdash; I work closly with writer <a href='https://karenworrall.co.uk'>Karen Worrall</a>, who I highly recommend and we can offer you a package deal.</p> */}
+          <h3>GitHub: <a href='https://github.com/xylophonehero' target='_blank' rel='noopener noreferrer'>XylophoneHero</a></h3>
         </div>
       </div>
       <div style={{ height: '1vh', position: 'relative', color: 'white', zIndex: '-1' }} />

diff --git a/src/Portfolio.json b/src/Portfolio.json
@@ -1,11 +1,19 @@
 [
     {
-        "id": 0,
-        "title": "Cruise Ship Karen",
-        "image": "Cruiseshipkaren.jpg",
-        "link": "https://cruiseshipkaren.com",
-        "tagline": "WordPress travel website",
-        "description": "This website has information on calls of port for cruise ship itineraries, blogs and advice articles. *nI created a template for the port guide section so that information could be easily added by the writer whenever they write a new guide. *nI also created and edited footage for the YouTube Channel Cruise Ship Karen."
+        "id": -1,
+        "title": "ISJ Photography",
+        "image": "isj.png",
+        "link": "https://isjphotography.com",
+        "tagline": "Photography portfolio",
+        "description": "This is Gatsby site for a photographer and uses Netlify CMS so they can easily edit content on the pages as well create new pages/blog posts from templates I have created. *nI used Bulma for styling which really helped creating a responsive design and responsive photo galleries. *nGatsby's Image API was also invaluable to create lazy loaded, blurry images to hasten the percieved performance of the site."
+    },
+    {
+        "id": 2,
+        "title": "KarenWorrall.co.uk",
+        "image": "karenworrall.jpg",
+        "link": "https://karenworrall.co.uk",
+        "tagline": "React writer portfolio website",
+        "description": "This is the portfolio website of a writer featuring their services, selected works and testimonials. *nI built the website from the ground up, writing all the JavaScript and CSS and implemented third party React libraries. *nThe website uses Netlify CMS as a backend to load information for the portfolio, testimonials and services section so the client can easily add or update the content."
     },
     {
         "id": 1,
@@ -16,12 +24,12 @@
         "description": "On this website, you can buy a subscription for a monthly care package designed for night health workers. The website uses the Genesis framework and implements the Subbly platform to handle the e-commerce side of it. *nI have also taught the client to use WordPress so they can update the website themselves with new pictures every month."
     },
     {
-        "id": 2,
-        "title": "KarenWorrall.co.uk",
-        "image": "karenworrall.jpg",
-        "link": "https://karenworrall.co.uk",
-        "tagline": "React writer portfolio website",
-        "description": "This is the portfolio website of a writer featuring their services, selected works and testimonials. *nI built the website from the ground up, writing all the JavaScript and CSS and implemented third party React libraries. *nThe website uses Netlify CMS as a backend to load information for the portfolio, testimonials and services section so the client can easily add or update the content."
+        "id": 0,
+        "title": "Cruise Ship Karen",
+        "image": "Cruiseshipkaren.jpg",
+        "link": "https://cruiseshipkaren.com",
+        "tagline": "WordPress travel website",
+        "description": "This website has information on calls of port for cruise ship itineraries, blogs and advice articles. *nI created a template for the port guide section so that information could be easily added by the writer whenever they write a new guide. *nI also created and edited footage for the YouTube Channel Cruise Ship Karen."
     },
     {
         "id": 3,

diff --git a/src/Services.json b/src/Services.json
@@ -2,17 +2,27 @@
     {
         "id": 0,
         "title": "Website Design",
-        "info": "I'll start shaping your website from a pen and paper draft and mould it so your ideas come to life. Once you are happy with the initial design, I will start building the website, taking great care for it to match your needs."
+        "info": "I'll start shaping your website from a pen and paper draft and mould it so your ideas come to life. Once you are happy with the initial design, I will start building the website, taking great care for it to match your needs. If you already have designs for your site, I will use my magic to convert them into a website."
     },
     {
         "id": 1,
-        "title": "WordPress Theme Development",
-        "info": "WordPress is my go-to content management system I will use to build your website. 30% of the web is powered by it because it's easy to use and very functional. After finishing your website, I will provide you with login details and together we will go through editing the fine detail of the site."
+        "title": "React - Static and Dynamic Sites",
+        "info": "React is my go to choice for web development and I will use either Gatsby.js or Next.js on top of it depending on the requirements of your site. Gatsby is a blazingly fast static site generator and great for content that doesn't change very often. Next is great for large multi-user and big e-commerce sites with lots of dynamic content"
+    },
+    {
+        "id": 1.5,
+        "title": "WordPress - Monolithic and Headless",
+        "info": "I can also create WordPress sites if you would like more control of the layout and just need help setting up the theme and pages (Monolithic). If you already have a WordPress site and are in need of a redesign, I can create a React site for you which sources its data from your existing WordPress databases (Headless). I recommend this way as you get the benefits of a faster, more secure, SEO-friendly website."
+    },
+    {
+        "id": 6,
+        "title": "Content Management System",
+        "info": "After your website is complete, I will teach you how to use the content management system I integrated so you can edit existing content or update new content, whether it be photos, blogs or new items in your store. My go to choices for CMS are Strapi, NetlifyCMS and Contentful."
     },
     {
         "id": 2,
         "title": "E-Commerce Solution",
-        "info": "I'll create your online store for you to sell your goods or services on your selected platform, such as Subbly, Shopify, WooCommerce etc. Credit card payments will be taken safely from your customers and you can easily add any discounts or coupon campaigns to create a buzz as well."
+        "info": "I'll create your online store for you to sell your goods or services on your selected platform, such as Shopify, Snipcart, Stripe etc. Credit card payments will be taken safely from your customers and you can easily add any discounts or coupon campaigns to create a buzz as well."
     },
     {
         "id": 3,
@@ -22,18 +32,13 @@
     {
         "id": 4,
         "title": "Responsive Site Design",
-        "info": "All websites can be viewed on laptops, phones, tablets and more. If a user has a bad experience on one of these, then they probably won't stay on your site for very long. I will make sure this never happens as websites that I design function and look great on all devices."
+        "info": "All websites can be viewed on laptops, phones, tablets and more. If a user has a bad experience on one of these, then they probably won't stay on your site for very long. I will make sure this never happens as websites that I design function and look great on all devices. I usually use a CSS framework Bulma/Chakra-UI to help build responsive sites."
     },
     {
         "id": 5,
         "title": "Cross-browser Testing",
         "info": "As well as different screen sizes, websites can be viewed on many different browsers. The most popular are Firefox, Chrome, Safari, Edge and native mobile browsers. I will make sure that your website is correctly implemented on all of these different browsers."
     },
-    {
-        "id": 6,
-        "title": "WordPress Training",
-        "info": "After your website is complete, I will teach you the basics of WordPress so that you can add and update new content, whether it be photos, blogs or new items in your store. WordPress is beginner-friendly and I am a patient teacher."
-    },
     {
         "id": 7,
         "title": "Copywriting/Content Writing/SEO Writing",

diff --git a/src/Testimonials.json b/src/Testimonials.json
@@ -9,6 +9,6 @@
         "id": 1,
         "name": "Karen Worrall",
         "title": "Copy and Content Writer",
-        "testimonial": "Nick created both my portfolio site and travel website. He works quickly and is very reliable. He has a lot of knowledge adn understanding on how to make a fantastic looking website that runs smoothly on all devices. If I needed another website made, I will hire him."
+        "testimonial": "Nick created both my portfolio site and travel website. He works quickly and is very reliable. He has a lot of knowledge and understanding on how to make a fantastic looking website that runs smoothly on all devices. If I needed another website made, I will hire him."
     }
 ]
diff --git a/src/Title.scss b/src/Title.scss
@@ -21,6 +21,7 @@
 
 .explode-letter{
     font-size: 150px;
+    user-select: none;
 }
 
 .scroll{

diff --git a/src/img/isj.png b/src/img/isj.png